diff options
Diffstat (limited to 'packages/renderer/src/components/Sidebar.tsx')
-rw-r--r-- | packages/renderer/src/components/Sidebar.tsx | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx index 44a47b0..ed78fc6 100644 --- a/packages/renderer/src/components/Sidebar.tsx +++ b/packages/renderer/src/components/Sidebar.tsx | |||
@@ -19,23 +19,30 @@ | |||
19 | */ | 19 | */ |
20 | 20 | ||
21 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import { alpha } from '@mui/material/styles'; | ||
22 | import React from 'react'; | 23 | import React from 'react'; |
23 | 24 | ||
25 | import ServiceSwitcher from './ServiceSwitcher'; | ||
24 | import ToggleDarkModeButton from './ToggleDarkModeButton'; | 26 | import ToggleDarkModeButton from './ToggleDarkModeButton'; |
25 | 27 | ||
26 | export default function Sidebar(): JSX.Element { | 28 | export default function Sidebar(): JSX.Element { |
27 | return ( | 29 | return ( |
28 | <Box | 30 | <Box |
31 | component="aside" | ||
29 | sx={(theme) => ({ | 32 | sx={(theme) => ({ |
30 | background: theme.palette.divider, | ||
31 | flex: 0, | 33 | flex: 0, |
32 | display: 'flex', | 34 | display: 'flex', |
33 | flexDirection: 'column', | 35 | flexDirection: 'column', |
34 | alignItems: 'center', | 36 | alignItems: 'center', |
35 | justifyContent: 'flex-end', | 37 | justifyContent: 'space-between', |
36 | padding: 1, | 38 | paddingBottom: 1, |
39 | backgroundClip: 'padding-box', | ||
40 | background: alpha(theme.palette.text.primary, 0.09), | ||
41 | borderInlineEnd: `1px solid ${theme.palette.divider}`, | ||
42 | minWidth: 67, | ||
37 | })} | 43 | })} |
38 | > | 44 | > |
45 | <ServiceSwitcher /> | ||
39 | <ToggleDarkModeButton /> | 46 | <ToggleDarkModeButton /> |
40 | </Box> | 47 | </Box> |
41 | ); | 48 | ); |