www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Added mobile spacer
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-09-04 13:45:15 -07:00
parent 0c513d9698
commit 9f77dc653b
Signed by: snedadah
GPG Key ID: 8638C7F917385B01
2 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/Header.module.css
View File

@ -84,6 +84,10 @@
cursor: pointer;
}
.mobileSpacer {
display: none;
}
@media screen and (max-width: 768px) {
.sideBarCommon {
width: 90vw;
@ -96,6 +100,11 @@
.headerWrapper {
padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16);
}
.mobileSpacer {
display: block;
padding: calc(50rem / 16);
}
}
.closeMenuButton {

68
components/Header.tsx
View File

@ -26,41 +26,41 @@ export function Header() {
</button>
</div>
<>
<div
className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
>
<h1 className={styles.menuHeader}>Sections</h1>
<div className={styles.lineWrapper}>
<button
className={styles.closeMenuButton}
onClick={(_) => {
setIsShowingMenu(false);
}}
>
<img
src="/images/rightArrow.svg"
className={styles.arrowIcon}
width="50"
height="50"
draggable="false"
/>
</button>
</div>
<Sections data={sectionsData} />
</div>
<div className={styles.mobileSpacer} />
<div
className={
isShowingMenu
? styles.backgroundTintShow
: styles.backgroundTintHidden
}
onClick={(_) => {
setIsShowingMenu(false);
}}
/>
</>
<div
className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
>
<h1 className={styles.menuHeader}>Sections</h1>
<div className={styles.lineWrapper}>
<button
className={styles.closeMenuButton}
onClick={(_) => {
setIsShowingMenu(false);
}}
>
<img
src="/images/rightArrow.svg"
className={styles.arrowIcon}
width="50"
height="50"
draggable="false"
/>
</button>
</div>
<Sections data={sectionsData} />
</div>
<div
className={
isShowingMenu
? styles.backgroundTintShow
: styles.backgroundTintHidden
}
onClick={(_) => {
setIsShowingMenu(false);
}}
/>
</>
);
}