initial

ts_web/elements/00group-layout/dees-mobile-navigation/dees-mobile-navigation.demo.ts

@@ -0,0 +1,87 @@
+import { html } from '@design.estate/dees-element';
+import { injectCssVariables } from '../../00variables.js';
+
+export const demoFunc = () => {
+  injectCssVariables();
+  return html`
+  <style>
+    .demo-section {
+      margin-bottom: 2rem;
+    }
+    .demo-section h3 {
+      margin: 0 0 1rem 0;
+      font-size: 0.875rem;
+      color: var(--dees-muted-foreground);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .nav-container {
+      border: 1px solid var(--dees-border);
+      border-radius: var(--dees-radius);
+      overflow: hidden;
+    }
+    .demo-note {
+      font-size: 0.875rem;
+      color: var(--dees-muted-foreground);
+      margin-top: 0.5rem;
+    }
+  </style>
+
+  <div class="demo-section">
+    <h3>Bottom Navigation</h3>
+    <div class="nav-container">
+      <dees-mobile-navigation
+        activeTab="home"
+        .tabs=${[
+          { id: 'home', icon: 'home', label: 'Home' },
+          { id: 'search', icon: 'search', label: 'Search' },
+          { id: 'favorites', icon: 'heart', label: 'Favorites' },
+          { id: 'profile', icon: 'user', label: 'Profile' }
+        ]}
+        @tab-change=${(e: CustomEvent) => {
+          const nav = e.target as any;
+          nav.activeTab = e.detail.tab;
+        }}
+      ></dees-mobile-navigation>
+    </div>
+    <p class="demo-note">Click tabs to switch between them.</p>
+  </div>
+
+  <div class="demo-section">
+    <h3>Navigation with Badges</h3>
+    <div class="nav-container">
+      <dees-mobile-navigation
+        activeTab="inbox"
+        .tabs=${[
+          { id: 'inbox', icon: 'inbox', label: 'Inbox', badge: 3 },
+          { id: 'sent', icon: 'send', label: 'Sent' },
+          { id: 'drafts', icon: 'file-text', label: 'Drafts', badge: 1 },
+          { id: 'trash', icon: 'trash-2', label: 'Trash' }
+        ]}
+        @tab-change=${(e: CustomEvent) => {
+          const nav = e.target as any;
+          nav.activeTab = e.detail.tab;
+        }}
+      ></dees-mobile-navigation>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Three Tab Navigation</h3>
+    <div class="nav-container">
+      <dees-mobile-navigation
+        activeTab="lists"
+        .tabs=${[
+          { id: 'lists', icon: 'list', label: 'Lists' },
+          { id: 'coupons', icon: 'ticket', label: 'Coupons' },
+          { id: 'settings', icon: 'settings', label: 'Settings' }
+        ]}
+        @tab-change=${(e: CustomEvent) => {
+          const nav = e.target as any;
+          nav.activeTab = e.detail.tab;
+        }}
+      ></dees-mobile-navigation>
+    </div>
+  </div>
+`;
+};