feat: added active tab highlighting

Author: wonnom

frontend/components/TopBar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect } from 'react'
-import { User, ChevronDown, LogOut, Moon, Sun, AlertTriangle, Calculator, TrendingUp, FolderUp, GitCompare, Edit } from 'lucide-react'
+import { User, ChevronDown, LogOut, Moon, Sun, AlertTriangle, Calculator, TrendingUp, FolderUp, GitCompare, Edit, Menu } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -58,32 +58,48 @@ export default function TopBar({ sidebarOpen, onToggleSidebar, activeTab, onTabC
     {
       title: "Calculate Tariff",
       icon: <Calculator className="h-full w-full" />,
-      onClick: () => navigateToBaseAndChangeTab("calculate")
+      onClick: () => navigateToBaseAndChangeTab("calculate"),
+      isActive: pathname === '/' && activeTab === 'calculate'
     },
     // Admin-only: Manage Chatbot Documents tab
     ...(isAdmin() ? [{
       title: "Manage Chatbot Documents",
       icon: <FolderUp className="h-full w-full" />,
-      onClick: () => navigateToBaseAndChangeTab("manage-docs")
+      onClick: () => navigateToBaseAndChangeTab("manage-docs"),
+      isActive: pathname === '/' && activeTab === 'manage-docs'
     }] : []),
     // Admin-only: Tariff Management
     ...(isAdmin() ? [{
       title: "Tariff Management",
       icon: <Edit className="h-full w-full" />,
-      onClick: () => router.push('/edit')
+      onClick: () => router.push('/edit'),
+      isActive: pathname === '/edit'
     }] : []),
     {
       title: "Results",
       icon: <TrendingUp className="h-full w-full" />,
-      onClick: () => router.push('/compare')
+      onClick: () => router.push('/compare'),
+      isActive: pathname === '/compare'
     },
   ]
 
   return (
     <>
       <header className="h-20 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 flex items-center justify-center px-6 relative">
-        {/* Left side - Empty spacer for balance */}
-        <div className="absolute left-6 w-64"></div>
+        {/* Left side - Logo and Burger Menu */}
+        <div className="absolute left-6 flex items-center gap-3">
+          {/* Burger Menu Button - Only show when sidebar is closed */}
+          {!sidebarOpen && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onToggleSidebar}
+              className="text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700"
+            >
+              <Menu className="h-5 w-5" />
+            </Button>
+          )}
+        </div>
 
         {/* Center - Floating Dock Navigation */}
         <div className="flex justify-center">

frontend/components/ui/floating-dock.tsx

@@ -18,7 +18,7 @@ export const FloatingDock = ({
   desktopClassName,
   mobileClassName,
 }: {
-  items: { title: string; icon: React.ReactNode; href?: string; onClick?: () => void }[]
+  items: { title: string; icon: React.ReactNode; href?: string; onClick?: () => void; isActive?: boolean }[]
   desktopClassName?: string
   mobileClassName?: string
 }) => {
@@ -34,7 +34,7 @@ const FloatingDockMobile = ({
   items,
   className,
 }: {
-  items: { title: string; icon: React.ReactNode; href?: string; onClick?: () => void }[]
+  items: { title: string; icon: React.ReactNode; href?: string; onClick?: () => void; isActive?: boolean }[]
   className?: string
 }) => {
   const [open, setOpen] = useState(false)
@@ -107,7 +107,7 @@ const FloatingDockDesktop = ({
   items,
   className,
 }: {
-  items: { title: string; icon: React.ReactNode; href?: string; onClick?: () => void }[]
+  items: { title: string; icon: React.ReactNode; href?: string; onClick?: () => void; isActive?: boolean }[]
   className?: string
 }) => {
   const mouseX = useMotionValue(Infinity)
@@ -133,12 +133,14 @@ function IconContainer({
   icon,
   href,
   onClick,
+  isActive,
 }: {
   mouseX: MotionValue
   title: string
   icon: React.ReactNode
   href?: string
   onClick?: () => void
+  isActive?: boolean
 }) {
   const ref = useRef<HTMLDivElement>(null)
 
@@ -164,11 +166,21 @@ function IconContainer({
         style={{ scale }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
-        className="flex items-center gap-2 px-3 py-2 rounded-xl bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer transition-colors relative"
+        className={cn(
+          "flex items-center gap-2 px-3 py-2 rounded-xl cursor-pointer transition-colors relative",
+          isActive 
+            ? "bg-blue-100 dark:bg-blue-900/30 border-2 border-blue-500 dark:border-blue-400" 
+            : "bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700"
+        )}
         onClick={onClick}
       >
         <div className="h-5 w-5 flex-shrink-0">{icon}</div>
-        <span className="text-sm font-medium text-slate-700 dark:text-slate-200 whitespace-nowrap">
+        <span className={cn(
+          "text-sm font-medium whitespace-nowrap",
+          isActive 
+            ? "text-blue-700 dark:text-blue-300 font-semibold" 
+            : "text-slate-700 dark:text-slate-200"
+        )}>
           {title}
         </span>
       </motion.div>
@@ -182,10 +194,20 @@ function IconContainer({
         style={{ scale }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
-        className="flex items-center gap-2 px-3 py-2 rounded-xl bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors relative"
+        className={cn(
+          "flex items-center gap-2 px-3 py-2 rounded-xl transition-colors relative",
+          isActive 
+            ? "bg-blue-100 dark:bg-blue-900/30 border-2 border-blue-500 dark:border-blue-400" 
+            : "bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700"
+        )}
       >
         <div className="h-5 w-5 flex-shrink-0">{icon}</div>
-        <span className="text-sm font-medium text-slate-700 dark:text-slate-200 whitespace-nowrap">
+        <span className={cn(
+          "text-sm font-medium whitespace-nowrap",
+          isActive 
+            ? "text-blue-700 dark:text-blue-300 font-semibold" 
+            : "text-slate-700 dark:text-slate-200"
+        )}>
           {title}
         </span>
       </motion.div>