Merge pull request #62 from MuslimeKaya/main

The sidebar has been set as fixed.

Author: ArjinAlbay

src/components/layout/Sidebar.tsx

@@ -1,15 +1,13 @@
 'use client'
 
 import Link from 'next/link'
-import { usePathname,   useSearchParams } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { useSidebarState, useAuthStore, useStoreHydration, useActionItemsStore } from '@/stores'
-import { ChevronRight, Clock,  LogOut, MessageSquare, Sparkles, Star, Target, Zap, } from 'lucide-react'
+import { ChevronRight, Clock, LogOut, MessageSquare, Sparkles, Star, Target, Zap } from 'lucide-react'
 import { Badge } from '../ui/badge'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'
 
-
-
 export function Sidebar() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
@@ -23,8 +21,8 @@ export function Sidebar() {
   const { getCountByType, getTotalCount, loading } = useActionItemsStore()
 
   // Get current tab from URL params
-  const currentTab = searchParams.get('tab') || 'assigned'
-  const isDashboardPage = pathname.startsWith('/dashboard')
+  const currentTab = searchParams?.get('tab') || 'assigned'
+  const isDashboardPage = pathname ? pathname.startsWith('/dashboard') : false
 
   // Badge count helpers
   const getBadgeCount = (type: 'assigned' | 'mentions' | 'stale' | 'goodFirstIssues' | 'easyFixes') => getCountByType(type)
@@ -36,15 +34,19 @@ export function Sidebar() {
     return getBadgeCount(type)
   }
 
+  // Debug logs
+  console.log('Sidebar Debug:', { currentTab, pathname, isDashboardPage })
 
+  // Fixed logic - works for all tabs
+  const isQuickWinsTab = currentTab === 'good-first-issues' || currentTab === 'easy-fixes'
+  const isActionRequiredTab = ['assigned', 'mentions', 'stale'].includes(currentTab)
 
-  const isQuickWinsTab = currentTab === 'quick-wins' || currentTab === 'good-first-issues' || currentTab === 'easy-fixes'
-  const isActionRequiredTab = !isQuickWinsTab && isDashboardPage
-
+  console.log('Tab States:', { isQuickWinsTab, isActionRequiredTab })
 
   const handleLogout = () => {
-    logout() 
+    logout()
   }
+
   return (
     <>
       {/* Overlay for mobile */}
@@ -56,10 +58,11 @@ export function Sidebar() {
       )}
 
       <aside className={`
-        fixed top-0 left-0 h-screen w-80 bg-sidebar border-r border-sidebar-border z-50 transform transition-transform duration-300 ease-in-out
+        fixed top-0 left-0 h-screen bg-sidebar border-r border-sidebar-border z-50 transform transition-transform duration-300 ease-in-out
         ${isOpen ? 'translate-x-0' : '-translate-x-full'}
         lg:translate-x-0 lg:static lg:z-auto lg:h-screen
         flex flex-col
+        w-80 min-w-[20rem] max-w-[20rem]
       `}>
 
         {/* Header */}
@@ -76,15 +79,13 @@ export function Sidebar() {
           </button>
         </div>
 
-
         {/* Scrollable Content */}
         <div className="flex-1 overflow-y-auto">
-          {/* Navigation */}
           {/* Navigation Menu with Collapsible */}
           <div className="flex-1 overflow-y-auto p-4">
             <nav className="space-y-2">
               {/* Action Required - Active with Collapsible */}
-              <Collapsible defaultOpen={isActionRequiredTab}>
+              <Collapsible open={true} onOpenChange={() => { }}>
                 <CollapsibleTrigger asChild>
                   <Link href="/dashboard" className={`
                     flex items-center justify-between w-full px-3 py-2 rounded-lg transition-colors
@@ -102,12 +103,13 @@ export function Sidebar() {
                         </Badge>
                       )}
                     </div>
-                    <ChevronRight />
+                    <ChevronRight className={`w-4 h-4 transition-transform ${isActionRequiredTab ? 'rotate-90' : ''}`} />
                   </Link>
                 </CollapsibleTrigger>
 
-                {isDashboardPage && (
-                  <CollapsibleContent className="pl-8 space-y-1 mt-1">
+                {/* Action Required sub-items - Always show space */}
+                <CollapsibleContent className="pl-8 space-y-1 mt-1">
+                  <div className={`transition-opacity duration-200 ${!isDashboardPage ? 'opacity-50 pointer-events-none' : 'opacity-100'}`}>
                     <Link
                       href="/dashboard?tab=assigned"
                       className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded transition-colors
@@ -116,6 +118,7 @@ export function Sidebar() {
                           : 'text-gray-600 hover:text-blue-600 hover:bg-gray-50 dark:hover:bg-gray-800'
                         }`}
                     >
+
                       <Target className="w-4 h-4" />
                       Assigned
                       <Badge
@@ -159,11 +162,12 @@ export function Sidebar() {
                         {getBadgeContent('stale')}
                       </Badge>
                     </Link>
-                  </CollapsibleContent>
-                )}
+                  </div>
+                </CollapsibleContent>
               </Collapsible>
 
-              <Collapsible defaultOpen={isQuickWinsTab}>
+              {/* Quick Wins - Always available */}
+              <Collapsible open={true} onOpenChange={() => { }}>
                 <CollapsibleTrigger asChild>
                   <Link href="/dashboard?tab=good-first-issues" className={`
                     flex items-center justify-between w-full px-3 py-2 rounded-lg transition-colors
@@ -181,10 +185,11 @@ export function Sidebar() {
                         </Badge>
                       )}
                     </div>
-                    <ChevronRight className={`w-4 h-4 transition-transform ${currentTab === 'quick-wins' ? 'rotate-90' : ''}`} />
+                    <ChevronRight className={`w-4 h-4 transition-transform ${isQuickWinsTab ? 'rotate-90' : ''}`} />
                   </Link>
                 </CollapsibleTrigger>
 
+                {/* Quick Wins sub-items - Always show space */}
                 <CollapsibleContent className="pl-8 space-y-1 mt-1">
                   <Link
                     href="/dashboard?tab=good-first-issues"
@@ -284,9 +289,9 @@ export function SidebarToggle({ onClick }: { onClick: () => void }) {
       onClick={onClick}
       className="lg:hidden fixed top-4 left-4 z-50 bg-background p-2 rounded-lg shadow-lg border border-border hover:bg-accent transition-colors"
     >
-      <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
       </svg>
     </button>
   )
-}
+}