Skip to content

Commit 9827844

Browse files
justinnasjustinnas
committed
Made sidebar as an individual component
1 parent a917c2f commit 9827844

File tree

4 files changed

+126
-74
lines changed

4 files changed

+126
-74
lines changed

‎app/front-end/src/components/layouts/baseLayout.tsx

Lines changed: 12 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
1-
import { IconTitleButton } from '@/components/buttons/IconTitleButton';
21
import { SettingsDialog, ShortcutsDialog } from '@/components/dialogs';
2+
import { Sidebar } from '@/components/sidebar/sidebar';
33
import { Colors } from '@/types';
4-
import {
5-
AutoMode as AutoModeIcon,
6-
Home as HomeIcon,
7-
SettingsOutlined as SettingsOutlinedIcon,
8-
SwitchAccessShortcut as SwitchAccessShortcutIcon,
9-
} from '@mui/icons-material';
104
import { Box, Typography, useTheme } from '@mui/material';
115
import { useState } from 'react';
126

@@ -33,12 +27,12 @@ interface Props {
3327
export const BaseLayout: React.FC<Props> = ({ children }) => {
3428
const Theme = useTheme();
3529

36-
const [isShortcutsMenuOpen, setIsShortcutsMenuOpen] = useState(false);
37-
const handleShortcutsMenuOpen = () => {
38-
setIsShortcutsMenuOpen(true);
30+
const [isShortcutsDialogOpen, setIsShortcutsDialogOpen] = useState(false);
31+
const handleShortcutsDialogOpen = () => {
32+
setIsShortcutsDialogOpen(true);
3933
};
40-
const handleShortcutsMenuClose = () => {
41-
setIsShortcutsMenuOpen(false);
34+
const handleShortcutsDialogClose = () => {
35+
setIsShortcutsDialogOpen(false);
4236
};
4337

4438
const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
@@ -115,56 +109,11 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
115109
flexDirection: 'row',
116110
}}
117111
>
118-
<Box sx={{ width: '5vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
119-
<Box
120-
sx={{
121-
width: '100%',
122-
height: '50%',
123-
paddingTop: '0.625rem',
124-
display: 'flex',
125-
flexDirection: 'column',
126-
gap: '0.625rem',
127-
alignItems: 'center',
128-
}}
129-
>
130-
<IconTitleButton
131-
icon={<HomeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
132-
title={'Home'}
133-
/>
134-
<IconTitleButton
135-
icon={<AutoModeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
136-
title={'Macros'}
137-
/>
138-
</Box>
139-
<Box
140-
sx={{
141-
width: '100%',
142-
height: '50%',
143-
paddingBottom: '0.625rem',
144-
display: 'flex',
145-
flexDirection: 'column-reverse',
146-
gap: '0.625rem',
147-
alignItems: 'center',
148-
}}
149-
>
150-
<IconTitleButton
151-
icon={
152-
<SettingsOutlinedIcon
153-
sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
154-
/>
155-
}
156-
onClick={handleSettingsDialogOpen}
157-
/>
158-
<IconTitleButton
159-
icon={
160-
<SwitchAccessShortcutIcon
161-
sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
162-
/>
163-
}
164-
onClick={handleShortcutsMenuOpen}
165-
/>
166-
</Box>
167-
</Box>
112+
<Sidebar
113+
handleSettingsDialogOpen={handleSettingsDialogOpen}
114+
handleShortcutsDialogOpen={handleShortcutsDialogOpen}
115+
/>
116+
168117
<Box
169118
sx={{
170119
width: '95.75%',
@@ -176,7 +125,7 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
176125
{children}
177126
</Box>
178127
<SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />
179-
<ShortcutsDialog open={isShortcutsMenuOpen} onClose={handleShortcutsMenuClose} />
128+
<ShortcutsDialog open={isShortcutsDialogOpen} onClose={handleShortcutsDialogClose} />
180129
</Box>
181130
</Box>
182131
);

‎app/front-end/src/components/sidebar/sidebar.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { IconTitleButton } from '@/components/buttons/IconTitleButton';
2+
import { Colors } from '@/types';
3+
import {
4+
AutoMode as AutoModeIcon,
5+
Home as HomeIcon,
6+
SettingsOutlined as SettingsOutlinedIcon,
7+
SwitchAccessShortcut as SwitchAccessShortcutIcon,
8+
} from '@mui/icons-material';
9+
import { Box } from '@mui/material';
10+
11+
interface SidebarProps {
12+
handleSettingsDialogOpen: () => void;
13+
handleShortcutsDialogOpen: () => void;
14+
}
15+
16+
export const Sidebar: React.FC<SidebarProps> = ({ handleSettingsDialogOpen, handleShortcutsDialogOpen }) => {
17+
return (
18+
<Box sx={{ width: '5vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
19+
<Box
20+
sx={{
21+
width: '100%',
22+
height: '50%',
23+
paddingTop: '0.625rem',
24+
display: 'flex',
25+
flexDirection: 'column',
26+
gap: '0.625rem',
27+
alignItems: 'center',
28+
}}
29+
>
30+
<IconTitleButton
31+
icon={
32+
<HomeIcon
33+
sx={{
34+
width: '1.5rem',
35+
height: '1.5rem',
36+
color: Colors.backgroundPrimaryLight,
37+
}}
38+
/>
39+
}
40+
title={'Home'}
41+
/>
42+
<IconTitleButton
43+
icon={
44+
<AutoModeIcon
45+
sx={{
46+
width: '1.5rem',
47+
height: '1.5rem',
48+
color: Colors.backgroundPrimaryLight,
49+
}}
50+
/>
51+
}
52+
title={'Macros'}
53+
/>
54+
</Box>
55+
<Box
56+
sx={{
57+
width: '100%',
58+
height: '50%',
59+
paddingBottom: '0.625rem',
60+
display: 'flex',
61+
flexDirection: 'column-reverse',
62+
gap: '0.625rem',
63+
alignItems: 'center',
64+
}}
65+
>
66+
<IconTitleButton
67+
icon={
68+
<SettingsOutlinedIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />
69+
}
70+
onClick={handleSettingsDialogOpen}
71+
/>
72+
<IconTitleButton
73+
icon={
74+
<SwitchAccessShortcutIcon
75+
sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
76+
/>
77+
}
78+
onClick={handleShortcutsDialogOpen}
79+
/>
80+
</Box>
81+
</Box>
82+
);
83+
};

‎app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
1-
import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material';
1+
import { Deblur as DeblurIcon } from '@mui/icons-material';
22

33
import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
44

55
// Define the onClick functions for group 3
6-
const handleAlarm3Click = () => {
7-
console.log('Clicked Alarm3 Button!');
6+
const applySpliceAiClick = () => {
7+
console.log('Clicked Apply SpliceAI Button!');
8+
};
9+
10+
const applyCaddClick = () => {
11+
console.log('Clicked Apply CADD Button!');
812
};
913

1014
// Define the buttons for group 3
1115
export const ApplyGroupButtons: ToolbarGroupItemProps[] = [
1216
{
1317
group: 'apply',
14-
icon: AccessAlarmsIcon,
15-
label: 'Alarm3',
16-
onClick: handleAlarm3Click,
18+
icon: DeblurIcon,
19+
label: 'Apply SpliceAI',
20+
onClick: applySpliceAiClick,
21+
},
22+
{
23+
group: 'apply',
24+
icon: DeblurIcon,
25+
label: 'Apply CADD',
26+
onClick: applyCaddClick,
1727
},
1828
];

‎app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
1-
import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material';
1+
import { MergeType as MergeTypeIcon } from '@mui/icons-material';
22

33
import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
44

55
// Define the onClick functions for group 2
6-
const handleAlarm2Click = () => {
7-
console.log('Clicked Alarm2 Button!');
6+
const mergeLovdAndGnomadClick = () => {
7+
console.log('Clicked Merge LOVD & gnomAD Button!');
8+
};
9+
10+
const mergeLovdAndClinvarClick = () => {
11+
console.log('Clicked Merge LOVD & ClinVar Button!');
812
};
913

1014
// Define the buttons for group 2
1115
export const MergeGroupButtons: ToolbarGroupItemProps[] = [
1216
{
1317
group: 'merge',
14-
icon: AccessAlarmsIcon,
18+
icon: MergeTypeIcon,
1519
label: 'Merge LOVD & gnomAD',
16-
onClick: handleAlarm2Click,
20+
onClick: mergeLovdAndGnomadClick,
21+
},
22+
{
23+
group: 'merge',
24+
icon: MergeTypeIcon,
25+
label: 'Merge LOVD & ClinVar',
26+
onClick: mergeLovdAndClinvarClick,
1727
},
1828
];

0 commit comments

Comments
 (0)