From 1b2ba9bf7a22e62261a661a93cb50cfcc6b123fb Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 24 Jan 2025 12:39:11 -0500
Subject: [PATCH] refactor: extract sidebar width

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/App.tsx                                      | 2 +-
 src/renderer/components/Sidebar.tsx                       | 2 +-
 .../components/__snapshots__/Sidebar.test.tsx.snap        | 8 ++++----
 tailwind.config.ts                                        | 8 ++++++++
 4 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index c1e6cadf2..cc4bdee3a 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -47,7 +47,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <div className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-10 bg-gitify-background">
+            <div className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
               <Loading />
               <Sidebar />
               <Routes>
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index 0b0616dee..df5a63a66 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -74,7 +74,7 @@ export const Sidebar: FC = () => {
     <Stack
       direction="vertical"
       justify="space-between"
-      className="fixed left-10 -ml-10 w-10 h-full bg-gitify-sidebar text-white"
+      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
     >
       <Stack
         direction="vertical"
diff --git a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
index e0e2e9fe8..3ab886fc3 100644
--- a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-10 -ml-10 w-10 h-full bg-gitify-sidebar text-white"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
         data-align="stretch"
         data-direction="vertical"
         data-justify="space-between"
@@ -323,7 +323,7 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-10 -ml-10 w-10 h-full bg-gitify-sidebar text-white"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
       data-align="stretch"
       data-direction="vertical"
       data-justify="space-between"
@@ -633,7 +633,7 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-10 -ml-10 w-10 h-full bg-gitify-sidebar text-white"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
         data-align="stretch"
         data-direction="vertical"
         data-justify="space-between"
@@ -886,7 +886,7 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-10 -ml-10 w-10 h-full bg-gitify-sidebar text-white"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
       data-align="stretch"
       data-direction="vertical"
       data-justify="space-between"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4d2206460..32c091d19 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,8 @@
 import type { Config } from 'tailwindcss';
 import colors from 'tailwindcss/colors';
 
+const sidebarWidth = '2.5rem'; // 40px
+
 const config: Config = {
   content: ['./src/**/*.js', './src/**/*.ts', './src/**/*.tsx'],
   darkMode: 'class',
@@ -9,6 +11,12 @@ const config: Config = {
       fontSize: {
         xxs: '0.625rem', // 10px
       },
+      spacing: {
+        sidebar: sidebarWidth,
+      },
+      width: {
+        sidebar: sidebarWidth,
+      },
       colors: {
         gitify: {
           font: 'var(--fgColor-default)',
