initial

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

@@ -0,0 +1,85 @@
+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;
+    }
+    .layout-container {
+      border: 1px solid var(--dees-border);
+      border-radius: var(--dees-radius);
+      overflow: hidden;
+      height: 400px;
+    }
+    .demo-content {
+      padding: 1rem;
+    }
+    .demo-card {
+      background: var(--dees-card);
+      border: 1px solid var(--dees-border);
+      border-radius: var(--dees-radius);
+      padding: 1rem;
+      margin-bottom: 1rem;
+    }
+    .demo-note {
+      font-size: 0.875rem;
+      color: var(--dees-muted-foreground);
+      margin-top: 0.5rem;
+    }
+  </style>
+
+  <div class="demo-section">
+    <h3>App Layout with Navigation</h3>
+    <div class="layout-container">
+      <dees-mobile-applayout>
+        <dees-mobile-header title="My App">
+          <dees-mobile-button slot="actions" icon variant="ghost">
+            <dees-mobile-icon icon="bell" size="20"></dees-mobile-icon>
+          </dees-mobile-button>
+        </dees-mobile-header>
+
+        <div class="demo-content">
+          <div class="demo-card">
+            <h4 style="margin: 0 0 0.5rem 0;">Welcome</h4>
+            <p style="margin: 0; color: var(--dees-muted-foreground);">
+              This is a demo of the app layout component with header and bottom navigation.
+            </p>
+          </div>
+          <div class="demo-card">
+            <h4 style="margin: 0 0 0.5rem 0;">Features</h4>
+            <ul style="margin: 0; padding-left: 1.25rem; color: var(--dees-muted-foreground);">
+              <li>iOS keyboard handling</li>
+              <li>View transitions</li>
+              <li>Safe area support</li>
+            </ul>
+          </div>
+        </div>
+
+        <dees-mobile-navigation
+          slot="navigation"
+          activeTab="home"
+          .tabs=${[
+            { id: 'home', icon: 'home', label: 'Home' },
+            { id: 'explore', icon: 'compass', label: 'Explore' },
+            { id: 'settings', icon: 'settings', label: 'Settings' }
+          ]}
+        ></dees-mobile-navigation>
+      </dees-mobile-applayout>
+    </div>
+    <p class="demo-note">
+      The app layout provides a grid structure with content area and bottom navigation.
+      It automatically hides navigation when keyboard is visible on mobile.
+    </p>
+  </div>
+`;
+};