Skip to content

Commit 9c1e366

Browse files
GurprankedGurpranked
authored
Merge pull request #37 from UMLCloudComputing/feat--Drop-down-menu-for-top-navbar
Navbar updates for smaller screen sizes
2 parents d7b6325 + 23f8a72 commit 9c1e366

File tree

5 files changed

+112
-152
lines changed

5 files changed

+112
-152
lines changed

‎docusaurus.config.js

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -137,25 +137,11 @@ const config = {
137137
label: 'Activities',
138138
},
139139

140-
// Events (Engage)
140+
// Engage
141141
{
142-
href: 'https://umasslowellclubs.campuslabs.com/engage/organization/cloudcomputingclub/events',
142+
href: 'https://umasslowellclubs.campuslabs.com/engage/organization/cloudcomputingclub',
143143
position: 'left',
144-
label: 'Events',
145-
},
146-
147-
// News (Engage)
148-
{
149-
href: 'https://umasslowellclubs.campuslabs.com/engage/organization/cloudcomputingclub/news',
150-
position: 'left',
151-
label: 'News',
152-
},
153-
154-
// FAQ
155-
{
156-
position: 'left',
157-
label: 'FAQ',
158-
to: '/docs/Getting Started and FAQ',
144+
label: 'Engage',
159145
},
160146

161147
// Github
@@ -166,31 +152,32 @@ const config = {
166152
position: 'right',
167153
html: '<i class="fa fa-github"></i>',
168154
},
169-
{
170-
href: 'https://github.com/UMLCloudComputing',
171-
label: 'GitHub',
172-
position: 'right',
173-
},
174-
175-
// Discord
176-
{
177-
href: 'https://discord.gg/WC2NdqYtDt',
178-
label: 'Discord',
179-
position: 'right',
180-
},
181155

182-
// Instagram
156+
// Socials (Discord, Instagram, LinkedIn)
183157
{
184-
href: 'https://www.instagram.com/umlcloudcomputing/',
185-
label: 'Instagram',
158+
type: 'dropdown',
159+
label: 'Socials',
186160
position: 'right',
187-
},
161+
items: [
162+
163+
// Discord
164+
{
165+
href: 'https://discord.gg/WC2NdqYtDt',
166+
label: 'Discord',
167+
},
168+
169+
// Instagram
170+
{
171+
href: 'https://www.instagram.com/umlcloudcomputing/',
172+
label: 'Instagram',
173+
},
188174

189-
// LinkedIn
190-
{
191-
href: 'https://www.linkedin.com/company/umass-lowell-cloud-computing-club/',
192-
label: 'LinkedIn',
193-
position: 'right',
175+
// LinkedIn
176+
{
177+
href: 'https://www.linkedin.com/company/umass-lowell-cloud-computing-club/',
178+
label: 'LinkedIn',
179+
},
180+
]
194181
},
195182

196183
// Sign In
@@ -224,6 +211,15 @@ const config = {
224211
},
225212
],
226213
},
214+
{
215+
title: 'Help',
216+
items: [
217+
{
218+
label: 'FAQ',
219+
to: '/docs/Getting Started and FAQ'
220+
}
221+
]
222+
}
227223
],
228224
copyright: `Copyright © ${new Date().getFullYear()} UMass Lowell Cloud Computing Club`,
229225
},

‎src/components/NavbarItems/AccountButton.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Button from '@mui/material/Button';
2-
import { useColorMode } from '@docusaurus/theme-common';
2+
import { useColorMode } from '@docusaurus/theme-common/internal';
33
import LogoutIcon from '@mui/icons-material/Logout'
44
import { Link as RouterLink } from 'react-router-dom';
55
import SignIn from '../../pages/SignIn';

‎src/pages/SignIn.js

Lines changed: 77 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// React
22
import React from 'react';
33
import { useEffect, useState } from 'react';
4-
import { useColorMode } from '@docusaurus/theme-common';
4+
import { useColorMode } from '@docusaurus/theme-common/internal';
55

66
// MUI
77
import Avatar from '@mui/material/Avatar';
@@ -30,7 +30,7 @@ import { ThemeProvider } from '@emotion/react';
3030

3131
function Copyright(props, isDarkMode) {
3232
return (
33-
<Typography variant="body2" color="text.secondary" align="center" {...props}>
33+
<Typography variant="body2" color={isDarkMode ? 'grey.300' : "text.secondary"} align="center" {...props}>
3434
{'Copyright © '}
3535
<Link sx={{ color: 'palette.text.primary'}} component={RouterLink} to="">
3636
UML Cloud Computing Club
@@ -73,80 +73,78 @@ function SignInPage() {
7373
}, []);
7474

7575
return (
76-
<ThemeProvider theme={lightTheme}>
77-
<Container component="main" maxWidth="xs">
78-
<CssBaseline />
79-
<Box
80-
sx={{
81-
marginTop: 8,
82-
display: 'flex',
83-
flexDirection: 'column',
84-
alignItems: 'center',
76+
<Container component="main" maxWidth="xs">
77+
<CssBaseline />
78+
<Box
79+
sx={{
80+
marginTop: 8,
81+
display: 'flex',
82+
flexDirection: 'column',
83+
alignItems: 'center',
84+
}}
85+
>
86+
<Avatar sx={{
87+
m: 1,
88+
backgroundImage:
89+
isDarkMode ?
90+
`linear-gradient(${gradientAngle}deg, #7b5caa, #CD7672)` :
91+
`linear-gradient(${gradientAngle}deg, #9dcbfc, white)`
8592
}}
8693
>
87-
<Avatar sx={{
88-
m: 1,
89-
backgroundImage:
90-
isDarkMode ?
91-
`linear-gradient(${gradientAngle}deg, #7b5caa, #CD7672)` :
92-
`linear-gradient(${gradientAngle}deg, #9dcbfc, white)`
93-
}}
94+
<LockOutlinedIcon />
95+
</Avatar>
96+
<Typography component="h1" variant="h5" sx={{ color: 'palette.text.primary'}}>
97+
Sign in
98+
</Typography>
99+
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
100+
<TextField
101+
margin="normal"
102+
required
103+
fullWidth
104+
id="email"
105+
label="Email Address"
106+
name="email"
107+
autoComplete="email"
108+
autoFocus
109+
/>
110+
<TextField
111+
margin="normal"
112+
required
113+
fullWidth
114+
name="password"
115+
label="Password"
116+
type="password"
117+
id="password"
118+
autoComplete="current-password"
119+
/>
120+
<FormControlLabel
121+
control={<Checkbox value="remember" sx={{color: 'palette.text.primary'}} />}
122+
label="Remember me"
123+
/>
124+
<Button
125+
type="submit"
126+
fullWidth
127+
variant="contained"
128+
sx={{ mt: 3, mb: 2 }}
94129
>
95-
<LockOutlinedIcon />
96-
</Avatar>
97-
<Typography component="h1" variant="h5" sx={{ color: 'palette.text.primary'}}>
98-
Sign in
99-
</Typography>
100-
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
101-
<TextField
102-
margin="normal"
103-
required
104-
fullWidth
105-
id="email"
106-
label="Email Address"
107-
name="email"
108-
autoComplete="email"
109-
autoFocus
110-
/>
111-
<TextField
112-
margin="normal"
113-
required
114-
fullWidth
115-
name="password"
116-
label="Password"
117-
type="password"
118-
id="password"
119-
autoComplete="current-password"
120-
/>
121-
<FormControlLabel
122-
control={<Checkbox value="remember" sx={{color: 'palette.text.primary'}} />}
123-
label="Remember me"
124-
/>
125-
<Button
126-
type="submit"
127-
fullWidth
128-
variant="contained"
129-
sx={{ mt: 3, mb: 2 }}
130-
>
131-
Sign In
132-
</Button>
133-
<Grid container>
134-
<Grid item xs>
135-
<Link href="#" variant="body2" sx={{ color: 'palette.text.primary'}}>
136-
Forgot password?
137-
</Link>
138-
</Grid>
139-
<Grid item>
140-
<Link href="#3" variant="body2" sx={{ color: 'palette.text.primary'}}>
141-
{"Don't have an account? Sign Up"}
142-
</Link>
143-
</Grid>
130+
Sign In
131+
</Button>
132+
<Grid container>
133+
<Grid item xs>
134+
<Link href="#" variant="body2" sx={{ color: 'palette.text.primary'}}>
135+
Forgot password?
136+
</Link>
144137
</Grid>
145-
</Box>
138+
<Grid item>
139+
<Link href="#3" variant="body2" sx={{ color: 'palette.text.primary'}}>
140+
{"Don't have an account? Sign Up"}
141+
</Link>
142+
</Grid>
143+
</Grid>
146144
</Box>
147-
<Copyright sx={{ mt: 8, mb: 4 }} isDarkMode={isDarkMode} />
148-
</Container>
149-
</ThemeProvider>
145+
</Box>
146+
<Copyright sx={{ mt: 8, mb: 4 }} isDarkMode={isDarkMode} />
147+
</Container>
150148
);
151149
}
152150

@@ -155,7 +153,7 @@ const style = {
155153
top: '50%',
156154
left: '50%',
157155
transform: 'translate(-50%, -50%)',
158-
bgcolor: 'background.paper',
156+
bgcolor: 'black',
159157
borderRadius: '16px',
160158
padding: '16px',
161159
};
@@ -165,7 +163,6 @@ export default function SignIn() {
165163
const [open, setOpen] = React.useState(false);
166164
const handleOpen = () => setOpen(true);
167165
const handleClose = () => setOpen(false);
168-
169166
// IMPORTANT TO-DO: When the handle submit functionality is implemented, make sure to change the variant type of this button to text instead of disabled
170167
// Again, only when sign in works via backend!
171168
return (
@@ -177,12 +174,13 @@ export default function SignIn() {
177174
open={open}
178175
onClose={handleClose}
179176
closeAfterTransition
180-
// slots={{ backdrop: Backdrop }}
181-
// slotProps={{
182-
// backdrop: {
183-
// timeout: 500,
184-
// },
185-
// }}
177+
style={{ backdropFilter: "blur(5px)" }}
178+
slots={{ backdrop: Backdrop }}
179+
slotProps={{
180+
backdrop: {
181+
timeout: 500,
182+
},
183+
}}
186184
>
187185
<Fade in={open}>
188186
<Box sx={style}>

‎src/pages/index.js

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -188,38 +188,6 @@ function HomepageFeatures() {
188188
);
189189
}
190190

191-
function MobileBottomNav() {
192-
const ref = React.useRef(null);
193-
const [value, setValue] = React.useState(0);
194-
const { colorMode } = useColorMode();
195-
const isDarkMode = colorMode === 'dark';
196-
197-
const handleChange = (event, newValue) => {
198-
setValue(newValue);
199-
}
200-
return (
201-
<Box sx={{ pb: 7 }} ref = {ref}>
202-
<Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} square={false} elevation={3}>
203-
<BottomNavigation
204-
showLabels
205-
value={value}
206-
onChange={handleChange}
207-
sx = {{
208-
bgcolor: isDarkMode ? 'black' : 'white',
209-
'& .MuiSvgIcon-root, & .MuiBottomNavigationAction-label': {
210-
color: isDarkMode ? 'white' : '#707070'
211-
}
212-
}}
213-
>
214-
<BottomNavigationAction label="Schedule" icon={<CalendarMonthOutlinedIcon/>} />
215-
<BottomNavigationAction label="Home" icon={<HomeOutlinedIcon/>}/>
216-
<BottomNavigationAction label="More" icon={<MoreHorizOutlinedIcon/>}/>
217-
</BottomNavigation>
218-
</Paper>
219-
</Box>
220-
)
221-
}
222-
223191
export default function Home() {
224192
const { siteConfig } = useDocusaurusContext();
225193
return (
@@ -232,7 +200,6 @@ export default function Home() {
232200
<ClubDetails />
233201
<HomepageFeatures />
234202
</main>
235-
{/* <MobileBottomNav /> */}
236203
</Layout>
237204
);
238205
}

‎src/theme/NavbarItem/ComponentTypes.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
22
import AccountButton from '@site/src/components/NavbarItems/AccountButton';
33

4-
54
export default {
65
...ComponentTypes,
76
'custom-accountButton': AccountButton,

0 commit comments

Comments
 (0)