​
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:
PropTypeDescription
childrenJSX.ElementPage content
navSectionsNavSection[]Custom navigation sections
companyNamestringCompany name in sidebar
companySubtitlestringSubtitle under company name
userUserProfileUser profile data
searchPlaceholderstringSearch input placeholder
notificationCountnumberNumber of notifications
onLogout() => voidLogout handler
onNotificationClick() => voidNotification 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

​
Default Navigation

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 }],
  },
];

​
Custom Navigation

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;
}