design: Inset sidebar

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

6 files changed, 19 insertions, 8 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index cf97074..8fab77d 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -44,6 +44,7 @@ export default function App(): JSX.Element {
           flexDirection: 'column',
           alignItems: 'stretch',
           height: '100%',
+          zIndex: 100,
         }}
       >
         <LocationBar />
diff --git a/packages/renderer/src/components/locationBar/GoButton.tsx b/packages/renderer/src/components/locationBar/GoButton.tsx
index 32f715e..471f25e 100644
--- a/packages/renderer/src/components/locationBar/GoButton.tsx
+++ b/packages/renderer/src/components/locationBar/GoButton.tsx
@@ -38,6 +38,7 @@ export default function GoButton({
         color="inherit"
         onClick={onClick}
         sx={{
+          color: 'text.primary',
           minWidth: '32px',
           height: '32px',
           paddingX: '6px',
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx
index 8b079f0..0debaab 100644
--- a/packages/renderer/src/components/locationBar/LocationBar.tsx
+++ b/packages/renderer/src/components/locationBar/LocationBar.tsx
@@ -36,8 +36,6 @@ const LocationBarRoot = styled('header', {
   display: hidden ? 'none' : 'flex',
   flexDirection: 'row',
   padding: theme.spacing(1),
-  // Align the bottom border with the service switcher in the sidebar.
-  paddingBottom: `calc(${theme.spacing(1)} - 1px)`,
   gap: theme.spacing(1),
   borderBottom: `1px solid ${theme.palette.divider}`,
 }));
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 5db8a0c..fe047cf 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -52,6 +52,10 @@ const ServiceIconBadge = styled(Badge, {
   name: 'ServiceIcon',
   slot: 'Badge',
 })(({ theme }) => ({
+  '.MuiBadge-badge': {
+    // Place badge above the sidebar inner shadow.
+    zIndex: 200,
+  },
   '.MuiBadge-dot': {
     background:
       theme.palette.mode === 'dark'
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index eba21b5..404149b 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -51,8 +51,7 @@ const ServiceSwitcherTab = styled(Tab, {
   slot: 'Tab',
 })(({ theme }) => ({
   minWidth: 0,
-  paddingInlineStart: theme.spacing(2),
-  paddingInlineEnd: `calc(${theme.spacing(2)} - 1px)`,
+  paddingInline: theme.spacing(2),
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest,
   }),
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 />