fix: add shadow to sidebars

Mathis Pierron · Mathis Pierron · commit c8ea209e7c2f · 2023-09-01T11:04:09.000+01:00
diff --git a/src/application/components/SideBar.css b/src/application/components/SideBar.css
@@ -1,5 +1,5 @@
 .side-bar {
-  @apply flex select-none flex-col;
+  @apply z-sidebar flex select-none flex-col bg-side-bar-bg-primary;
 }
 
 .side-bar .icon {
diff --git a/src/application/sidebar/LeftSidePanelWrapper.tsx b/src/application/sidebar/LeftSidePanelWrapper.tsx
@@ -47,7 +47,10 @@ export function LeftSidePanelWrapper() {
     <>
       <SideBar
         activePane={primaryPaneCollapsed ? null : primaryPane}
-        className={cx({ 'border-r border-r-side-bar-border': !primaryPaneCollapsed })}
+        className={cx({
+          'border-r border-r-side-bar-border': !primaryPaneCollapsed,
+          'shadow-default': primaryPaneCollapsed,
+        })}
         footerItems={[
           // TODO: Implement Keybinds screen
           {
@@ -67,7 +70,13 @@ export function LeftSidePanelWrapper() {
         ]}
         onItemClick={handleSideBarClick}
       />
-      <Panel collapsible order={1} ref={leftPanelRef} onCollapse={(collapsed) => setPrimaryPaneCollapsed(collapsed)}>
+      <Panel
+        className="z-sidebar-panel shadow-default"
+        collapsible
+        order={1}
+        ref={leftPanelRef}
+        onCollapse={(collapsed) => setPrimaryPaneCollapsed(collapsed)}
+      >
         {primaryPane === 'Explorer' && <ExplorerPanel />}
         {primaryPane === 'References' && <ReferencesPanel />}
       </Panel>
diff --git a/src/application/sidebar/RightSidePanelWrapper.tsx b/src/application/sidebar/RightSidePanelWrapper.tsx
@@ -41,13 +41,22 @@ export function RightSidePanelWrapper() {
   return (
     <>
       <VerticalResizeHandle transparent />
-      <Panel collapsible order={3} ref={rightPanelRef} onCollapse={(collapsed) => setSecondaryPaneCollapsed(collapsed)}>
+      <Panel
+        className="z-sidebar-panel shadow-default"
+        collapsible
+        order={3}
+        ref={rightPanelRef}
+        onCollapse={(collapsed) => setSecondaryPaneCollapsed(collapsed)}
+      >
         {secondaryPane === 'Rewriter' && <RewriterPanel />}
         {secondaryPane === 'Chatbot' && <ChatbotPanel />}
       </Panel>
       <SideBar
         activePane={secondaryPaneCollapsed ? null : secondaryPane}
-        className={cx({ 'border-l border-l-side-bar-border': !secondaryPaneCollapsed })}
+        className={cx({
+          'border-l border-l-side-bar-border': !secondaryPaneCollapsed,
+          'shadow-default': secondaryPaneCollapsed,
+        })}
         items={[
           { pane: 'Rewriter', Icon: <PenIcon /> },
           { pane: 'Chatbot', Icon: <BotIcon /> },
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -191,6 +191,8 @@ export default {
         notifications: 88888,
         'drop-zone': 55555,
         'resize-handle': 44444,
+        sidebar: 11,
+        'sidebar-panel': 10,
       },
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.side-bar {`
`2`		`- @apply flex select-none flex-col;`
	`2`	`+ @apply z-sidebar flex select-none flex-col bg-side-bar-bg-primary;`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.side-bar .icon {`