feat(web): responsive mobile UI with hamburger menu #1180
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,107 @@ | ||
| import { useState } from 'react'; | ||
| import { Outlet, NavLink } from 'react-router'; | ||
| import { MessageSquare, LayoutDashboard, Workflow, Settings, X } from 'lucide-react'; | ||
| import { TopNav } from './TopNav'; | ||
| import { MobileNavContext } from '@/contexts/MobileNavContext'; | ||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| const navItems = [ | ||
| { to: '/chat', end: false, icon: MessageSquare, label: 'Chat' }, | ||
| { to: '/dashboard', end: true, icon: LayoutDashboard, label: 'Dashboard' }, | ||
| { to: '/workflows', end: false, icon: Workflow, label: 'Workflows' }, | ||
| ] as const; | ||
|
|
||
| export function Layout(): React.ReactElement { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <MobileNavContext.Provider value={{ open, setOpen }}> | ||
| <div className="flex h-screen flex-col bg-background"> | ||
| <TopNav /> | ||
|
|
||
| {/* ── Mobile nav overlay backdrop ── */} | ||
| {open && ( | ||
| <div | ||
| className="fixed inset-0 z-40 bg-black/60 md:hidden" | ||
| onClick={() => { setOpen(false); }} | ||
| aria-hidden="true" | ||
| /> | ||
| )} | ||
|
|
||
| {/* ── Mobile nav drawer ── */} | ||
| <aside | ||
| className={cn( | ||
| 'fixed inset-y-0 left-0 z-50 flex w-72 flex-col bg-surface border-r border-border shadow-2xl', | ||
| 'transition-transform duration-300 ease-in-out', | ||
| 'md:hidden', | ||
| open ? 'translate-x-0' : '-translate-x-full' | ||
| )} | ||
| aria-label="Navigation mobile" | ||
| > | ||
| {/* Drawer header */} | ||
| <div className="flex items-center justify-between px-4 py-3 border-b border-border"> | ||
| <div className="flex items-center gap-2"> | ||
| <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary"> | ||
| <span className="text-sm font-semibold text-primary-foreground">A</span> | ||
| </div> | ||
| <span className="text-sm font-semibold text-text-primary">Archon</span> | ||
| </div> | ||
| <button | ||
| onClick={() => { setOpen(false); }} | ||
| className="flex items-center justify-center rounded-md p-1.5 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors" | ||
| aria-label="Fermer le menu" | ||
| > | ||
| <X className="h-4 w-4" /> | ||
| </button> | ||
|
coderabbitai[bot] marked this conversation as resolved.
Outdated
|
||
| </div> | ||
|
|
||
| {/* Navigation links */} | ||
| <nav className="flex-1 overflow-y-auto p-2 pt-3"> | ||
| {navItems.map(({ to, end, icon: Icon, label }) => ( | ||
| <NavLink | ||
| key={to} | ||
| to={to} | ||
| end={end} | ||
| onClick={() => { setOpen(false); }} | ||
| className={({ isActive }: { isActive: boolean }): string => | ||
| cn( | ||
| 'flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors mb-0.5', | ||
| isActive | ||
| ? 'bg-accent text-primary' | ||
| : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary' | ||
| ) | ||
| } | ||
| > | ||
| <Icon className="h-4 w-4 shrink-0" /> | ||
| {label} | ||
| </NavLink> | ||
| ))} | ||
| </nav> | ||
|
|
||
| {/* Settings — pinned at bottom */} | ||
| <div className="p-2 border-t border-border"> | ||
| <NavLink | ||
| to="/settings" | ||
| onClick={() => { setOpen(false); }} | ||
| className={({ isActive }: { isActive: boolean }): string => | ||
| cn( | ||
| 'flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors', | ||
| isActive | ||
| ? 'bg-accent text-primary' | ||
| : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary' | ||
| ) | ||
| } | ||
| > | ||
| <Settings className="h-4 w-4 shrink-0" /> | ||
| Settings | ||
| </NavLink> | ||
| </div> | ||
| </aside> | ||
|
|
||
| <main className="flex flex-1 flex-col overflow-hidden"> | ||
| <Outlet /> | ||
| </main> | ||
| </div> | ||
| </MobileNavContext.Provider> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,97 @@ | ||
| import { NavLink, Link } from 'react-router'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import { LayoutDashboard, MessageSquare, Workflow, Settings, Menu } from 'lucide-react'; | ||
| import { listWorkflowRuns, getUpdateCheck } from '@/lib/api'; | ||
| import { cn } from '@/lib/utils'; | ||
| import { useMobileNav } from '@/contexts/MobileNavContext'; | ||
|
|
||
| const tabs = [ | ||
| { to: '/chat', end: false, icon: MessageSquare, label: 'Chat' }, | ||
| { to: '/dashboard', end: true, icon: LayoutDashboard, label: 'Dashboard' }, | ||
| { to: '/workflows', end: false, icon: Workflow, label: 'Workflows' }, | ||
| { to: '/settings', end: false, icon: Settings, label: 'Settings' }, | ||
| ] as const; | ||
|
|
||
| export function TopNav(): React.ReactElement { | ||
| const { setOpen } = useMobileNav(); | ||
|
|
||
| const { data: runningRuns } = useQuery({ | ||
| queryKey: ['workflowRuns', { status: 'running' }], | ||
| queryFn: () => listWorkflowRuns({ status: 'running', limit: 1 }), | ||
| refetchInterval: 10_000, | ||
| }); | ||
| const hasRunning = (runningRuns?.length ?? 0) > 0; | ||
|
|
||
| const { data: updateCheck } = useQuery({ | ||
| queryKey: ['update-check'], | ||
| queryFn: getUpdateCheck, | ||
| staleTime: 60 * 60 * 1000, | ||
| refetchInterval: 60 * 60 * 1000, | ||
| retry: false, | ||
| }); | ||
|
|
||
| return ( | ||
| <nav className="flex items-center gap-1 border-b border-border bg-surface px-4"> | ||
|
|
||
| {/* ── Mobile: hamburger button (hidden on desktop) ── */} | ||
| <button | ||
| onClick={() => { setOpen(true); }} | ||
| className="flex items-center justify-center rounded-md p-1.5 mr-2 text-text-secondary hover:bg-surface-elevated hover:text-text-primary transition-colors md:hidden" | ||
| aria-label="Ouvrir le menu" | ||
| > | ||
| <Menu className="h-5 w-5" /> | ||
| </button> | ||
|
coderabbitai[bot] marked this conversation as resolved.
Outdated
|
||
|
|
||
| {/* Brand logo */} | ||
| <Link to="/chat" className="flex items-center gap-2 mr-4 hover:opacity-80 transition-opacity"> | ||
| <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary"> | ||
| <span className="text-sm font-semibold text-primary-foreground">A</span> | ||
| </div> | ||
| {/* Logo text: always visible */} | ||
| <span className="text-sm font-semibold text-text-primary">Archon</span> | ||
| </Link> | ||
|
|
||
| {/* ── Desktop nav tabs (hidden on mobile) ── */} | ||
| <div className="hidden md:flex items-center gap-1"> | ||
| {tabs.map(({ to, end, icon: Icon, label }) => ( | ||
| <NavLink | ||
| key={to} | ||
| to={to} | ||
| end={end} | ||
| className={({ isActive }: { isActive: boolean }): string => | ||
| cn( | ||
| 'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors', | ||
| isActive | ||
| ? 'border-primary text-primary' | ||
| : 'border-transparent text-text-secondary hover:text-text-primary' | ||
| ) | ||
| } | ||
| > | ||
| <Icon className="h-4 w-4" /> | ||
| {label} | ||
| {to === '/dashboard' && hasRunning && ( | ||
| <span className="flex h-2 w-2 rounded-full bg-primary animate-pulse" /> | ||
| )} | ||
| </NavLink> | ||
| ))} | ||
| </div> | ||
|
|
||
| {/* Version + update badge */} | ||
| <span className="ml-auto text-xs text-text-secondary"> | ||
| v{import.meta.env.VITE_APP_VERSION as string} | ||
| {updateCheck?.updateAvailable && updateCheck.releaseUrl && ( | ||
| <a | ||
| href={updateCheck.releaseUrl} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="ml-1.5 inline-flex items-center gap-1 text-xs text-primary hover:underline" | ||
| title={`v${updateCheck.latestVersion} available`} | ||
| > | ||
| <span className="inline-block h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />v | ||
| {updateCheck.latestVersion} | ||
| </a> | ||
| )} | ||
| </span> | ||
| </nav> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { createContext, useContext } from 'react'; | ||
|
|
||
| export interface MobileNavContextValue { | ||
| open: boolean; | ||
| setOpen: (open: boolean) => void; | ||
| } | ||
|
|
||
| export const MobileNavContext = createContext<MobileNavContextValue>({ | ||
| open: false, | ||
| setOpen: () => {}, | ||
| }); | ||
|
|
||
| export function useMobileNav(): MobileNavContextValue { | ||
| return useContext(MobileNavContext); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reset the mobile nav state on desktop resize.
Line 15 keeps
openalive, and Lines 25-42 only hide the drawer with responsive classes. If the menu is open during a rotate/resize, switching back to mobile reopens it unexpectedly.🔧 Proposed fix
Also applies to: 25-42
🤖 Prompt for AI Agents