Dolphin Layout 🐬

A responsive React layout component with navigation, drawer, theme support and Nepali language compatibility.

Features

• 🎨 Multi-Theme Support - Light, Dark & Auto mode
• 📱 Fully Responsive - Mobile-first design
• 🧭 Smart Navigation - Drawer & Top navigation
• 🔐 Protected Routes - Role-based access control
• 🌐 Nepali Support - RTL & localization ready
• 🎯 TypeScript - Fully typed components
• ⚡ Zero CSS - Uses Dolphin CSS utility framework

Installation

npm install dolphin-layout dolphincss
Quick Start
jsx
import React from 'react';
import { DolphinLayout } from 'dolphin-layout';
import 'dolphincss/dolphin-css.css';

const App = () => {
  const schema = {
    routes: [
      {
        path: "/",
        component: React.lazy(() => import('./Home')),
        title: "गृहपृष्ठ"
      },
      {
        path: "/about",
        component: React.lazy(() => import('./About')), 
        title: "हाम्रो बारेमा"
      }
    ],
    topNav: {
      brand: {
        text: "मेरो एप",
        icon: "🐬"
      }
    },
    drawer: {
      items: [
        {
          type: "link",
          label: "गृहपृष्ठ",
          path: "/",
          icon: "🏠"
        }
      ]
    },
    theme: "auto"
  };

  return <DolphinLayout schema={schema} userRole="user" />;
};
Schema Configuration
Basic Schema Structure
typescript
const schema = {
  routes: Route[],
  topNav: TopNavConfig,
  drawer: DrawerConfig, 
  footer: FooterConfig,
  theme: "light" | "dark" | "auto",
  config: AppConfig,
  styles: AppStyles
}
Route Configuration
typescript
{
  path: "/dashboard",
  component: DashboardComponent,
  title: "ड्यासबोर्ड",
  role: "admin", // Optional: Role restriction
  hideLayout: false, // Optional: Hide layout for full-page
  showDrawer: true, // Optional: Show/hide drawer
  noPadding: false // Optional: Remove padding
}
Components
Exported Components
typescript
import { 
  DolphinLayout,
  SplashScreen,
  ErrorBoundary, 
  ProtectedRoute,
  DrawerComponent,
  TopNav,
  FooterComponent
} from 'dolphin-layout';
Context Providers
typescript
import { ThemeContext, NavContext } from 'dolphin-layout';

// Theme context
const { theme, setTheme } = useContext(ThemeContext);

// Navigation context  
const { currentPath, mobileMenuOpen } = useContext(NavContext);
Customization
Custom Themes
typescript
const schema = {
  styles: {
    colors: {
      primary: "#3b82f6",
      secondary: "#64748b",
      accent: "#f59e0b"
    }
  }
}
Custom Breakpoints
typescript
const schema = {
  config: {
    breakpoints: {
      mobile: 640,
      tablet: 768, 
      desktop: 1024
    }
  }
}
Events
Route Change Event
typescript
const schema = {
  events: {
    onRouteChange: (path: string) => {
      console.log('Route changed to:', path);
    },
    onThemeChange: (theme: string) => {
      console.log('Theme changed to:', theme);
    }
  }
}
Examples
Basic Layout
jsx
<DolphinLayout 
  schema={basicSchema} 
  userRole="user"
/>
Admin Dashboard
jsx
<DolphinLayout
  schema={adminSchema}
  userRole="admin" 
/>
Full-Page Routes
jsx
{
  path: "/login",
  component: LoginPage,
  hideLayout: true // Hides navigation for login page
}
Browser Support
Chrome 90+

Firefox 88+

Safari 14+

Edge 90+

License
MIT © 2025 Dolphin Layout

text

## 🚀 अब package.json मा README.md थप्नुहोस्:

```json
{
  "files": [
    "dist",
    "README.md"
  ]
}