@darksnow-ui/structure

Pure layout structure components for DarkSnow UI that provide two fundamental layout patterns for building modern web applications. These components focus exclusively on structural layout, with no imposed visual styles.

Installation

npm install @darksnow-ui/structure

Overview

This package provides two complementary layout structures:

• PageStructure - Traditional top-to-bottom layout ideal for dashboards, admin panels, and websites
• AppStructure - IDE/Editor style layout perfect for complex applications and development tools

Quick Start

import { PageStructure, AppStructure } from "@darksnow-ui/structure"
import "@darksnow-ui/structure/css"

// Traditional dashboard layout
<PageStructure
  header={<Header />}
  navbar={<Navigation />}
  leftSidebar={<Sidebar />}
  main={<MainContent />}
  footer={<Footer />}
/>

// IDE-style layout
<AppStructure
  activityBar={<ActivityBar />}
  primarySidebar={<FileExplorer />}
  header={<TabBar />}
  main={<Editor />}
  bottomPanel={<Terminal />}
  statusBar={<StatusBar />}
/>

Layout Comparison

PageStructure

Traditional top-to-bottom flow with optional sidebars:

┌─────────────────────────────────┐
│          Header                 │
├─────────────────────────────────┤
│          Navbar                 │
├─────┬─────────────────┬─────────┤
│Left │   Main Content  │  Right  │
│Side │                 │  Side   │
│bar  │                 │  bar    │
├─────┴─────────────────┴─────────┤
│          Footer                 │
└─────────────────────────────────┘

AppStructure

IDE-style layout with activity bar and panels:

┌──┬──────────┬─────────────────────┬──────────┐
│  │          │     Header          │          │
│A │ Primary  ├─────────────────────┤Secondary │
│c │ Sidebar  │   Main Content      │ Sidebar  │
│t │          ├─────────────────────┤          │
│i │          │   Bottom Panel      │          │
├──┴──────────┴─────────────────────┴──────────┤
│                Status Bar                     │
└───────────────────────────────────────────────┘

When to Use

Use PageStructure for:

• Admin dashboards
• E-commerce sites
• Documentation sites
• Marketing pages
• Traditional web applications
• Content-focused layouts

Use AppStructure for:

• Code editors
• Design tools
• Complex productivity apps
• Multi-panel applications
• IDE-like interfaces
• Tool-heavy applications

Props

PageStructure Props

| Prop | Type | Default | Description | | ----------------- | --------- | ------- | ---------------------------------- | | header | ReactNode | - | Header content | | navbar | ReactNode | - | Navigation bar below header | | main | ReactNode | - | Main content (required) | | secondaryMain | ReactNode | - | Secondary main for split views | | leftSidebar | ReactNode | - | Left sidebar content | | rightSidebar | ReactNode | - | Right sidebar content | | footer | ReactNode | - | Footer content | | beforeMain | ReactNode | - | Content before main | | afterMain | ReactNode | - | Content after main | | className | string | - | Container CSS classes | | fullScreen | boolean | false | Fill entire viewport (100vh/100vw) | | resizable | boolean | false | Enable resizable panels | | leftSidebarWidth | string | 'w-64' | Left sidebar width | | rightSidebarWidth | string | 'w-64' | Right sidebar width |

AppStructure Props

| Prop | Type | Default | Description | | --------------------- | --------- | ------- | -------------------------- | | activityBar | ReactNode | - | Leftmost vertical bar | | primarySidebar | ReactNode | - | Primary sidebar | | header | ReactNode | - | Header (content area only) | | main | ReactNode | - | Main content (required) | | secondarySidebar | ReactNode | - | Secondary sidebar | | bottomPanel | ReactNode | - | Bottom panel | | statusBar | ReactNode | - | Status bar | | beforeMain | ReactNode | - | Content before main | | afterMain | ReactNode | - | Content after main | | className | string | - | Container CSS classes | | resizable | boolean | false | Enable resizable panels | | activityBarWidth | string | 'w-12' | Activity bar width | | primarySidebarWidth | string | 'w-64' | Primary sidebar width | | secondarySidebarWidth | string | 'w-64' | Secondary sidebar width | | bottomPanelHeight | string | 'h-64' | Bottom panel height |

Styling and Customization

These components are design-agnostic and come with no visual styling. They only provide the structural layout (flexbox, overflow, dimensions). You have complete control over the appearance.

Using className Props

Each section supports a className prop for adding your own styles:

<AppStructure
  activityBar={<ActivityBar />}
  activityBarClassName="bg-gray-900 border-r border-gray-700"
  primarySidebar={<FileExplorer />}
  primarySidebarClassName="bg-gray-800 border-r border-gray-700"
  main={<Editor />}
  mainClassName="bg-gray-900"
  className="h-screen bg-gray-950"
/>

Using CSS Classes

All sections have BEM-style class names that you can target with CSS:

/* Horizontal Structure */
.ds-structure-horizontal__activity-bar {
  background-color: #1a1a1a;
  border-right: 1px solid #333;
}

.ds-structure-horizontal__primary-sidebar {
  background-color: #252525;
  border-right: 1px solid #333;
}

/* Vertical Structure */
.ds-structure-vertical__header {
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ds-structure-vertical__left-sidebar {
  background-color: #f9fafb;
  border-right: 1px solid #e5e7eb;
}

Responsive Design

The components include basic responsive behavior (hiding sidebars on mobile). You can override or extend this:

@media (max-width: 768px) {
  .ds-structure-horizontal__activity-bar {
    /* Custom mobile styles */
    position: fixed;
    z-index: 50;
  }
}

Examples

Dashboard Layout with Styling

function Dashboard() {
  return (
    <PageStructure
      header={<AppHeader />}
      headerClassName="bg-white border-b border-gray-200 shadow-sm"
      navbar={<MainNavigation />}
      navbarClassName="bg-gray-50 border-b border-gray-200"
      leftSidebar={<DashboardSidebar />}
      leftSidebarClassName="bg-gray-50 border-r border-gray-200"
      main={<DashboardContent />}
      mainClassName="bg-white"
      className="h-screen bg-gray-100"
    />
  );
}

Dark Mode IDE Layout

function CodeEditor() {
  return (
    <AppStructure
      activityBar={<ActivityIcons />}
      activityBarClassName="bg-gray-900 border-r border-gray-800"
      primarySidebar={<FileExplorer />}
      primarySidebarClassName="bg-gray-850 border-r border-gray-800"
      header={<OpenTabs />}
      headerClassName="bg-gray-800 border-b border-gray-700"
      main={<EditorPane />}
      mainClassName="bg-gray-900"
      bottomPanel={<Terminal />}
      bottomPanelClassName="bg-gray-850 border-t border-gray-800"
      statusBar={<StatusInfo />}
      statusBarClassName="bg-gray-950 border-t border-gray-800"
      className="h-screen bg-gray-900 text-gray-100"
    />
  );
}

Full Screen PageStructure (IDE-like with top header)

function IDEWithTopHeader() {
  return (
    <PageStructure
      fullScreen // Makes layout fill entire viewport
      header={<GlobalHeader />}
      leftSidebar={<FileExplorer />}
      main={<Editor />}
      rightSidebar={<Properties />}
      footer={<StatusBar />}
      stickyHeader
      stickyLeftSidebar
      stickyRightSidebar
      className="bg-gray-900 text-gray-100"
      containerClassName="w-full h-full"
    />
  );
}

With Theme System

// Using CSS variables for theming
function ThemedLayout() {
  return (
    <PageStructure
      header={<Header />}
      headerClassName="bg-theme-surface border-b border-theme-border"
      leftSidebar={<Sidebar />}
      leftSidebarClassName="bg-theme-surface-alt border-r border-theme-border"
      main={<Content />}
      mainClassName="bg-theme-background"
      className="h-screen"
    />
  );
}

Split View Examples

// Email client with preview
function EmailClient() {
  return (
    <PageStructure
      header={<EmailHeader />}
      leftSidebar={<FolderList />}
      main={<EmailList />}
      secondaryMain={<EmailPreview />}
      mainClassName="w-1/3 border-r"
      secondaryMainClassName="w-2/3"
    />
  );
}

// Code diff viewer
function DiffViewer() {
  return (
    <PageStructure
      header={<DiffControls />}
      main={<OriginalCode />}
      secondaryMain={<ModifiedCode />}
      mainClassName="w-1/2"
      secondaryMainClassName="w-1/2"
    />
  );
}