diff options
Diffstat (limited to 'packages/renderer/src/components/sidebar/Sidebar.tsx')
-rw-r--r-- | packages/renderer/src/components/sidebar/Sidebar.tsx | 90 |
1 files changed, 48 insertions, 42 deletions
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx index fc57302..6c802ac 100644 --- a/packages/renderer/src/components/sidebar/Sidebar.tsx +++ b/packages/renderer/src/components/sidebar/Sidebar.tsx | |||
@@ -19,54 +19,60 @@ | |||
19 | */ | 19 | */ |
20 | 20 | ||
21 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import { styled } from '@mui/material/styles'; | ||
22 | import React from 'react'; | 23 | import React from 'react'; |
23 | 24 | ||
25 | import RendererStore from '../../stores/RendererStore'; | ||
26 | |||
24 | import ServiceSwitcher from './ServiceSwitcher'; | 27 | import ServiceSwitcher from './ServiceSwitcher'; |
25 | import ToggleDarkModeButton from './ToggleDarkModeButton'; | 28 | import ToggleDarkModeButton from './ToggleDarkModeButton'; |
26 | import ToggleLocationBarButton from './ToggleLocationBarButton'; | 29 | import ToggleLocationBarButton from './ToggleLocationBarButton'; |
27 | 30 | ||
28 | export default function Sidebar(): JSX.Element { | 31 | const SidebarRoot = styled(Box)(({ theme }) => ({ |
32 | flex: 0, | ||
33 | display: 'flex', | ||
34 | position: 'relative', | ||
35 | overflow: 'hidden', | ||
36 | flexDirection: 'column', | ||
37 | alignItems: 'center', | ||
38 | padding: `${theme.spacing(1)} 0`, | ||
39 | gap: theme.spacing(1), | ||
40 | backgroundColor: | ||
41 | theme.palette.mode === 'dark' | ||
42 | ? 'rgba(255, 255, 255, 0.09)' | ||
43 | : 'rgba(0, 0, 0, 0.06)', | ||
44 | minWidth: `calc(${theme.spacing(4)} + 36px)`, | ||
45 | '::after': { | ||
46 | content: '" "', | ||
47 | position: 'absolute', | ||
48 | top: '-20px', | ||
49 | bottom: '-20px', | ||
50 | right: '-20px', | ||
51 | zIndex: 100, | ||
52 | width: '20px', | ||
53 | boxShadow: theme.shadows[4], | ||
54 | }, | ||
55 | })); | ||
56 | |||
57 | const SidebarFill = styled(Box)({ | ||
58 | flex: 1, | ||
59 | display: 'flex', | ||
60 | flexDirection: 'column', | ||
61 | justifyContent: 'flex-start', | ||
62 | }); | ||
63 | |||
64 | export default function Sidebar({ | ||
65 | store, | ||
66 | }: { | ||
67 | store: RendererStore; | ||
68 | }): JSX.Element { | ||
29 | return ( | 69 | return ( |
30 | <Box | 70 | <SidebarRoot component="aside"> |
31 | component="aside" | 71 | <ToggleLocationBarButton store={store} /> |
32 | sx={(theme) => ({ | 72 | <SidebarFill> |
33 | flex: 0, | 73 | <ServiceSwitcher store={store} /> |
34 | display: 'flex', | 74 | </SidebarFill> |
35 | position: 'relative', | 75 | <ToggleDarkModeButton store={store} /> |
36 | overflow: 'hidden', | 76 | </SidebarRoot> |
37 | flexDirection: 'column', | ||
38 | alignItems: 'center', | ||
39 | paddingY: 1, | ||
40 | gap: 1, | ||
41 | backgroundColor: | ||
42 | theme.palette.mode === 'dark' | ||
43 | ? 'rgba(255, 255, 255, 0.09)' | ||
44 | : 'rgba(0, 0, 0, 0.06)', | ||
45 | minWidth: `calc(${theme.spacing(4)} + 36px)`, | ||
46 | '::after': { | ||
47 | content: '" "', | ||
48 | position: 'absolute', | ||
49 | top: '-20px', | ||
50 | bottom: '-20px', | ||
51 | right: '-20px', | ||
52 | zIndex: 100, | ||
53 | width: '20px', | ||
54 | boxShadow: theme.shadows[4], | ||
55 | }, | ||
56 | })} | ||
57 | > | ||
58 | <ToggleLocationBarButton /> | ||
59 | <Box | ||
60 | sx={{ | ||
61 | flex: 1, | ||
62 | display: 'flex', | ||
63 | flexDirection: 'column', | ||
64 | justifyContent: 'flex-start', | ||
65 | }} | ||
66 | > | ||
67 | <ServiceSwitcher /> | ||
68 | </Box> | ||
69 | <ToggleDarkModeButton /> | ||
70 | </Box> | ||
71 | ); | 77 | ); |
72 | } | 78 | } |