Sidebar Navigation Component
Relevant source files
The following files were used as context for generating this wiki page:
The SidebarNav component provides the primary navigation interface for the Kernelcrafter application. It allows you to switch between different functional modules such as the Dashboard, Project Setup, Kernel Patching, and the AI Assistant.
The component integrates with a low-level SidebarProvider to manage collapse states, mobile responsiveness, and cookie-based state persistence. It sits within the main dashboard layout, typically alongside a SidebarInset that contains the active tab content.
Sources: src/components/dashboard/SidebarNav.tsx:1-47, src/app/page.tsx:216-218
Architecture and Context
The navigation system relies on a React Context-based architecture. The SidebarProvider wraps the application to share state across the sidebar, the toggle triggers, and the main content area.
Data Flow Diagram
This diagram shows how user interactions with the SidebarNav trigger state updates in the parent dashboard.
Navigation Items
The sidebar contains a static list of navigation items, each associated with a unique identifier and a Lucide icon.
| Title | ID | Icon | Purpose |
|---|---|---|---|
| Dashboard | dashboard | LayoutDashboard | High-level build overview and quick stats |
| Project Setup | setup | FolderCode | Configuration of source URLs and GKI versions |
| Kernel Patching | patching | ShieldCheck | Integration of KernelSU, SUSFS, and NoMount |
| Compilation | compilation | Cpu | Live build output and optimization settings |
| Log Viewer | logs | Terminal | Detailed build output history |
| Flashable Creator | flashable | PackageSearch | AnyKernel3 ZIP generation |
| AI Assistant | ai | Bot | Automated troubleshooting and log analysis |
Sources: src/components/dashboard/SidebarNav.tsx:4-14, src/app/page.tsx:255-618
Component Properties
The SidebarNav component accepts specific props to synchronize its visual state with the application's routing or internal state.
interface SidebarNavProps {
activeTab: string;
onTabChange: (id: string) => void;
}
Sources: src/components/dashboard/SidebarNav.tsx:16-19
Implementation Details
State Persistence
The sidebar saves its expanded or collapsed state to a browser cookie named sidebar_state. This ensures the interface remains consistent across page reloads. The state expires after 7 days.
Sources: src/components/ui/sidebar.tsx:16-17, src/components/ui/sidebar.tsx:68
Keyboard Shortcuts
You can toggle the sidebar visibility using the keyboard shortcut Ctrl+B (or Cmd+B on macOS).
Sources: src/components/ui/sidebar.tsx:21, src/components/ui/sidebar.tsx:82-96
Responsive Handling
The component behaves differently based on the device viewport:
- Desktop: The sidebar is a persistent or collapsible column on the left side of the screen.
- Mobile: The sidebar transforms into a
Sheetcomponent (drawer) that slides in from the left when the trigger is activated.
Styling and Layout
The sidebar uses a dark-themed aesthetic with a border on the right (border-sidebar-border). Active items are highlighted with a primary color background (bg-primary/10) and a border-right indicator to provide clear visual feedback of the current location.
Sources: src/components/dashboard/SidebarNav.tsx:22, src/components/dashboard/SidebarNav.tsx:37-41
Layout Components
- SidebarHeader: Contains the "K-CRAFTER" branding and a neon-glow icon.
- SidebarContent: Houses the main
SidebarMenuand navigation links. - SidebarFooter: Contains global settings and secondary actions.
Sources: src/components/dashboard/SidebarNav.tsx:23-64
The application's RootLayout applies the dark class to the HTML element, which the sidebar uses to resolve its theme-specific colors.
Sources: src/app/layout.tsx:31
Conclusion
The SidebarNavigationComponent acts as the central hub for user interaction within the Kernelcrafter app. By combining a flexible context-based provider with specialized dashboard items, it facilitates a seamless workflow between kernel configuration, compilation, and troubleshooting.