Skip to content

Commit 9bb487f

Browse files
sunnyyuqingchensunny chenmark-trannlhvy
authored
Changed Sidebar behaviour and accomodated for mobile view (#996)
* Refactor sidebar appbar into formal drawer * fixed the sidebar toggle not adjusting cards issue * implemented fully collapsable sidebar for mobile breakpoint * fix too wide padding in mobile view * implemented mobile sidebar view that opens over main content * clean up code and added some comments * refactored code related to sidebar issue * Change left padding to right margin for content spacing * made mobile menu button less obtrusive * fix button hover transparency * Fix resizing bug with timetable and sidebar --------- Co-authored-by: sunny chen <[email protected]> Co-authored-by: Mark Tran <[email protected]> Co-authored-by: Lucas <[email protected]>
1 parent 18938c9 commit 9bb487f

File tree

7 files changed

+309
-215
lines changed

7 files changed

+309
-215
lines changed

‎client/src/App.tsx‎

Lines changed: 58 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import SubcomPromotion from './components/promotions/SubcomPromotion';
1717
import Timetable from './components/timetable/Timetable';
1818
import TimetableShared from './components/timetableShared.tsx/TimetableShared';
1919
import { TimetableTabs } from './components/timetableTabs/TimetableTabs';
20-
import { contentPadding, leftContentPadding, rightContentPadding, themes } from './constants/theme';
20+
import { contentPadding, rightContentPadding, themes } from './constants/theme';
2121
import {
2222
daysLong,
2323
getAvailableTermDetails,
@@ -56,10 +56,14 @@ const StyledApp = styled(Box)`
5656
height: 100%;
5757
`;
5858

59+
const Container = styled(Box)`
60+
display: flex;
61+
justify-content: center;
62+
`;
63+
5964
const ContentWrapper = styled(Box)`
6065
text-align: center;
6166
padding-top: ${contentPadding}px;
62-
padding-left: ${leftContentPadding}px;
6367
padding-right: ${rightContentPadding}px;
6468
transition:
6569
background 0.2s,
@@ -70,6 +74,7 @@ const ContentWrapper = styled(Box)`
7074
flex-direction: row-reverse;
7175
justify-content: center;
7276
color: ${({ theme }) => theme.palette.text.primary};
77+
overflow: hidden;
7378
`;
7479

7580
const Content = styled(Box)`
@@ -630,54 +635,57 @@ const App: React.FC = () => {
630635
<LocalizationProvider dateAdapter={AdapterDateFns}>
631636
<GlobalStyles styles={globalStyle} />
632637
<StyledApp>
633-
<Sidebar />
634-
<ContentWrapper>
635-
<Content>
636-
<Controls
637-
assignedColors={decodedAssignedColors}
638-
handleSelectClass={handleSelectClass}
639-
handleSelectCourse={handleSelectCourse}
640-
handleRemoveCourse={handleRemoveCourse}
641-
/>
642-
<Outlet />
643-
{groupsSidebarCollapsed ? (
644-
<>
645-
<TimetableTabs />
646-
<Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
647-
</>
648-
) : (
649-
<TimetableShared assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
650-
)}
651-
<ICSButton
652-
onClick={() => downloadIcsFile(selectedCourses, createdEvents, selectedClasses, firstDayOfTerm)}
653-
>
654-
save to calendar
655-
</ICSButton>
656-
<Sponsors />
657-
<Footer />
658-
<Alerts />
659-
<SubcomPromotion />
660-
<PromotionPopup
661-
imgSrc={T3SelectGif}
662-
title="Next term's timetable has been released! 🎉"
663-
subTitle="Organise, plan and schedule with newly released timetable"
664-
bullets={[
665-
{
666-
main: 'Auto-timetable feature',
667-
description: 'Automate process of manually scheduling tasks saving time and being more efficient',
668-
},
669-
{
670-
main: 'Live data feedback',
671-
description: 'Syncs with the current myUNSW class availabilities',
672-
},
673-
{
674-
main: 'Create personal events',
675-
description: 'Fully customisable and caters to your needs',
676-
},
677-
]}
678-
/>
679-
</Content>
680-
</ContentWrapper>
638+
<Container>
639+
<Sidebar />
640+
<ContentWrapper>
641+
<Content>
642+
<Controls
643+
assignedColors={decodedAssignedColors}
644+
handleSelectClass={handleSelectClass}
645+
handleSelectCourse={handleSelectCourse}
646+
handleRemoveCourse={handleRemoveCourse}
647+
/>
648+
<Outlet />
649+
{groupsSidebarCollapsed ? (
650+
<>
651+
<TimetableTabs />
652+
<Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
653+
</>
654+
) : (
655+
<TimetableShared assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
656+
)}
657+
<ICSButton
658+
onClick={() => downloadIcsFile(selectedCourses, createdEvents, selectedClasses, firstDayOfTerm)}
659+
>
660+
save to calendar
661+
</ICSButton>
662+
<Sponsors />
663+
<Footer />
664+
<Alerts />
665+
<SubcomPromotion />
666+
<PromotionPopup
667+
imgSrc={T3SelectGif}
668+
title="Next term's timetable has been released! 🎉"
669+
subTitle="Organise, plan and schedule with newly released timetable"
670+
bullets={[
671+
{
672+
main: 'Auto-timetable feature',
673+
description:
674+
'Automate process of manually scheduling tasks saving time and being more efficient',
675+
},
676+
{
677+
main: 'Live data feedback',
678+
description: 'Syncs with the current myUNSW class availabilities',
679+
},
680+
{
681+
main: 'Create personal events',
682+
description: 'Fully customisable and caters to your needs',
683+
},
684+
]}
685+
/>
686+
</Content>
687+
</ContentWrapper>
688+
</Container>
681689
</StyledApp>
682690
</LocalizationProvider>
683691
</ThemeProvider>

‎client/src/components/sidebar/DarkModeButton.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const ToggleDarkModeButton = styled(IconButton)`
1414
padding: 12px 12px 12px 12px;
1515
`;
1616

17-
const IndividualComponentTypography = styled(Typography)<{ collapsed: boolean }>`
17+
const IndividualComponentTypography = styled(Typography)`
1818
font-size: 16px;
1919
`;
2020

@@ -30,9 +30,9 @@ const DarkModeButton: React.FC<DarkModeButtonProps> = ({ collapsed }) => {
3030
<Tooltip title={collapsed ? (isDarkMode ? 'Light Mode' : 'Dark Mode') : ''} placement="right">
3131
<ToggleDarkModeButton color="inherit" onClick={toggleDarkMode}>
3232
{isDarkMode ? <LightModeIcon /> : <DarkModeIcon />}
33-
<IndividualComponentTypography collapsed={collapsed}>
34-
{collapsed ? '' : isDarkMode ? 'Change to Light Mode' : 'Change to Dark Mode'}
35-
</IndividualComponentTypography>
33+
{!collapsed && (
34+
<IndividualComponentTypography>{isDarkMode ? 'Light Mode' : 'Dark Mode'}</IndividualComponentTypography>
35+
)}
3636
</ToggleDarkModeButton>
3737
</Tooltip>
3838
</>

‎client/src/components/sidebar/MobileMenuButton.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import MenuIcon from '@mui/icons-material/Menu';
2+
import { Tooltip } from '@mui/material';
3+
import { styled } from '@mui/material/styles';
4+
5+
interface MobileMenuProps {
6+
onClick: () => void;
7+
toolTipTitle: string;
8+
}
9+
10+
const StyledMobileMenu = styled('button')(({ theme }) => ({
11+
position: 'fixed',
12+
top: 0,
13+
left: 0,
14+
zIndex: 1000,
15+
display: 'flex',
16+
height: 40,
17+
width: 40,
18+
alignItems: 'center',
19+
justifyContent: 'center',
20+
padding: theme.spacing(1.5),
21+
margin: 10,
22+
marginRight: 0,
23+
borderRadius: 8,
24+
cursor: 'pointer',
25+
transition: 'background-color 0.3s ease',
26+
color: theme.palette.text.primary,
27+
backgroundColor: theme.palette.background.paper,
28+
29+
'&:hover': {
30+
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.secondary.dark : theme.palette.secondary.light,
31+
},
32+
33+
boxShadow: `
34+
0 0 6px rgba(0, 0, 0, 0.10),
35+
0 0 20px rgba(0, 0, 0, 0.05),
36+
0 0 40px rgba(0, 0, 0, 0.025)
37+
`,
38+
}));
39+
40+
const MobileMenuButton: React.FC<MobileMenuProps> = ({ onClick, toolTipTitle }) => {
41+
return (
42+
<Tooltip title={toolTipTitle} placement="right">
43+
<StyledMobileMenu onClick={onClick}>
44+
<MenuIcon />
45+
</StyledMobileMenu>
46+
</Tooltip>
47+
);
48+
};
49+
50+
export default MobileMenuButton;

0 commit comments

Comments
 (0)