diff options
Diffstat (limited to 'packages/renderer/src/components/sidebar/Sidebar.tsx')
-rw-r--r-- | packages/renderer/src/components/sidebar/Sidebar.tsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx new file mode 100644 index 0000000..35b6f06 --- /dev/null +++ b/packages/renderer/src/components/sidebar/Sidebar.tsx | |||
@@ -0,0 +1,78 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2021-2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import Box from '@mui/material/Box'; | ||
22 | import { styled } from '@mui/material/styles'; | ||
23 | import React from 'react'; | ||
24 | |||
25 | import RendererStore from '../../stores/RendererStore.js'; | ||
26 | |||
27 | import ServiceSwitcher from './ServiceSwitcher.js'; | ||
28 | import ToggleDarkModeButton from './ToggleDarkModeButton.js'; | ||
29 | import ToggleLocationBarButton from './ToggleLocationBarButton.js'; | ||
30 | |||
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: 0, | ||
49 | bottom: 0, | ||
50 | right: 0, | ||
51 | width: 0, | ||
52 | zIndex: 100, | ||
53 | borderLeft: `1px solid ${theme.palette.divider}`, | ||
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 { | ||
69 | return ( | ||
70 | <SidebarRoot component="aside"> | ||
71 | <ToggleLocationBarButton store={store} /> | ||
72 | <SidebarFill> | ||
73 | <ServiceSwitcher store={store} /> | ||
74 | </SidebarFill> | ||
75 | <ToggleDarkModeButton store={store} /> | ||
76 | </SidebarRoot> | ||
77 | ); | ||
78 | } | ||