From 35c25fe784b0e84521d12f5e077e1a6ded6e3c88 Mon Sep 17 00:00:00 2001
From: Kuldeep Matharu <kuldeep.matharu@gmail.com>
Date: Thu, 18 Jul 2024 23:58:30 +0100
Subject: [PATCH] showcase

---
 src/component/menu/index.js      |   4 +-
 src/component/showcase/index.css |   3 +
 src/component/showcase/index.js  | 291 ++++++++++++++++---------------
 src/index.js                     |   2 +-
 4 files changed, 152 insertions(+), 148 deletions(-)

diff --git a/src/component/menu/index.js b/src/component/menu/index.js
index d32c5097..287cf661 100644
--- a/src/component/menu/index.js
+++ b/src/component/menu/index.js
@@ -5,8 +5,8 @@ import { MenuFrame } from '../menuFrame';
 const menu = {};
 
 menu.navData = [
-  // { name: 'debug', active: false, overscroll: true, sub: ['showcase', 'bookmark'] },
-  { name: 'theme', active: true, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] },
+  { name: 'debug', active: true, overscroll: true, sub: ['showcase', 'bookmark'] },
+  { name: 'theme', active: false, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] },
   { name: 'layout', active: false, overscroll: true, sub: ['scaling', 'area', 'padding', 'gutter', 'alignment', 'page'] },
   { name: 'header', active: false, overscroll: true, sub: ['alignment', 'greeting', 'transitional', 'clock', 'date', 'search'] },
   { name: 'bookmark', active: false, overscroll: true, sub: ['general', 'style', 'orientation', 'sort'] },
diff --git a/src/component/showcase/index.css b/src/component/showcase/index.css
index fdeab86b..3faebcd5 100644
--- a/src/component/showcase/index.css
+++ b/src/component/showcase/index.css
@@ -23,11 +23,14 @@
   position: sticky;
   top: var(--showcase-padding);
   width: 100%;
+  height: 100%;
   height: fit-content;
 }
 
 .showcase-content {
   grid-area: content;
+  width: 100%;
+  height: fit-content;
 }
 
 @media (min-width: 1400px) {
diff --git a/src/component/showcase/index.js b/src/component/showcase/index.js
index b1e893e9..400742e7 100644
--- a/src/component/showcase/index.js
+++ b/src/component/showcase/index.js
@@ -41,7 +41,9 @@ import './index.css';
 const showcase = {};
 
 showcase.element = {
-  showcase: node('div|class:showcase')
+  showcase: node('div|class:showcase'),
+  side: node('div|class:showcase-side'),
+  content: node('div|class:showcase-content'),
 };
 
 showcase.state = {};
@@ -321,7 +323,6 @@ showcase.area.assemble = () => {
     }),
   };
 
-
   showcase.control.shade = new ShadeBar();
 
   showcase.control.input.radio = {
@@ -576,154 +577,154 @@ showcase.area.assemble = () => {
     );
   };
 
-  showcase.element.showcase.appendChild(
-    node('div|class:showcase-side', [
-      form.wrap({
-        children: [
-          form.inline({
-            align: 'top',
-            gap: 'small',
-            children: [
-              showcase.control.side.style.inputButton(),
-              showcase.control.side.disable.wrap(),
-            ]
-          })
-        ]
-      }),
-      showcase.control.side.h.wrap(),
-      showcase.control.side.s.wrap(),
-      showcase.control.side.contrast.wrap(),
-      showcase.control.side.accent.wrap(),
-      showcase.control.side.shadow.wrap(),
-      showcase.control.side.radius.wrap(),
-      showcase.control.side.displayFont.wrap(),
-      showcase.control.side.uiFont.wrap(),
-    ])
+  showcase.element.side.append(
+    form.wrap({
+      children: [
+        form.inline({
+          align: 'top',
+          gap: 'small',
+          children: [
+            showcase.control.side.style.inputButton(),
+            showcase.control.side.disable.wrap(),
+          ]
+        })
+      ]
+    }),
+    showcase.control.side.h.wrap(),
+    showcase.control.side.s.wrap(),
+    showcase.control.side.contrast.wrap(),
+    showcase.control.side.accent.wrap(),
+    showcase.control.side.shadow.wrap(),
+    showcase.control.side.radius.wrap(),
+    // showcase.control.side.displayFont.wrap(),
+    // showcase.control.side.uiFont.wrap(),
   );
 
-  showcase.element.showcase.appendChild(
-    node('div|class:showcase-content', [
-      form.wrap({
-        children: [
-          showcase.control.shade.shadeBar(),
-        ]
-      }),
-      node('hr'),
-      form.wrap({
-        children: [
-          form.inline({
-            gap: 'large',
-            children: [
-              node('div|class:showcase-type', [
-                node('h1:Heading 1'),
-                node('h2:Heading 2'),
-                node('h3:Heading 3'),
-                node('h4:Heading 4'),
-                node('h5:Heading 5'),
-                node('h6:Heading 6'),
+  showcase.element.content.append(
+    form.sticky({
+      children: [
+        showcase.control.shade.shadeBar()
+      ]
+    }),
+    node('hr'),
+    form.wrap({
+      children: [
+        form.inline({
+          gap: 'large',
+          children: [
+            node('div|class:showcase-type', [
+              node('h1:Heading 1'),
+              node('h2:Heading 2'),
+              node('h3:Heading 3'),
+              node('h4:Heading 4'),
+              node('h5:Heading 5'),
+              node('h6:Heading 6'),
+            ]),
+            node('div|class:showcase-type', [
+              node('p:Sed dolores doloremque id iure Quis est suscipit deleniti cum doloremque nihil.'),
+              node('ul', [
+                node('li:List item 1'),
+                node('li:List item 2'),
+                node('li:List item 3'),
               ]),
-              node('div|class:showcase-type', [
-                node('p:Sed dolores doloremque id iure Quis est suscipit deleniti cum doloremque nihil.'),
-                node('ul', [
-                  node('li:List item 1'),
-                  node('li:List item 2'),
-                  node('li:List item 3'),
-                ]),
-                node('a:Lorem ipsum dolor sit amet|href:https://github.com/zombieFox/nightTab,target:_blank'),
-              ]),
-              node('div|class:showcase-type', [
-                new Control_helperText({
-                  text: ['Et iure voluptas non accusantium voluptatibus et necessitatibus.']
-                }).wrap()
-              ]),
-            ]
-          })
-        ]
-      }),
-      node('hr'),
-      showcase.control.input.radio.a.inline(),
-      node('hr'),
-      form.wrap({
-        children: [
-          form.inline({
-            gap: 'large',
-            children: [
-              showcase.control.input.checkbox.a.wrap(),
-              showcase.control.input.checkbox.b.wrap(),
-              showcase.control.input.checkbox.c.wrap(),
-            ]
-          }),
-        ]
-      }),
-      node('hr'),
-      form.wrap({
-        children: [
-          form.inline({
-            wrap: true,
-            gap: 'small',
-            align: 'center',
-            children: [
-              showcase.control.input.radio.b.inputButton(),
-              showcase.control.input.radio.c.inputButton(),
-              showcase.control.input.checkbox.d.inputButton(),
-              showcase.control.input.checkbox.e.inputButton(),
-            ]
-          })
-        ]
-      }),
-      node('hr'),
-      form.wrap({
-        children: [
-          form.inline({
-            align: 'center',
-            gap: 'small',
-            children: [
-              showcase.control.input.radio.grid3x3.wrap(),
-              showcase.control.input.radio.grid1x3.wrap(),
-              showcase.control.input.radio.grid3x1.wrap(),
-            ]
-          }),
-        ]
-      }),
-      node('hr'),
-      form.wrap({
-        children: [
-          form.inline({
-            wrap: true,
-            gap: 'small',
-            align: 'center',
-            children: [
-              showcase.control.button.a.wrap(),
-              showcase.control.button.b.wrap(),
-              showcase.control.button.c.wrap(),
-              showcase.control.button.g.wrap(),
-              showcase.control.button.dropdown.toggle,
-            ]
-          })
-        ]
-      }),
-      node('hr'),
-      showcase.control.tab.tab(),
-      showcase.control.input.text.wrap(),
-      showcase.control.input.textarea.wrap(),
-      showcase.control.input.color.wrap(),
-      showcase.control.input.number.wrap(),
-      showcase.control.input.numberRange.wrap(),
-      showcase.control.select.wrap(),
-      node('hr'),
-      form.wrap({
-        children: [
-          form.inline({
-            gap: 'small',
-            wrap: true,
-            equalGap: true,
-            children: showcase.control.icon
-          })
-        ]
-      }),
-    ])
+              node('a:Lorem ipsum dolor sit amet|href:https://github.com/zombieFox/nightTab,target:_blank'),
+            ]),
+            node('div|class:showcase-type', [
+              new Control_helperText({
+                text: ['Et iure voluptas non accusantium voluptatibus et necessitatibus.']
+              }).wrap()
+            ]),
+          ]
+        })
+      ]
+    }),
+    node('hr'),
+    showcase.control.input.radio.a.inline(),
+    node('hr'),
+    form.wrap({
+      children: [
+        form.inline({
+          gap: 'large',
+          children: [
+            showcase.control.input.checkbox.a.wrap(),
+            showcase.control.input.checkbox.b.wrap(),
+            showcase.control.input.checkbox.c.wrap(),
+          ]
+        }),
+      ]
+    }),
+    node('hr'),
+    form.wrap({
+      children: [
+        form.inline({
+          wrap: true,
+          gap: 'small',
+          align: 'center',
+          children: [
+            showcase.control.input.radio.b.inputButton(),
+            showcase.control.input.radio.c.inputButton(),
+            showcase.control.input.checkbox.d.inputButton(),
+            showcase.control.input.checkbox.e.inputButton(),
+          ]
+        })
+      ]
+    }),
+    node('hr'),
+    form.wrap({
+      children: [
+        form.inline({
+          align: 'center',
+          gap: 'small',
+          children: [
+            showcase.control.input.radio.grid3x3.wrap(),
+            showcase.control.input.radio.grid1x3.wrap(),
+            showcase.control.input.radio.grid3x1.wrap(),
+          ]
+        }),
+      ]
+    }),
+    node('hr'),
+    form.wrap({
+      children: [
+        form.inline({
+          wrap: true,
+          gap: 'small',
+          align: 'center',
+          children: [
+            showcase.control.button.a.wrap(),
+            showcase.control.button.b.wrap(),
+            showcase.control.button.c.wrap(),
+            showcase.control.button.g.wrap(),
+            showcase.control.button.dropdown.toggle,
+          ]
+        })
+      ]
+    }),
+    node('hr'),
+    showcase.control.tab.tab(),
+    showcase.control.input.text.wrap(),
+    showcase.control.input.textarea.wrap(),
+    showcase.control.input.color.wrap(),
+    showcase.control.input.number.wrap(),
+    showcase.control.input.numberRange.wrap(),
+    showcase.control.select.wrap(),
+    node('hr'),
+    form.wrap({
+      children: [
+        form.inline({
+          gap: 'small',
+          wrap: true,
+          equalGap: true,
+          children: showcase.control.icon
+        })
+      ]
+    }),
   );
 
+  showcase.element.showcase.append(showcase.element.side);
+
+  showcase.element.showcase.append(showcase.element.content);
+
 };
 
 showcase.area.clear = () => {
diff --git a/src/index.js b/src/index.js
index 18d4dfc6..33aa44d0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -24,4 +24,4 @@ component.pageLock.init();
 
 component.keyboard.init();
 
-// component.menu.open();
+component.menu.open();