design: Inset sidebar

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

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 {
       sx={(theme) => ({
         flex: 0,
         display: 'flex',
+        position: 'relative',
+        overflow: 'hidden',
         flexDirection: 'column',
         alignItems: 'center',
         paddingY: 1,
-        paddingInlineStart: '1px',
         gap: 1,
         backgroundColor:
           theme.palette.mode === 'dark'
             ? 'rgba(255, 255, 255, 0.09)'
             : 'rgba(0, 0, 0, 0.06)',
-        backgroundClip: 'padding-box',
-        borderInlineEnd: `1px solid ${theme.palette.divider}`,
         minWidth: `calc(${theme.spacing(4)} + 36px)`,
+        '::after': {
+          content: '" "',
+          position: 'absolute',
+          top: '-20px',
+          bottom: '-20px',
+          [theme.direction === 'ltr' ? 'right' : 'left']: '-20px',
+          zIndex: 100,
+          width: '20px',
+          boxShadow: theme.shadows[4],
+        },
       })}
     >
       <ToggleLocationBarButton />
@@ -53,7 +62,6 @@ export default function Sidebar(): JSX.Element {
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'flex-start',
-          marginInlineStart: '-1px',
         }}
       >
         <ServiceSwitcher />