@prmichaelsen/acp-visualizer 0.9.4 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/Sidebar.tsx

@@ -26,7 +26,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
   const location = useRouterState({ select: (s) => s.location })
 
   return (
-    <nav className="w-56 h-full border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0">
+    <nav className="w-full lg:w-56 h-auto max-h-[80vh] lg:h-full border-t lg:border-t-0 lg:border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0 rounded-t-2xl lg:rounded-none overflow-hidden">
       <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
         <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide">
           ACP Visualizer
@@ -50,7 +50,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
           />
         </div>
       )}
-      <div className="flex-1 py-2">
+      <div className="flex-1 py-2 overflow-y-auto">
         {navItems.map((item) => {
           const isActive =
             item.to === '/'
@@ -66,6 +66,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
                   ? 'text-gray-900 dark:text-gray-100 bg-gray-200 dark:bg-gray-800/50'
                   : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-800/30'
               }`}
+              onClick={onClose}
             >
               <item.icon className="w-4 h-4" />
               {item.label}
@@ -77,6 +78,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
         <Link
           to="/search"
           className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-500 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-800 rounded-md hover:text-gray-900 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
+          onClick={onClose}
         >
           <Search className="w-4 h-4" />
           Search...

package/src/routes/__root.tsx

@@ -161,11 +161,15 @@ function RootLayout() {
       <div className="flex h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
         {/* Mobile Menu Button - Bottom Right (Thumb Zone) */}
         <button
-          onClick={() => setMobileMenuOpen(true)}
-          className="lg:hidden fixed bottom-6 right-6 z-50 p-3 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg"
-          aria-label="Open menu"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          className="lg:hidden fixed bottom-6 right-6 z-50 p-3 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg transition-transform duration-200"
+          aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
         >
-          <Menu className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          {mobileMenuOpen ? (
+            <X className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          ) : (
+            <Menu className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          )}
         </button>
 
         {/* Mobile Backdrop */}
@@ -176,10 +180,10 @@ function RootLayout() {
           />
         )}
 
-        {/* Sidebar - Desktop: Always visible | Mobile: Drawer */}
+        {/* Sidebar - Desktop: Always visible | Mobile: Bottom Drawer */}
         <div
-          className={`fixed lg:relative inset-y-0 left-0 z-50 transition-transform duration-300 lg:translate-x-0 ${
-            mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+          className={`fixed lg:relative bottom-0 left-0 right-0 lg:inset-y-0 lg:right-auto z-50 transition-transform duration-300 lg:translate-y-0 ${
+            mobileMenuOpen ? 'translate-y-0' : 'translate-y-full'
           }`}
         >
           <Sidebar