Header/Side Menu (#52)
parent
fc2bf48706
commit
bfa3e9960c
@ -0,0 +1,137 @@ |
||||
.headerWrapper { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: sticky; |
||||
top: 0; |
||||
left: 0; |
||||
background: var(--dark--primary-background); |
||||
z-index: 98; |
||||
box-sizing: border-box; |
||||
padding: calc(10rem / 16) calc(100rem / 16) 0; |
||||
} |
||||
|
||||
.titleHeader { |
||||
margin: calc(16rem / 16) 0; |
||||
} |
||||
|
||||
.sideBarCommon { |
||||
position: fixed; |
||||
right: 0; |
||||
top: 0; |
||||
min-width: calc(400rem / 16); |
||||
height: 100vh; |
||||
background: var(--secondary-background); |
||||
padding: calc(100rem / 16); |
||||
margin: 0; |
||||
z-index: 100; |
||||
padding: 0; |
||||
padding-right: calc(20rem / 16); |
||||
transition: transform 0.8s; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.sideBarShown { |
||||
composes: sideBarCommon; |
||||
/* -1% to hide slight line tip showing in some browsers */ |
||||
transform: translateX(-1%); |
||||
} |
||||
|
||||
.sideBarHidden { |
||||
composes: sideBarCommon; |
||||
transform: translateX(100%); |
||||
} |
||||
|
||||
.backgroundTintCommon { |
||||
background-color: var(--label); |
||||
animation: fadeIn 1s; |
||||
position: fixed; |
||||
z-index: 99; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
transition: opacity 0.8s, visibility 0.8s; |
||||
} |
||||
|
||||
.backgroundTintShow { |
||||
composes: backgroundTintCommon; |
||||
visibility: visible; |
||||
opacity: 0.2; |
||||
} |
||||
|
||||
.backgroundTintHidden { |
||||
composes: backgroundTintCommon; |
||||
visibility: hidden; |
||||
opacity: 0; |
||||
} |
||||
|
||||
|
||||
.menuHeader { |
||||
margin-bottom: 0; |
||||
padding-left: calc(30rem / 16); |
||||
padding-bottom: 0; |
||||
color: var(--dark--secondary-heading); |
||||
} |
||||
|
||||
.sectionsWrapper { |
||||
padding-left: calc(30rem / 16); |
||||
} |
||||
|
||||
.menuIcon { |
||||
background: none; |
||||
border: none; |
||||
} |
||||
|
||||
.menuIcon:hover { |
||||
opacity: 0.8; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
|
||||
@media screen and (max-width: 768px) { |
||||
.sideBarCommon { |
||||
min-width: calc(300rem / 16); |
||||
max-width: calc(500rem / 16); |
||||
} |
||||
|
||||
.menuHeader { |
||||
padding-left: calc(20rem / 16); |
||||
} |
||||
|
||||
.sectionsWrapper { |
||||
padding-left: calc(20rem / 16); |
||||
} |
||||
|
||||
.headerWrapper { |
||||
padding: calc(10rem / 16) calc(20rem / 16) 0; |
||||
} |
||||
} |
||||
|
||||
.closeMenuButton { |
||||
background: var(--primary-heading); |
||||
padding: 0 calc(20rem / 16); |
||||
border-radius: calc(50rem / 16); |
||||
display: flex; |
||||
flex-direction: row; |
||||
margin-left: calc(20rem / 16); |
||||
/* transparent border fixes weird coloring on the border in some browsers */ |
||||
border: calc(1rem / 16) solid transparent; |
||||
} |
||||
|
||||
.closeMenuButton:hover { |
||||
background-color: var(--secondary-accent-light); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.lineWrapper { |
||||
width: 100%; |
||||
display: flex; |
||||
} |
||||
|
||||
.lineWrapper:before { |
||||
content: ""; |
||||
flex: 1 1; |
||||
border-bottom: 3px solid white; |
||||
margin: auto; |
||||
} |
||||
@ -0,0 +1,69 @@ |
||||
import { sectionsData } from "data/routes"; |
||||
import Link from "next/link"; |
||||
import React, { useState } from "react"; |
||||
|
||||
import { Sections } from "./Sections"; |
||||
|
||||
import styles from "./Header.module.css"; |
||||
|
||||
export function Header() { |
||||
const [isShowingMenu, setIsShowingMenu] = useState(false); |
||||
|
||||
return ( |
||||
<> |
||||
<div |
||||
className={ |
||||
isShowingMenu |
||||
? styles.backgroundTintShow |
||||
: styles.backgroundTintHidden |
||||
} |
||||
onClick={(_) => { |
||||
setIsShowingMenu(false); |
||||
}} |
||||
/> |
||||
<div className={styles.headerWrapper}> |
||||
<h1 className={styles.titleHeader}> |
||||
<Link href="/">CS 2022</Link> |
||||
</h1> |
||||
<button |
||||
onClick={(_) => { |
||||
setIsShowingMenu(true); |
||||
}} |
||||
className={styles.menuIcon} |
||||
> |
||||
<img |
||||
src="/images/menuIcon.svg" |
||||
width="50" |
||||
height="50" |
||||
draggable="false" |
||||
/> |
||||
</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> |
||||
<div className={styles.sectionsWrapper}> |
||||
<Sections data={sectionsData} showHeader={false} /> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -1,46 +1,46 @@ |
||||
export const sectionsData = [ |
||||
{ |
||||
name: "Demographics", |
||||
url: "/", |
||||
url: "/demographics", |
||||
}, |
||||
{ |
||||
name: "Academics", |
||||
url: "/", |
||||
url: "/academics", |
||||
}, |
||||
{ |
||||
name: "Co-op", |
||||
url: "/", |
||||
url: "/coop", |
||||
}, |
||||
{ |
||||
name: "Lifestyle and Interests", |
||||
url: "/", |
||||
url: "/lifestyle-and-interests", |
||||
}, |
||||
{ |
||||
name: "Intimacy and Drugs", |
||||
url: "/", |
||||
url: "/intimacy-and-drugs", |
||||
}, |
||||
{ |
||||
name: "Post-grad", |
||||
url: "/", |
||||
url: "/postgrad", |
||||
}, |
||||
{ |
||||
name: "Friends", |
||||
url: "/", |
||||
url: "/friends", |
||||
}, |
||||
{ |
||||
name: "Miscellaneous", |
||||
url: "/", |
||||
url: "/miscellaneous", |
||||
}, |
||||
{ |
||||
name: "Mental Health", |
||||
url: "/", |
||||
url: "/mental-health", |
||||
}, |
||||
{ |
||||
name: "Personal", |
||||
url: "/", |
||||
url: "/personal", |
||||
}, |
||||
{ |
||||
name: "Contributors", |
||||
url: "/", |
||||
url: "/contributors", |
||||
}, |
||||
]; |
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 496 B |
Loading…
Reference in new issue