🖥️ Responsive Layout System

SaaSKit is built with a fully responsive layout system that works seamlessly across mobile, tablet, and desktop. The layout architecture is clean, composable, and provides an excellent starting point for both simple dashboards and complex SaaS interfaces.

---

🧱 Layout Components

SaaSKit’s layout is composed of the following key components:

• Sidebar: A vertical navigation menu that collapses on smaller screens
• Topbar: A header bar containing branding, profile, and utility actions
• Layout Shell: A wrapper that combines Sidebar + Topbar with content

components/
├── layout/
│   ├── Sidebar.tsx       # Navigation links, responsive toggle
│   ├── Topbar.tsx        # Logo, user profile, theme switch
│   └── LayoutShell.tsx   # Wraps pages with layout

All components use Tailwind CSS for responsive spacing, visibility, and layout behavior, with MUI elements for advanced UI needs.

---

📱 Mobile-First Design

The layout is built with mobile-first responsiveness in mind:

Breakpoint	Behavior
sm and below	Sidebar collapses into hamburger menu; Topbar becomes sticky
md	Sidebar visible as drawer or collapsible; Topbar overlays or docks
lg and above	Sidebar fixed on the left; Topbar docked at top

Responsive classes like hidden md:flex and w-full lg:w-[calc(100%-250px)] are used extensively to adapt layouts per device width.

---

🌓 Theme Support

SaaSKit’s layout system is dark-mode ready. It uses Tailwind’s dark: variant and can be extended with a color theme toggle button.

You can customize default themes via:

• Tailwind config: tailwind.config.ts
• MUI Theme Provider: using createTheme for global styles

---

🔄 Layout Usage in Pages

Each page uses the shared layout defined in app/layout.tsx. This layout wraps all route segments and injects global providers like the sidebar, topbar, and user session logic.

// Example
export default function RootLayout({ children }) {
  return (
    <LayoutShell>
      {children}
    </LayoutShell>
  );
}

---

💡 Customizing Layout

You can extend the layout system by:

• Adding navigation groups or section headings in Sidebar.tsx
• Including notifications, breadcrumbs, or user menus in Topbar.tsx
• Wrapping specific pages with different shells (e.g. minimal layout for login)

---

🎨 Style Tokens & Utilities

• Tailwind spacing system ensures consistent layout paddings
• Custom container classes enforce max-width and horizontal margins
• Dark mode support via dark: classes
• Utility classes are preferred over inline styles or excessive CSS overrides

---

✅ Summary

• Fully responsive from mobile to desktop
• Sidebar and Topbar modularized and reusable
• Easy to theme, extend, and customize
• Layout is automatically applied via App Router’s layout.tsx
• Combines Tailwind + MUI for flexibility and consistency

Next: Learn how to customize UI Components using SaaSKit's design system.