add logo and version release information

frontend/src/components/Layout.tsx

@@ -12,13 +12,28 @@ import {
   Server,
   Users
 } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 export default function Layout() {
   const { user, clearAuth } = useAuthStore()
   const navigate = useNavigate()
   const location = useLocation()
-  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  // Set sidebar open by default on desktop, closed on mobile
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        setSidebarOpen(true)
+      } else {
+        setSidebarOpen(false)
+      }
+    }
+    
+    handleResize() // Set initial state
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
   const handleLogout = () => {
     clearAuth()
@@ -48,6 +63,14 @@ export default function Layout() {
 
   return (
     <div className="min-h-screen bg-background-dark">
+      {/* Mobile backdrop overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
       {/* Sidebar */}
       <div
         className={`fixed inset-y-0 left-0 z-50 w-64 bg-background-dark border-r border-border-dark text-white transition-transform duration-300 ${
@@ -57,11 +80,26 @@ export default function Layout() {
         <div className="flex flex-col h-full">
           {/* Header */}
           <div className="flex items-center justify-between px-6 py-5 border-b border-border-dark">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+            <div className="flex items-center gap-3">
+              <img 
+                src="/logo.png" 
+                alt="Calypso Logo" 
+                className="w-10 h-10 object-contain"
+                onError={(e) => {
+                  // Fallback to text if image not found
+                  const target = e.target as HTMLImageElement
+                  target.style.display = 'none'
+                  const fallback = target.nextElementSibling as HTMLElement
+                  if (fallback) fallback.style.display = 'flex'
+                }}
+              />
+              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center hidden">
                 <span className="text-white font-bold text-sm">C</span>
               </div>
-              <h1 className="text-xl font-black text-white font-display tracking-tight">Calypso</h1>
+              <div className="flex flex-col">
+                <h1 className="text-xl font-black text-white font-display tracking-tight">Calypso</h1>
+                <p className="text-[10px] text-text-secondary leading-tight">Dev Release V.1</p>
+              </div>
             </div>
             <button
               onClick={() => setSidebarOpen(false)}
@@ -116,7 +154,16 @@ export default function Layout() {
 
       {/* Main content */}
       <div className={`transition-all duration-300 ${sidebarOpen ? 'lg:ml-64' : 'ml-0'} bg-background-dark`}>
-        {/* Top bar - removed for dashboard design */}
+        {/* Top bar with burger menu button */}
+        <div className="sticky top-0 z-30 lg:hidden bg-background-dark border-b border-border-dark px-4 py-3">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="text-text-secondary hover:text-white transition-colors"
+            aria-label="Open menu"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+        </div>
         
         {/* Page content */}
         <main className="min-h-screen">