refactor: control sidebar width via tailwind config (#1774)

refactor: extract sidebar width

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

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>

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"

src/renderer/components/__snapshots__/Sidebar.test.tsx.snap

@@ -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)',