Layout and Navigation

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/components/Layout.tsx
• frontend/src/components/Sidebar.tsx
• frontend/src/App.tsx
• DASHBOARD_README.md
• UI_UX_UPGRADE.md
• frontend/src/components/DocumentationView.tsx

The layout and navigation system of the SPK Kajek dashboard provides a modern, responsive, and animated Single Page Application (SPA) experience. It is built using React, TypeScript, and styled with Tailwind CSS. The core of the system is a main Layout component that houses a persistent, collapsible Sidebar for navigation and a dynamic content area where different application views are rendered. Animations are heavily utilized via Framer Motion to create smooth transitions and a polished user experience.

The architecture separates the main application shell from the content views, allowing for a consistent look and feel across the application while enabling fast, reload-free navigation between features like the Dashboard, Analysis, and Data Management.

Sources: README.md, DASHBOARD_README.md, frontend/src/App.tsx

Core Components

The layout and navigation are primarily managed by three core React components: App.tsx, Layout.tsx, and Sidebar.tsx.

• App.tsx: The root component of the application. It manages the global state, including user authentication and the currently active view (activeTab). It determines which view to render and passes the necessary state and handler functions down to the Layout component.
• Layout.tsx: This component defines the main visual structure of the application. It wraps all page content, providing a consistent frame that includes the sidebar, a top header, and the main content area. It also includes ambient animated background effects.
• Sidebar.tsx: The primary navigation component. It displays a list of navigable links, handles user interactions for changing views, and manages its own responsive behavior (collapsing on desktop and overlaying on mobile).

Sources: frontend/src/App.tsx:1-53, frontend/src/components/Layout.tsx:1-125, frontend/src/components/Sidebar.tsx:1-259, DASHBOARD_README.md

Component Architecture and Data Flow

The components form a clear hierarchy, with state flowing downwards from App.tsx and user events flowing upwards from Sidebar.tsx.

This diagram illustrates the relationship and data flow between the main layout components.

1. App.tsx holds the activeTab state.
2. It renders Layout.tsx, passing activeTab and the setActiveTab function as props.
3. Layout.tsx renders Sidebar.tsx, passing the props along.
4. When a user clicks a navigation item in Sidebar.tsx, it calls the setActiveTab function.
5. This updates the state in App.tsx, causing a re-render with the new active view.

Sources: frontend/src/App.tsx:14-53, frontend/src/components/Layout.tsx:13-17, frontend/src/components/Sidebar.tsx:14-16,145-148

The Layout Component

The Layout.tsx component is the main application shell. It is responsible for the overall page structure and contains the primary UI regions.

Sources: frontend/src/components/Layout.tsx

Structure

The layout is composed of several key elements:

1. Ambient Background: A div with position: fixed that contains several motion.div elements. These create subtle, animated, blurred color blobs in the background for visual effect, using Framer Motion.
2. Sidebar: The <Sidebar /> component is rendered on the left.
3. Main Content Area: A <main> element that fills the remaining space. It is a flex column containing a fixed header and a scrollable content area.

Sources: frontend/src/components/Layout.tsx:20-49, 58-123

Header

A fixed <header> element is positioned at the top of the main content area. It provides context and quick actions.

• Mobile Menu Toggle: A button with a Menu icon, visible only on smaller screens (md:hidden), to toggle the sidebar's visibility.
• Page Title: Displays the name of the activeTab (e.g., "Dashboard Panel"). It is hidden on small screens.
• Theme Toggle: A button to switch between light and dark themes, displaying a Sun or Moon icon.
• Logout Button: A button with a LogOut icon that triggers the onLogout function.

Sources: frontend/src/components/Layout.tsx:61-105

Content Rendering

The Layout component uses the children prop to render the active view. The active view is wrapped in a motion.div inside App.tsx to provide fade and slide animations on navigation. This content is placed inside a scrollable div within the <main> area.

Sources: frontend/src/App.tsx:42-52, frontend/src/components/Layout.tsx:108-112

The Sidebar Component

Sidebar.tsx is the primary navigation control. It is highly interactive, responsive, and animated.

Sources: frontend/src/components/Sidebar.tsx, UI_UX_UPGRADE.md

Navigation Items

The sidebar contains links to all major sections of the application.

Icon	Label	ID
Home	Dashboard	dashboard
BarChart2	Analisa & Ranking	analysis
Calculator	Perhitungan	calculation
Database	Data Vendor	data
History	Riwayat	history
BookOpen	Dokumentasi	documentation
Settings	Pengaturan	settings

Sources: frontend/src/components/Sidebar.tsx:18-27

State and Responsiveness

The sidebar has two main responsive states:

• Desktop: It can be expanded (256px width) or collapsed (80px width). The state is controlled by the collapsed prop from Layout.tsx and toggled via the onToggle function, which is triggered by a chevron button. When collapsed, it shows only icons, with full labels appearing in tooltips on hover.
• Mobile: On screens smaller than md (768px), the sidebar acts as an overlay. It is toggled by a hamburger menu button in the Layout header. Its visibility is managed by an internal isOpen state.

Sources: frontend/src/components/Sidebar.tsx:14-16, 80-83, 114-125, UI_UX_UPGRADE.md, frontend/src/components/Layout.tsx:63-68

Animations

Framer Motion is used extensively to create a fluid user experience:

• Width Transition: The sidebar animates between its expanded and collapsed states using a spring transition defined in sidebarVariants.
• Text Animation: The navigation labels fade and slide in or out, synchronized with the sidebar's width change, using textVariants.
• Active Link Indicator: The active navigation item has a blue gradient background. A motion.div with layoutId="activeTabBg" creates a smooth animation that moves this background from the previously active link to the newly selected one.
• User Info: The user profile section at the bottom gracefully animates its opacity and height when the sidebar collapses or expands.

Sources: frontend/src/components/Sidebar.tsx:29-59, 153-160, 230-237

Navigation Flow

The following sequence diagram shows the process of a user navigating to a new page.

Conclusion

The layout and navigation system for the SPK Kajek dashboard is a well-structured, modern implementation that prioritizes user experience. By leveraging React's component model, Tailwind CSS for styling, and Framer Motion for animations, it provides a responsive, fast, and visually appealing interface. The clear separation of concerns between the App, Layout, and Sidebar components ensures maintainability and scalability.