# Kanvaro - Application Layout & UX Design ## Overview Kanvaro implements a modern, responsive application layout with a collapsible sidebar navigation, comprehensive header with global search, and adaptive main content area. The design prioritizes user experience with persistent preferences and seamless navigation. ## Layout Architecture ### Application Structure ``` ┌─────────────────────────────────────────────────────────┐ │ Header Bar │ │ [Logo] [Search] [Notifications] [Profile] [Theme] │ ├─────────────────────────────────────────────────────────┤ │ Sidebar │ Main Content Area │ │ [Nav] │ ┌─────────────────────────────────────────┐ │ │ [Items] │ │ │ │ │ [Collapse]│ │ Dynamic Content Panels │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────┘ ``` ## Sidebar Navigation ### Navigation Structure ```typescript // lib/navigation/navigation-config.ts export interface NavigationItem { id: string; label: string; icon: string; path: string; permission?: string; children?: NavigationItem[]; badge?: number; } export const NAVIGATION_ITEMS: NavigationItem[] = [ { id: 'dashboard', label: 'Dashboard', icon: 'LayoutDashboard', path: '/dashboard', permission: 'dashboard:read' }, { id: 'projects', label: 'Projects', icon: 'FolderOpen', path: '/projects', permission: 'project:read', children: [ { id: 'projects-list', label: 'All Projects', icon: 'List', path: '/projects', permission: 'project:read' }, { id: 'projects-kanban', label: 'Kanban Board', icon: 'Columns', path: '/projects/kanban', permission: 'project:read' }, { id: 'projects-calendar', label: 'Calendar View', icon: 'Calendar', path: '/projects/calendar', permission: 'project:read' } ] }, { id: 'tasks', label: 'Tasks', icon: 'CheckSquare', path: '/tasks', permission: 'task:read', children: [ { id: 'tasks-my', label: 'My Tasks', icon: 'User', path: '/tasks/my', permission: 'task:read' }, { id: 'tasks-backlog', label: 'Backlog', icon: 'List', path: '/tasks/backlog', permission: 'task:read' }, { id: 'tasks-sprints', label: 'Sprints', icon: 'Zap', path: '/tasks/sprints', permission: 'task:read' } ] }, { id: 'team', label: 'Team', icon: 'Users', path: '/team', permission: 'team:read', children: [ { id: 'team-members', label: 'Members', icon: 'Users', path: '/team/members', permission: 'team:read' }, { id: 'team-roles', label: 'Roles & Permissions', icon: 'Shield', path: '/team/roles', permission: 'user:manage_roles' } ] }, { id: 'time', label: 'Time Tracking', icon: 'Clock', path: '/time-tracking', permission: 'time_tracking:read', children: [ { id: 'time-tracker', label: 'Timer', icon: 'Play', path: '/time-tracking/timer', permission: 'time_tracking:create' }, { id: 'time-logs', label: 'Time Logs', icon: 'Clock', path: '/time-tracking/logs', permission: 'time_tracking:read' }, { id: 'time-reports', label: 'Reports', icon: 'BarChart', path: '/time-tracking/reports', permission: 'time_tracking:read' } ] }, { id: 'reports', label: 'Reports', icon: 'BarChart', path: '/reports', permission: 'reporting:read', children: [ { id: 'reports-project', label: 'Project Reports', icon: 'FolderOpen', path: '/reports/projects', permission: 'reporting:read' }, { id: 'reports-financial', label: 'Financial Reports', icon: 'DollarSign', path: '/reports/financial', permission: 'financial:read' }, { id: 'reports-team', label: 'Team Reports', icon: 'Users', path: '/reports/team', permission: 'reporting:read' } ] }, { id: 'settings', label: 'Settings', icon: 'Settings', path: '/settings', permission: 'settings:read', children: [ { id: 'settings-profile', label: 'Profile', icon: 'User', path: '/settings/profile', permission: 'settings:read' }, { id: 'settings-preferences', label: 'Preferences', icon: 'Sliders', path: '/settings/preferences', permission: 'settings:read' }, { id: 'settings-notifications', label: 'Notifications', icon: 'Bell', path: '/settings/notifications', permission: 'settings:read' } ] } ]; ``` ### Sidebar Component Implementation ```typescript // components/layout/Sidebar.tsx 'use client'; import { useState, useEffect } from 'react'; import { usePathname } from 'next/navigation'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { ScrollArea } from '@/components/ui/scroll-area'; import { Separator } from '@/components/ui/separator'; import { ChevronLeft, ChevronRight, LayoutDashboard, FolderOpen, CheckSquare, Users, Clock, BarChart, Settings } from 'lucide-react'; import { NAVIGATION_ITEMS } from '@/lib/navigation/navigation-config'; import { useUserPermissions } from '@/hooks/useUserPermissions'; interface SidebarProps { className?: string; } export function Sidebar({ className }: SidebarProps) { const [isCollapsed, setIsCollapsed] = useState(false); const [userPreferences, setUserPreferences] = useState(null); const pathname = usePathname(); const { hasPermission } = useUserPermissions(); // Load user preferences on mount useEffect(() => { const loadPreferences = async () => { try { const response = await fetch('/api/user/preferences'); const preferences = await response.json(); setUserPreferences(preferences); setIsCollapsed(preferences.sidebarCollapsed || false); } catch (error) { console.error('Failed to load user preferences:', error); } }; loadPreferences(); }, []); // Save sidebar state const toggleSidebar = async () => { const newState = !isCollapsed; setIsCollapsed(newState); try { await fetch('/api/user/preferences', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sidebarCollapsed: newState }), }); } catch (error) { console.error('Failed to save sidebar preference:', error); } }; // Filter navigation items based on permissions const filteredItems = NAVIGATION_ITEMS.filter(item => !item.permission || hasPermission(item.permission) ); return (

{/* Sidebar Header */}

{!isCollapsed && (

Kanvaro

)}

{/* Navigation Items */}

); } interface NavigationItemProps { item: NavigationItem; isCollapsed: boolean; pathname: string; } function NavigationItem({ item, isCollapsed, pathname }: NavigationItemProps) { const [isExpanded, setIsExpanded] = useState(false); const isActive = pathname === item.path; const hasChildren = item.children && item.children.length > 0; const iconMap = { LayoutDashboard, FolderOpen, CheckSquare, Users, Clock, BarChart, Settings, List: List, Columns: Columns, Calendar: Calendar, User: User, Zap: Zap, Shield: Shield, Play: Play, Bell: Bell, DollarSign: DollarSign, Sliders: Sliders, }; const Icon = iconMap[item.icon as keyof typeof iconMap]; return (

{/* Sub-navigation */} {hasChildren && isExpanded && !isCollapsed && (

{item.children!.map((child) => ( ))}

)}

); } ``` ## Header Component ### Header Implementation ```typescript // components/layout/Header.tsx 'use client'; import { useState, useEffect } from 'react'; import { Search, Bell, User, Sun, Moon, Monitor } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; import { useTheme } from '@/hooks/useTheme'; import { useNotifications } from '@/hooks/useNotifications'; export function Header() { const [searchQuery, setSearchQuery] = useState(''); const [searchResults, setSearchResults] = useState([]); const [isSearchOpen, setIsSearchOpen] = useState(false); const { theme, setTheme } = useTheme(); const { notifications, unreadCount } = useNotifications(); // Global search functionality const handleSearch = async (query: string) => { if (query.length < 2) { setSearchResults([]); return; } try { const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`); const results = await response.json(); setSearchResults(results); } catch (error) { console.error('Search failed:', error); } }; useEffect(() => { const timeoutId = setTimeout(() => { handleSearch(searchQuery); }, 300); return () => clearTimeout(timeoutId); }, [searchQuery]); return (

{/* Global Search */}

setSearchQuery(e.target.value)} onFocus={() => setIsSearchOpen(true)} className="pl-10" /> {/* Search Results Dropdown */} {isSearchOpen && (

{searchResults.length > 0 ? (

{searchResults.map((result, index) => (

{ window.location.href = result.url; setIsSearchOpen(false); }} >

{result.type.charAt(0).toUpperCase()}

{result.title}

{result.description}

))}

) : searchQuery.length >= 2 ? (

No results found

) : null}

)}

{/* Right Side Actions */}

{/* Theme Toggle */} setTheme('light')}> Light setTheme('dark')}> Dark setTheme('system')}> System {/* Notifications */}

Notifications

{notifications.slice(0, 5).map((notification) => (

{notification.type.charAt(0).toUpperCase()}

{notification.title}

{notification.message}

{notification.timestamp}

))}

{/* User Profile Menu */} My Account Profile Preferences Settings Logout

); } ``` ## Main Content Area ### Layout Container ```typescript // components/layout/MainLayout.tsx 'use client'; import { useState } from 'react'; import { Sidebar } from './Sidebar'; import { Header } from './Header'; interface MainLayoutProps { children: React.ReactNode; } export function MainLayout({ children }: MainLayoutProps) { const [sidebarCollapsed, setSidebarCollapsed] = useState(false); return (

{/* Sidebar */} {/* Main Content */}

{/* Header */}

{/* Page Content */}

{children}

); } ``` ## Responsive Design ### Mobile Navigation ```typescript // components/layout/MobileNavigation.tsx 'use client'; import { useState } from 'react'; import { Menu, X } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; import { NAVIGATION_ITEMS } from '@/lib/navigation/navigation-config'; export function MobileNavigation() { const [isOpen, setIsOpen] = useState(false); return (

{/* Mobile Navigation Content */}

); } interface MobileNavigationItemProps { item: NavigationItem; onNavigate: () => void; } function MobileNavigationItem({ item, onNavigate }: MobileNavigationItemProps) { return ( ); } ``` ## User Preferences ### Preferences Management ```typescript // lib/preferences/user-preferences.ts export interface UserPreferences { sidebarCollapsed: boolean; theme: 'light' | 'dark' | 'system'; notifications: { email: boolean; inApp: boolean; push: boolean; }; dashboard: { layout: 'grid' | 'list'; widgets: string[]; }; timeTracking: { autoStart: boolean; reminders: boolean; }; } export class UserPreferencesService { static async getPreferences(userId: string): Promise { const response = await fetch(`/api/user/preferences`); return response.json(); } static async updatePreferences( userId: string, preferences: Partial ): Promise { await fetch('/api/user/preferences', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(preferences), }); } static async resetPreferences(userId: string): Promise { await fetch('/api/user/preferences', { method: 'DELETE', }); } } ``` ## Theme Management ### Theme Hook ```typescript // hooks/useTheme.ts 'use client'; import { useState, useEffect } from 'react'; type Theme = 'light' | 'dark' | 'system'; export function useTheme() { const [theme, setTheme] = useState('system'); useEffect(() => { const savedTheme = localStorage.getItem('theme') as Theme; if (savedTheme) { setTheme(savedTheme); } }, []); useEffect(() => { const root = window.document.documentElement; if (theme === 'system') { const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; root.classList.remove('light', 'dark'); root.classList.add(systemTheme); } else { root.classList.remove('light', 'dark'); root.classList.add(theme); } localStorage.setItem('theme', theme); }, [theme]); return { theme, setTheme }; } ``` --- *This application layout documentation will be updated as new navigation features are added and UX patterns evolve.*

Documentation

Application Layout & UX Design

Table of Contents