diff options
Diffstat (limited to 'packages/renderer/src/components/sidebar/Sidebar.tsx')
-rw-r--r-- | packages/renderer/src/components/sidebar/Sidebar.tsx | 16 |
1 files changed, 12 insertions, 4 deletions
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx index 4f27d68..6c2f219 100644 --- a/packages/renderer/src/components/sidebar/Sidebar.tsx +++ b/packages/renderer/src/components/sidebar/Sidebar.tsx | |||
@@ -32,18 +32,27 @@ export default function Sidebar(): JSX.Element { | |||
32 | sx={(theme) => ({ | 32 | sx={(theme) => ({ |
33 | flex: 0, | 33 | flex: 0, |
34 | display: 'flex', | 34 | display: 'flex', |
35 | position: 'relative', | ||
36 | overflow: 'hidden', | ||
35 | flexDirection: 'column', | 37 | flexDirection: 'column', |
36 | alignItems: 'center', | 38 | alignItems: 'center', |
37 | paddingY: 1, | 39 | paddingY: 1, |
38 | paddingInlineStart: '1px', | ||
39 | gap: 1, | 40 | gap: 1, |
40 | backgroundColor: | 41 | backgroundColor: |
41 | theme.palette.mode === 'dark' | 42 | theme.palette.mode === 'dark' |
42 | ? 'rgba(255, 255, 255, 0.09)' | 43 | ? 'rgba(255, 255, 255, 0.09)' |
43 | : 'rgba(0, 0, 0, 0.06)', | 44 | : 'rgba(0, 0, 0, 0.06)', |
44 | backgroundClip: 'padding-box', | ||
45 | borderInlineEnd: `1px solid ${theme.palette.divider}`, | ||
46 | minWidth: `calc(${theme.spacing(4)} + 36px)`, | 45 | minWidth: `calc(${theme.spacing(4)} + 36px)`, |
46 | '::after': { | ||
47 | content: '" "', | ||
48 | position: 'absolute', | ||
49 | top: '-20px', | ||
50 | bottom: '-20px', | ||
51 | [theme.direction === 'ltr' ? 'right' : 'left']: '-20px', | ||
52 | zIndex: 100, | ||
53 | width: '20px', | ||
54 | boxShadow: theme.shadows[4], | ||
55 | }, | ||
47 | })} | 56 | })} |
48 | > | 57 | > |
49 | <ToggleLocationBarButton /> | 58 | <ToggleLocationBarButton /> |
@@ -53,7 +62,6 @@ export default function Sidebar(): JSX.Element { | |||
53 | display: 'flex', | 62 | display: 'flex', |
54 | flexDirection: 'column', | 63 | flexDirection: 'column', |
55 | justifyContent: 'flex-start', | 64 | justifyContent: 'flex-start', |
56 | marginInlineStart: '-1px', | ||
57 | }} | 65 | }} |
58 | > | 66 | > |
59 | <ServiceSwitcher /> | 67 | <ServiceSwitcher /> |