chore: externalize hook useSidebar

src/components/Navbar.tsx

@@ -11,8 +11,8 @@ import { authStore } from '@/store/authStore'
 import { jmSessionStore } from '@/store/jmSessionStore'
 import type { AmountSats } from '@/types/global'
 import { DevBadge } from './dev/DevBadge'
-import { useSidebar } from './ui/sidebar'
 import { Skeleton } from './ui/skeleton'
+import { useSidebar } from './ui/use-sidebar'
 
 interface NavbarProps {
   isLoading?: boolean
@@ -22,7 +22,7 @@ interface NavbarProps {
   theme: string
   toggleTheme: () => void
   formatAmount: (AmountSats: number) => string
-  sidebarTrigger: React.ReactNode
+  sidebarTrigger?: React.ReactNode
 }
 
 const WithActivityIndicator = ({ active, children }: PropsWithChildren<{ active: boolean }>) => {
@@ -104,7 +104,9 @@ export function Navbar({
 }: NavbarProps) {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const sidebar = useSidebar()
+
+  const { isMobile, open, openMobile } = useSidebar()
+  const isSidebarOpen = isMobile ? openMobile : open
   const jmSessionState = useStore(jmSessionStore, (state) => state.state)
   const { clear: clearAuth } = useStore(authStore, (state) => state)
 
@@ -135,9 +137,13 @@ export function Navbar({
         currencySymbol={currencySymbol}
       />
       <div
-        className={cn('hidden min-w-0 flex-1 items-center justify-center gap-8 font-semibold md:flex lg:gap-10', {
-          'hidden!': sidebar.isMobile ? sidebar.openMobile : sidebar.open,
-        })}
+        className={cn(
+          'hidden min-w-0 flex-1 items-center justify-center text-sm font-semibold md:gap-6 lg:gap-12 lg:text-base',
+          {
+            'md:flex': !isSidebarOpen,
+            'lg:flex': isSidebarOpen,
+          },
+        )}
       >
         <Link to={routes.receive} className="text-muted-foreground hover:text-foreground">
           {t('navbar.tab_receive')}

src/components/layout/AppSidebar.tsx

@@ -27,8 +27,8 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-  useSidebar,
 } from '@/components/ui/sidebar'
+import { useSidebar } from '@/components/ui/use-sidebar'
 import { routes } from '@/constants/routes'
 import { useFeatures } from '@/hooks/useFeatures'
 
@@ -80,15 +80,15 @@ export function AppSidebar({ side }: Pick<React.ComponentProps<typeof Sidebar>,
         url: routes.rescan,
         icon: PackageSearchIcon,
       },
-      ...(isLogsEnabled
-        ? [
+      ...(!isLogsEnabled
+        ? []
+        : [
             {
               title: /*TODO: i18n t('sidebar.item_settings.label')*/ t('settings.show_logs'),
               url: routes.logs,
               icon: LogsIcon,
             },
-          ]
-        : []),
+          ]),
     ],
     [t, isLogsEnabled],
   )

src/components/ui/sidebar.tsx

@@ -13,6 +13,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useIsMobile } from '@/hooks/use-mobile'
 import { cn } from '@/lib/utils'
+import { SidebarContext, useSidebar, type SidebarContextProps } from './use-sidebar'
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -21,27 +22,6 @@ const SIDEBAR_WIDTH_MOBILE = '18rem'
 const SIDEBAR_WIDTH_ICON = '3rem'
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
-type SidebarContextProps = {
-  state: 'expanded' | 'collapsed'
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider.')
-  }
-
-  return context
-}
-
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -688,5 +668,4 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
-  useSidebar,
 }

src/components/ui/use-sidebar.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+
+export type SidebarContextProps = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+export const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+export function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
+}