Skip to content

Commit a4cf11f

Browse files
dqna64dqna64
authored
Responsiveness (#107)
* create nav menu burger with open/close interaction * navbar responsive * more patches to responsiveness
1 parent 3531787 commit a4cf11f

File tree

6 files changed

+225
-58
lines changed

6 files changed

+225
-58
lines changed

‎components/Card.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const Card = styled('div', {
55
flexDirection: 'column',
66
height: '28em',
77
padding: '$6 $5',
8-
width: '24rem',
8+
maxWidth: '24rem',
99
boxShadow: '$default',
1010
background: '$slate1',
1111
borderRadius: '$lg'

‎components/NavMenu.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { styled } from "@stitches/react"
2+
import { useState } from "react"
3+
4+
const Layer = styled('div', {
5+
display: "block",
6+
content: "",
7+
backgroundColor: 'black',
8+
width: "100%",
9+
height: '3px',
10+
variants: {
11+
isOpen: {
12+
true: {
13+
backgroundColor: "CornflowerBlue"
14+
}
15+
}
16+
}
17+
18+
})
19+
20+
const TopBun = styled(Layer, {
21+
22+
})
23+
24+
const Filling = styled(Layer, {
25+
26+
})
27+
28+
const BottomBun = styled(Layer, {
29+
30+
})
31+
32+
const Burger = styled('div', {
33+
display: "flex",
34+
flexFlow: "column nowrap",
35+
justifyContent: "space-between",
36+
width: "22px",
37+
height: '16px',
38+
cursor: "pointer",
39+
"@media screen and (min-width: 768px)": {
40+
display: "none",
41+
}
42+
})
43+
44+
export default function NavMenu() {
45+
const [isOpen, setIsOpen] = useState(false);
46+
return (
47+
<Burger onClick={() => setIsOpen((val) => !val)}>
48+
<TopBun isOpen={isOpen}></TopBun>
49+
<Filling isOpen={isOpen}></Filling>
50+
<BottomBun isOpen={isOpen}></BottomBun>
51+
</Burger>
52+
)
53+
}

‎components/Navbar.tsx

+153-54
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,137 @@
1+
import { styled } from '@stitches/react'
12
import Link from 'next/link'
3+
import { relative } from 'path'
24
import { GithubLogo } from 'phosphor-react'
5+
import { useState } from 'react'
6+
import { Box } from './Box'
37
import { Flex } from './Flex'
48
import { IconButton } from './IconButton'
59
import Logo from './Logo'
10+
import NavMenu from './NavMenu'
611
import SearchButton from './SearchButton'
712
import { Text } from './Text'
813

914
const GITHUB_URL = 'https://github.com/csesoc/learning-platform'
15+
const navItems = [
16+
{
17+
'path': 'articles',
18+
'title': 'Collection',
19+
},
20+
{
21+
'path': 'creators',
22+
'title': 'Contribute',
23+
},
24+
{
25+
'path': '2521-revision-practical',
26+
'title': 'COMP2521',
27+
},
28+
{
29+
'path': 'opendev',
30+
'title': 'Open Dev Series',
31+
},
32+
33+
34+
]
35+
36+
const NavContainer = styled('div', {
37+
display: 'block',
38+
flexFlow: 'column nowrap',
39+
position: "fixed",
40+
left: "100vw",
41+
right: "inherit",
42+
top: 0,
43+
transform: "translateX(100vw)",
44+
variants: {
45+
isOpen: {
46+
true: {
47+
// transform: "translateX(30vw)",
48+
left: "inherit",
49+
right: "100vw",
50+
}
51+
}
52+
},
53+
backgroundColor: '#e8ebed',
54+
boxShadow: "0px 0px 31px -19px rgba(0,0,0,0.54)",
55+
width: '100vw',
56+
maxWidth: '548px',
57+
height: '100vh',
58+
zIndex: 5,
59+
padding: "4rem",
60+
fontSize: "2.4rem",
61+
lineHeight: "4.4rem",
62+
"@media screen and (min-width: 768px)": {
63+
display: "flex",
64+
fontSize: "1rem",
65+
lineHeight: "inherit",
66+
flexFlow: "row nowrap",
67+
gap: '2.25rem',
68+
justifyContent: 'center',
69+
position: "relative",
70+
left: "inherit",
71+
right: "inherit",
72+
transform: "none",
73+
backgroundColor: 'transparent',
74+
padding: "0",
75+
width: 'auto',
76+
height: "inherit",
77+
},
78+
})
79+
80+
const Layer = styled('div', {
81+
display: "block",
82+
content: "",
83+
backgroundColor: 'black',
84+
width: "100%",
85+
height: '3px',
86+
variants: {
87+
isOpen: {
88+
true: {
89+
backgroundColor: "CornflowerBlue"
90+
}
91+
}
92+
}
93+
94+
})
95+
96+
const TopBun = styled(Layer, {
97+
98+
})
99+
100+
const Filling = styled(Layer, {
101+
102+
})
103+
104+
const BottomBun = styled(Layer, {
105+
106+
})
107+
108+
const Burger = styled('div', {
109+
display: "flex",
110+
flexFlow: "column nowrap",
111+
justifyContent: "space-between",
112+
width: "22px",
113+
height: '16px',
114+
cursor: "pointer",
115+
"@media screen and (min-width: 768px)": {
116+
display: "none",
117+
},
118+
zIndex: 10,
119+
})
10120

11121
export default function Navbar() {
122+
const [isOpen, setIsOpen] = useState(false);
123+
12124
return (
13125
<Flex
14126
as="header"
15127
css={{
16128
py: '$4',
17129
px: '$6',
18130
alignItems: 'center',
19-
zIndex: '1'
131+
zIndex: '1',
132+
position: 'fixed',
133+
width: "100%",
134+
background: "linear-gradient(180deg, rgba(244,244,244,1) 0%, rgba(244,244,244,1) 90%, rgba(244,244,244,0.8084599921043882) 96%, rgba(244,244,244,0) 100%)",
20135
}}>
21136
<Flex css={{ flex: 1, justifyContent: 'flex-start' }}>
22137
<Link href="/">
@@ -31,54 +146,21 @@ export default function Navbar() {
31146
</button>
32147
</Link>
33148
</Flex>
34-
<Flex
35-
css={{
36-
flex: 1,
37-
gap: '2.25rem',
38-
justifyContent: 'center'
39-
}}>
40-
<Link href="/articles">
41-
<Text
42-
as="a"
43-
size="label-lg"
44-
css={{ color: '$slate12', cursor: 'pointer' }}>
45-
Collection
46-
</Text>
47-
</Link>
48-
<Link href="/creators">
49-
<Text
50-
as="a"
51-
size="label-lg"
52-
css={{
53-
color: '$slate12',
54-
cursor: 'pointer'
55-
}}>
56-
Creators
57-
</Text>
58-
</Link>
59-
<Link href="/opendev">
60-
<Text
61-
as="a"
62-
size="label-lg"
63-
css={{
64-
color: '$slate12',
65-
cursor: 'pointer'
66-
}}>
67-
Open Dev
68-
</Text>
69-
</Link>
70-
<Link href="/2521-revision-practical">
71-
<Text
72-
as="a"
73-
size="label-lg"
74-
css={{
75-
color: '$slate12',
76-
cursor: 'pointer'
77-
}}>
78-
COMP2521
79-
</Text>
80-
</Link>
81-
<Text
149+
<NavContainer isOpen={isOpen}>
150+
{navItems.map((navItem, idx) => (
151+
<Link key={idx} href={`/${navItem.path}`}>
152+
<Text
153+
as="a"
154+
css={{ color: '$slate12', cursor: 'pointer' }}
155+
onClick={() => { setIsOpen(false); console.log('hi') }}>
156+
{navItem.title}
157+
158+
</Text>
159+
</Link>
160+
161+
)
162+
)}
163+
{/* <Text
82164
as="a"
83165
size="label-lg"
84166
css={{
@@ -87,21 +169,38 @@ export default function Navbar() {
87169
cursor: 'not-allowed'
88170
}}>
89171
About
90-
</Text>
91-
</Flex>
92-
<Flex
172+
</Text> */}
173+
</NavContainer>
174+
<Box css={{
175+
display: isOpen ? "block" : "none",
176+
position: "absolute",
177+
left: "0",
178+
top: "0",
179+
background: "rgb(0,0,0,0.3)",
180+
width: "100vw",
181+
height: "100vh",
182+
zIndex: 3,
183+
184+
}}></Box>
185+
<Burger onClick={() => setIsOpen((val) => !val)}>
186+
<TopBun isOpen={isOpen}></TopBun>
187+
<Filling isOpen={isOpen}></Filling>
188+
<BottomBun isOpen={isOpen}></BottomBun>
189+
</Burger>
190+
{/* <Flex
93191
css={{
94192
flex: 1,
95193
gap: '$3',
96194
justifyContent: 'flex-end'
97195
}}>
98-
{/* <SearchButton /> */}
196+
<SearchButton />
99197
<IconButton aria-label="GitHub repository for CSESoc Learn">
100198
<a href={GITHUB_URL} target="_blank" rel="noreferrer">
101199
<GithubLogo weight="fill" />
102200
</a>
103201
</IconButton>
104-
</Flex>
202+
</Flex> */}
105203
</Flex>
204+
106205
)
107206
}

‎pages/_app.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Box } from 'components/Box'
99
// import 'highlight.js/styles/github-dark.css';
1010
import 'styles/prism-theme.css'
1111
import 'styles/Article.css'
12+
import ArticleLayout from 'components/ArticleLayout'
1213

1314
function MyApp({ Component, pageProps }: AppProps) {
1415
// TODO: Use return statement when dark theme is added
@@ -22,7 +23,10 @@ function MyApp({ Component, pageProps }: AppProps) {
2223
<>
2324
<Box css={{ height: '100vh' }}>
2425
<Navbar />
25-
<Component {...pageProps} />
26+
<ArticleLayout>
27+
{/* <Box css={{ height: '2.5rem' }} /> */}
28+
<Component {...pageProps} />
29+
</ArticleLayout>
2630
<Footer />
2731
</Box>
2832
</>

‎pages/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -128,11 +128,11 @@ const Home: NextPage = ({ articles }: any) => {
128128
<a
129129
href="https://cseso.cc/discord/"
130130
target="blank"
131-
style={{ textDecoration: 'none' }}>
131+
style={{ textDecoration: 'none', width: '100%', }}>
132132
<Button
133133
size="large"
134134
css={{
135-
width: '24em',
135+
width: '100%',
136136
cursor: 'pointer',
137137
backgroundColor: '$indigo4',
138138
'&:hover': { backgroundColor: '$indigo5' }

‎styles/NavBar.module.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.layer {
2+
display: block;
3+
content: "";
4+
background-color: black;
5+
width: 100%;
6+
height: 3px;
7+
}
8+
9+
.topBun #cross {
10+
transform: rotateZ(45deg);
11+
}

0 commit comments

Comments
 (0)