@darksnow-ui/layout

A flexible layout component for DarkSnow UI that provides header, sidebar, footer, and main content areas with responsive design.

Installation

npm install @darksnow-ui/layout

Usage

import { Layout } from "@darksnow-ui/layout"

function App() {
  return (
    <Layout
      header={<div>Header Content</div>}
      sidebar={<div>Sidebar Content</div>}
      footer={<div>Footer Content</div>}
      sidebarPosition="left"
      fixedHeader
      fixedSidebar
    >
      <div>Main Content</div>
    </Layout>
  )
}

Props

| Prop | Type | Default | Description | | ---------------- | ----------------- | ------- | ----------------------------------- | | header | ReactNode | - | Content for the header area | | sidebar | ReactNode | - | Content for the sidebar area | | footer | ReactNode | - | Content for the footer area | | children | ReactNode | - | Main content area | | sidebarPosition | 'left' | 'right' | 'left' | Position of the sidebar | | sidebarCollapsed | boolean | false | Whether the sidebar is collapsed | | fixedHeader | boolean | false | Whether the header is fixed/sticky | | fixedSidebar | boolean | false | Whether the sidebar is fixed/sticky | | className | string | '' | Additional CSS class for the layout |

CSS Variables

You can customize the layout appearance using CSS variables:

:root {
  --darksnow-header-bg: #ffffff;
  --darksnow-header-padding: 1rem;
  --darksnow-header-height: 60px; /* Used when fixed header */

  --darksnow-sidebar-bg: #f9fafb;
  --darksnow-sidebar-width: 250px;
  --darksnow-sidebar-collapsed-width: 60px;

  --darksnow-main-bg: #ffffff;
  --darksnow-main-padding: 1.5rem;
  --darksnow-main-padding-mobile: 1rem;

  --darksnow-footer-bg: #f9fafb;
  --darksnow-footer-padding: 1rem;

  --darksnow-border-color: #e5e7eb;
}

Responsive Behavior

• Desktop: Side-by-side layout with sidebar and main content
• Mobile (≤768px): Stacked layout with sidebar above main content
• When sidebarCollapsed is true on mobile, the sidebar is hidden

Features

• Flexible layout with optional header, sidebar, and footer
• Responsive design with mobile-first approach
• Fixed/sticky header and sidebar options
• Collapsible sidebar
• Left or right sidebar positioning
• Dark mode support via CSS media query
• Customizable via CSS variables