Merge pull request #6 from guardiafinance/fix/adjust-navbar-width

fix: make navbar wider due to expandable menu items

Author: garcia-victor-fin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardiafinance/design-system",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "exports": {
     ".": {
@@ -87,4 +87,4 @@
     "react-router": "^7.9.1",
     "zod": "^4.1.8"
   }
-}
+}

src/components/navbar/navbar.tsx

@@ -123,7 +123,7 @@ function NavbarInternal({
                     </div>
                 </SidebarHeader>
             </When>
-            <SidebarContent className="p-3 flex-1">
+            <SidebarContent className="flex-1">
                 <SidebarGroup>
                     <SidebarGroupContent>
                         <SidebarMenu>
@@ -227,9 +227,16 @@ function NavbarInternal({
                     </div>
                 </When>
                 <When condition={Boolean(settings.footer)}>
-                    <div className="mt-2 flex items-center justify-between px-2 text-[10px] text-brand-fgLight/70 truncate">
-                        {settings.footer?.version && <span className="truncate">{settings.footer.version}</span>}
-                        {settings.footer?.copyright && <span className="truncate">{settings.footer.copyright}</span>}
+                    <div className={`
+                        mt-2 flex px-2 text-[10px] text-brand-fgLight/70
+                        ${isCollapsed ? 'flex-col items-center gap-1 text-center' : 'items-center justify-between truncate'}
+                    `}>
+                        <When condition={Boolean(settings.footer?.version)}>
+                            <span className="truncate">{settings.footer?.version}</span>
+                        </When>
+                        <When condition={!isCollapsed && Boolean(settings.footer?.copyright)}>
+                            <span className="truncate">{settings.footer?.copyright}</span>
+                        </When>
                     </div>
                 </When>
             </SidebarFooter>

src/components/sidebar/index.tsx

@@ -24,9 +24,9 @@ import {
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "15rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "4rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContextProps = {