Using the Admin Layout

The admin panel provides a complete layout system with Sidebar, Navbar, and MainLayout components.

Quick Start

Basic Usage

import { MainLayout } from "@monorepo/solid-pkg-ui";

export default function MyPage() {
  return (
    <MainLayout>
      <h1>My Page Content</h1>
      <p>Your page content goes here...</p>
    </MainLayout>
  );
}

Full Configuration

import { MainLayout } from "@monorepo/solid-pkg-ui";

export default function DashboardPage() {
  // User profile data
  const user = {
    name: "Sarah Jensen",
    role: "Super Admin",
    avatar: "https://example.com/avatar.jpg", // Optional
  };

  // Custom navigation sections
  const navSections = [
    {
      items: [
        {
          label: "Dashboard",
          href: "/",
          icon: TbDashboard,
        },
      ],
    },
    {
      title: "Leave Management",
      items: [
        {
          label: "Employees",
          href: "/employees",
          icon: TbUsers,
        },
        {
          label: "Leave Requests",
          href: "/leave-requests",
          icon: TbCalendarEvent,
          badge: 5, // Show notification badge
        },
      ],
    },
  ];

  const handleLogout = () => {
    // Your logout logic
    console.log("Logging out...");
  };

  const handleNotificationClick = () => {
    // Your notification logic
    console.log("Notifications clicked");
  };

  return (
    <MainLayout
      // User profile
      user={user}
      // Company branding
      companyName="Gremlin Inc."
      companySubtitle="Admin Portal"
      // Search
      searchPlaceholder="Search employees, requests..."
      // Notifications
      notificationCount={3}
      onNotificationClick={handleNotificationClick}
      // Navigation
      navSections={navSections}
      // Logout
      onLogout={handleLogout}
    >
      {/* Your page content */}
      <div>
        <h2>Dashboard</h2>
        {/* ... */}
      </div>
    </MainLayout>
  );
}

Components

MainLayout

The main wrapper that combines Sidebar and Navbar. Props:

Prop	Type	Description
`children`	`JSX.Element`	Page content
`navSections`	`NavSection[]`	Custom navigation sections
`companyName`	`string`	Company name in sidebar
`companySubtitle`	`string`	Subtitle under company name
`user`	`UserProfile`	User profile data
`searchPlaceholder`	`string`	Search input placeholder
`notificationCount`	`number`	Number of notifications
`onLogout`	`() => void`	Logout handler
`onNotificationClick`	`() => void`	Notification click handler

Left navigation panel with company logo, nav items, and footer actions. Features:

✅ Glassmorphism design
✅ Active route highlighting
✅ Section headers
✅ Badge support
✅ Settings and logout actions
✅ Mobile responsive (hiddenon mobile)

Icons Used (from solid-icons):

TbDashboard - Dashboard
TbUsers - Employees
TbCalendarEvent - Leave Requests
TbCalendar - Calendar
TbChartBar - Reports
TbUserGroup - Users
TbSettings - Settings
TbLogout - Logout
TbLeaf - Company logo

Top navigation bar with search, dark mode toggle, notifications, and user profile. Features:

✅ Glassmorphism design
✅ Search bar
✅ Dark mode toggle
✅ Notification bell with badge
✅ User profile with avatar/initials
✅ Mobile menu button
✅ Responsive design

Icons Used (from solid-icons):

TbSearch - Search
TbMoon / TbSun - Dark mode
TbBell - Notifications
TbMenu2 - Mobile menu

The Sidebar comes with default navigation:

[
  {
    items: [{ label: "Dashboard", href: "/", icon: TbDashboard }],
  },
  {
    title: "Leave Management",
    items: [
      { label: "Employees", href: "/employees", icon: TbUsers },
      {
        label: "Leave Requests",
        href: "/leave-requests",
        icon: TbCalendarEvent,
        badge: 5,
      },
      { label: "Calendar", href: "/calendar", icon: TbCalendar },
      { label: "Reports", href: "/reports", icon: TbChartBar },
    ],
  },
  {
    title: "User Management",
    items: [{ label: "Users", href: "/users", icon: TbUserGroup }],
  },
];

Pass custom navigation sections:

import { TbHome, TbSettings, TbUsers } from "solid-icons/tb";

const customNav = [
  {
    // No title = no section header
    items: [{ label: "Home", href: "/", icon: TbHome }],
  },
  {
    title: "Admin",
    items: [
      { label: "Users", href: "/users", icon: TbUsers },
      { label: "Settings", href: "/settings", icon: TbSettings },
    ],
  },
];

<MainLayout navSections={customNav}>{/* ... */}</MainLayout>;

Adding Badges

Show notification counts on nav items:

{
  label: 'Messages',
  href: '/messages',
  icon: TbMail,
  badge: 12, // Shows as a pill badge
}

User Profile

With Avatar

const user = {
  name: "John Doe",
  role: "Admin",
  avatar: "https://example.com/avatar.jpg",
};

Without Avatar (Shows Initials)

const user = {
  name: "John Doe", // Shows "JD"
  role: "Admin",
};

Dark Mode

The dark mode toggle is built into the Navbar. It:

✅ Toggles dark class on document.documentElement
✅ Shows moon icon in light mode
✅ Shows sun icon in dark mode
✅ Smooth transitions

To persist dark mode preference:

// In your app initialization
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
  document.documentElement.classList.add("dark");
}

// In dark mode toggle handler
const handleDarkModeChange = (isDark: boolean) => {
  localStorage.setItem("theme", isDark ? "dark" : "light");
};

Mobile Behavior

Desktop (md breakpoint and up): Always visible
Mobile: Hidden by default, shown when menu button clicked
Overlay: Dark backdrop with blur when sidebar is open
Animation: Slides in from left

Desktop: Shows search bar
Mobile: Shows menu button, hides search
User Profile: Shows name and role on large screens only

Page Content Area

The content area inside MainLayout:

✅ Automatically scrollable
✅ Custom scrollbar styling
✅ Proper spacing and padding
✅ Full height utilization

<MainLayout>
  <div class="mb-8 px-2 mt-2">
    <h2 class="text-3xl font-bold text-slate-800 dark:text-white">
      Page Title
    </h2>
    <p class="text-slate-500 dark:text-slate-400">Page description...</p>
  </div>

  {/* Your content */}
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    {/* Cards, tables, etc. */}
  </div>
</MainLayout>

Example Pages

See /routes/dashboard-example.tsx for a complete example with:

MainLayout configuration
Stat cards
Content sections
Proper styling

TypeScript Types

// Navigation
interface NavItem {
  label: string;
  href: string;
  icon: Component;
  badge?: string | number;
}

interface NavSection {
  title?: string;
  items: NavItem[];
}

// User
interface UserProfile {
  name: string;
  role: string;
  avatar?: string;
}

// Props
interface MainLayoutProps {
  children: JSX.Element;
  navSections?: NavSection[];
  companyName?: string;
  companySubtitle?: string;
  user?: UserProfile;
  searchPlaceholder?: string;
  notificationCount?: number;
  onLogout?: () => void;
  onNotificationClick?: () => void;
}

Getting Started

Development

UI Components

Using the Admin Layout

Using the Admin Layout

Quick Start

Basic Usage

Full Configuration

Components

MainLayout

Sidebar

Navbar

Navigation Structure

Default Navigation

Custom Navigation

Adding Badges

User Profile

With Avatar

Without Avatar (Shows Initials)

Dark Mode

Mobile Behavior

Sidebar

Navbar

Page Content Area

Example Pages

TypeScript Types

​Using the Admin Layout

​Quick Start

​Basic Usage

​Full Configuration

​Components

​MainLayout

​Sidebar

​Navbar

​Navigation Structure

​Default Navigation

​Custom Navigation

​Adding Badges

​User Profile

​With Avatar

​Without Avatar (Shows Initials)

​Dark Mode

​Mobile Behavior

​Sidebar

​Navbar

​Page Content Area

​Example Pages

​TypeScript Types

​Related Documentation

Using the Admin Layout

Quick Start

Basic Usage

Full Configuration

Components

MainLayout

Sidebar

Navbar

Navigation Structure

Default Navigation

Custom Navigation

Adding Badges

User Profile

With Avatar

Without Avatar (Shows Initials)

Dark Mode

Mobile Behavior

Sidebar

Navbar

Page Content Area

Example Pages

TypeScript Types

Related Documentation