ks-web-comp-nav 1.3.1

package/bin/commands/template/v1/WebComponents/v5/menuItem/createIcon.js

@@ -0,0 +1,27 @@
+import icons from "./icons.js";
+
+export const createIcon = ({
+    inSvgName, inSvgDivClass = "size-6 flex items-center justify-center -----"
+}) => {
+    if (inSvgName in icons) {
+        const icon = document
+            .createRange()
+            .createContextualFragment(icons[inSvgName])
+            .firstElementChild;
+
+        const div = document.createElement("div");
+
+        // div.className = "size-6 flex items-center justify-center";
+        div.className = inSvgDivClass;
+        // console.log("inSvgName----- : ", inSvgName, inSvgDivClass);
+
+        div.appendChild(icon);
+
+        return div;
+    };
+
+    return document
+        .createRange()
+        .createContextualFragment(icons.search)
+        .firstElementChild;
+};

package/bin/commands/template/v1/WebComponents/v5/menuItem/icons.js

@@ -0,0 +1,54 @@
+// icons.js
+export default {
+  serverStack: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z" />
+</svg>
+`,
+  copy: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+</svg>
+`,
+  puzzle: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" />
+</svg>
+`,
+  folderPlus: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
+</svg>
+`,
+  download: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15M9 12l3 3m0 0 3-3m-3 3V2.25" />
+</svg>`,
+  search: `
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>
+    `,
+  home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+</svg>
+`,
+  serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
+</svg>
+`,
+  currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+`,
+  wifi: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
+</svg>
+`,
+  exclamation: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+</svg>
+`,
+  search1: `
+  <div class="w-10 h-10 flex items-center justify-center">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>
+ </div>
+    `,
+};

package/bin/commands/template/v1/WebComponents/v5/menuItem/index.js

@@ -0,0 +1,61 @@
+import { createAnchor } from "./createAnchor.js";
+import { createIcon } from "./createIcon.js";
+
+class KSMenuItem extends HTMLElement {
+    connectedCallback() {
+        const a = createAnchor({
+            inHtmlId: this.getAttribute("ks-id"),
+            inHref: this.getAttribute("ks-href"),
+            inTableName: this.getAttribute("ks-table-name"),
+            inClass: this.getAttribute("ks-class")
+        });
+
+        const text = this.getAttribute("ks-textToShow") || "";
+        const className = this.getAttribute("ks-className") || "";
+
+        const svgName = this.getAttribute("ks-svgName") || "";
+        const svgDivClass = this.getAttribute("ks-svgDivClass") || "";
+
+        const svg = createIcon({
+            inSvgName: svgName,
+            inSvgDivClass: svgDivClass
+        });
+
+        const span =
+            document.createElement("span");
+
+        span.textContent = text;
+
+        span.className = className;
+
+        while (this.firstChild) {
+            a.appendChild(
+                this.firstChild
+            );
+        };
+
+        a.append(
+            svg,
+            span
+        );
+
+        a.addEventListener("click", event => {
+            const menu = event.currentTarget
+                .closest("nav")
+                ?.querySelector("#menu");
+
+            // console.log("menu : ", menu);
+
+            menu?.classList.add("hidden");
+        });
+
+        this.appendChild(a);
+    }
+}
+
+customElements.define(
+    "ks-menu-item",
+    KSMenuItem
+);
+
+export default {};

package/bin/commands/template/v1/WebComponents/v5/nav/composeNavigationStory.js

@@ -0,0 +1,55 @@
+import createBrandTitle from "./createBrandTitle.js";
+import createMenuList from "./createMenuList.js";
+import createMenuToggleButton from "./createMenuToggleButton.js";
+import createNavigationBar from "./createNavigationBar.js";
+import createNavigationRow from "./createNavigationRow.js";
+import createNavigationWrapper from "./createNavigationWrapper.js";
+import readNavStoryFromElement from "./readNavStoryFromElement.js";
+
+const composeNavigationStory = ({ inElement }) => {
+    const story = readNavStoryFromElement({
+        inElement
+    });
+    console.log("story : ", story);
+
+    const nav = createNavigationBar({
+        inClassName: story.navClass
+    });
+
+    const wrapper = createNavigationWrapper({
+        inClassName: story.outerClass
+    });
+
+    const row = createNavigationRow({
+        inClassName: story.innerClass
+    });
+
+    const brand = createBrandTitle({
+        inTitleId: story.titleId,
+        inTitle: story.title,
+        inClassName: story.brandClass
+    });
+
+    const menu = createMenuList({
+        inClassName: story.menuClass,
+        inExtraClass: story.menuExtraClass
+    });
+
+    const toggleButton = createMenuToggleButton({
+        inMenu: menu,
+        inClassName: story.buttonClass
+    });
+
+    row.append(
+        brand,
+        toggleButton,
+        menu
+    );
+
+    wrapper.appendChild(row);
+    nav.appendChild(wrapper);
+
+    return nav;
+};
+
+export default composeNavigationStory;

package/bin/commands/template/v1/WebComponents/v5/nav/createBrandTitle.js

@@ -0,0 +1,11 @@
+const createBrandTitle = ({ inTitleId, inTitle, inClassName }) => {
+    const brand = document.createElement("div");
+
+    brand.className = inClassName;
+    brand.id = inTitleId || "titlehtmlId";
+    brand.innerText = inTitle || "KeshavSoft";
+
+    return brand;
+};
+
+export default createBrandTitle;

package/bin/commands/template/v1/WebComponents/v5/nav/createMenuList.js

@@ -0,0 +1,10 @@
+const createMenuList = ({ inClassName, inExtraClass }) => {
+    const menu = document.createElement("ul");
+
+    menu.id = "menu";
+    menu.className = `${inClassName} ${inExtraClass || ""}`;
+
+    return menu;
+};
+
+export default createMenuList;

package/bin/commands/template/v1/WebComponents/v5/nav/createMenuToggleButton.js

@@ -0,0 +1,14 @@
+const createMenuToggleButton = ({ inMenu, inClassName }) => {
+    const button = document.createElement("button");
+
+    button.className = inClassName;
+    button.innerText = "☰";
+
+    button.addEventListener("click", () => {
+        inMenu.classList.toggle("hidden");
+    });
+
+    return button;
+};
+
+export default createMenuToggleButton;

package/bin/commands/template/v1/WebComponents/v5/nav/createNavigationBar.js

@@ -0,0 +1,9 @@
+const createNavigationBar = ({ inClassName }) => {
+    const nav = document.createElement("nav");
+
+    nav.className = inClassName;
+
+    return nav;
+};
+
+export default createNavigationBar;

package/bin/commands/template/v1/WebComponents/v5/nav/createNavigationRow.js

@@ -0,0 +1,9 @@
+const createNavigationRow = ({ inClassName }) => {
+    const innerDiv = document.createElement("div");
+
+    innerDiv.className = inClassName;
+
+    return innerDiv;
+};
+
+export default createNavigationRow;

package/bin/commands/template/v1/WebComponents/v5/nav/createNavigationWrapper.js

@@ -0,0 +1,9 @@
+const createNavigationWrapper = ({ inClassName }) => {
+    const outerDiv = document.createElement("div");
+
+    outerDiv.className = inClassName;
+
+    return outerDiv;
+};
+
+export default createNavigationWrapper;

package/bin/commands/template/v1/WebComponents/v5/nav/index.js

@@ -0,0 +1,22 @@
+import composeNavigationStory from "./composeNavigationStory.js";
+
+class KSNav extends HTMLElement {
+    connectedCallback() {
+        if (this.dataset.rendered === "true") return;
+
+        this.dataset.rendered = "true";
+
+        this.appendChild(
+            composeNavigationStory({
+                inElement: this
+            })
+        );
+    }
+}
+
+customElements.define(
+    "ks-nav",
+    KSNav
+);
+
+export default KSNav;

package/bin/commands/template/v1/WebComponents/v5/nav/readAttributeOrDefault.js

@@ -0,0 +1,9 @@
+const readAttributeOrDefault = ({ inElement, inName, inDefaultValue }) => {
+    const value = inElement.getAttribute(inName);
+
+    if (value === null) return inDefaultValue;
+
+    return value;
+};
+
+export default readAttributeOrDefault;

package/bin/commands/template/v1/WebComponents/v5/nav/readNavStoryFromElement.js

@@ -0,0 +1,46 @@
+import readAttributeOrDefault from "./readAttributeOrDefault.js";
+
+const readNavStoryFromElement = ({ inElement }) => {
+    return {
+        navClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-nav-class",
+            inDefaultValue: "bg-gray-800 text-white"
+        }),
+        outerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-outer-class",
+            inDefaultValue: `mx-auto px-3 py-3
+    max-w-3xl
+    lg:max-w-5xl
+    xl:max-w-full xl:px-10`
+        }),
+        innerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-inner-class",
+            inDefaultValue: "flex flex-wrap items-center justify-between"
+        }),
+        titleId: inElement.getAttribute("ks-title-id"),
+        title: inElement.getAttribute("ks-title"),
+        brandClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-brand-class",
+            inDefaultValue: "text-xl font-semibold"
+        }),
+        menuClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-menu-class",
+            inDefaultValue: `w-full hidden flex flex-col space-y-2 mt-4
+    md:flex md:flex-row md:space-y-0 md:gap-4
+    md:mt-0 md:w-auto md:flex-wrap`
+        }),
+        menuExtraClass: inElement.getAttribute("ks-ul-class"),
+        buttonClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-button-class",
+            inDefaultValue: "text-xl px-4 py-1 md:hidden"
+        })
+    };
+};
+
+export default readNavStoryFromElement;

package/bin/commands/template/v1/WebComponents/v6/menuItem/createAnchor.js

@@ -0,0 +1,15 @@
+export const createAnchor = ({
+    inHtmlId = "", inHref = "#", inClass = "", inTableName = ""
+}) => {
+    const a = document.createElement("a");
+
+    a.id = inHtmlId;
+    a.href = inHref;
+    a.className = inClass;
+
+    if (inTableName) {
+        a.dataset.tableName = inTableName
+    };
+
+    return a;
+};

package/bin/commands/template/v1/WebComponents/v6/menuItem/createIcon.js

@@ -0,0 +1,27 @@
+import icons from "./icons.js";
+
+export const createIcon = ({
+    inSvgName, inSvgDivClass = "size-6 flex items-center justify-center -----"
+}) => {
+    if (inSvgName in icons) {
+        const icon = document
+            .createRange()
+            .createContextualFragment(icons[inSvgName])
+            .firstElementChild;
+
+        const div = document.createElement("div");
+
+        // div.className = "size-6 flex items-center justify-center";
+        div.className = inSvgDivClass;
+        // console.log("inSvgName----- : ", inSvgName, inSvgDivClass);
+
+        div.appendChild(icon);
+
+        return div;
+    };
+
+    return document
+        .createRange()
+        .createContextualFragment(icons.search)
+        .firstElementChild;
+};

package/bin/commands/template/v1/WebComponents/v6/menuItem/icons.js

@@ -0,0 +1,54 @@
+// icons.js
+export default {
+  serverStack: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z" />
+</svg>
+`,
+  copy: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+</svg>
+`,
+  puzzle: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" />
+</svg>
+`,
+  folderPlus: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
+</svg>
+`,
+  download: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15M9 12l3 3m0 0 3-3m-3 3V2.25" />
+</svg>`,
+  search: `
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>
+    `,
+  home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+</svg>
+`,
+  serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
+</svg>
+`,
+  currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+`,
+  wifi: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
+</svg>
+`,
+  exclamation: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+</svg>
+`,
+  search1: `
+  <div class="w-10 h-10 flex items-center justify-center">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>
+ </div>
+    `,
+};

package/bin/commands/template/v1/WebComponents/v6/menuItem/index.js

@@ -0,0 +1,61 @@
+import { createAnchor } from "./createAnchor.js";
+import { createIcon } from "./createIcon.js";
+
+class KSMenuItem extends HTMLElement {
+    connectedCallback() {
+        const a = createAnchor({
+            inHtmlId: this.getAttribute("ks-id"),
+            inHref: this.getAttribute("ks-href"),
+            inTableName: this.getAttribute("ks-table-name"),
+            inClass: this.getAttribute("ks-class")
+        });
+
+        const text = this.getAttribute("ks-textToShow") || "";
+        const className = this.getAttribute("ks-className") || "";
+
+        const svgName = this.getAttribute("ks-svgName") || "";
+        const svgDivClass = this.getAttribute("ks-svgDivClass") || "";
+
+        const svg = createIcon({
+            inSvgName: svgName,
+            inSvgDivClass: svgDivClass
+        });
+
+        const span =
+            document.createElement("span");
+
+        span.textContent = text;
+
+        span.className = className;
+
+        while (this.firstChild) {
+            a.appendChild(
+                this.firstChild
+            );
+        };
+
+        a.append(
+            svg,
+            span
+        );
+
+        a.addEventListener("click", event => {
+            const menu = event.currentTarget
+                .closest("nav")
+                ?.querySelector("#menu");
+
+            // console.log("menu : ", menu);
+
+            menu?.classList.add("hidden");
+        });
+
+        this.appendChild(a);
+    }
+}
+
+customElements.define(
+    "ks-menu-item",
+    KSMenuItem
+);
+
+export default {};

package/bin/commands/template/v1/WebComponents/v6/nav/composeNavigationStory.js

@@ -0,0 +1,54 @@
+import createBrandTitle from "./createBrandTitle.js";
+import createMenuList from "./createMenuList.js";
+import createMenuToggleButton from "./createMenuToggleButton.js";
+import createNavigationBar from "./createNavigationBar.js";
+import createNavigationRow from "./createNavigationRow.js";
+import createNavigationWrapper from "./createNavigationWrapper.js";
+import readNavStoryFromElement from "./readNavStoryFromElement.js";
+
+const composeNavigationStory = ({ inElement }) => {
+    const story = readNavStoryFromElement({
+        inElement
+    });
+
+    const nav = createNavigationBar({
+        inClassName: story.navClass
+    });
+
+    const wrapper = createNavigationWrapper({
+        inClassName: story.outerClass
+    });
+
+    const row = createNavigationRow({
+        inClassName: story.innerClass
+    });
+
+    const brand = createBrandTitle({
+        inTitleId: story.titleId,
+        inTitle: story.title,
+        inClassName: story.brandClass
+    });
+
+    const menu = createMenuList({
+        inClassName: story.menuClass,
+        inExtraClass: story.menuExtraClass
+    });
+
+    const toggleButton = createMenuToggleButton({
+        inMenu: menu,
+        inClassName: story.buttonClass
+    });
+
+    row.append(
+        brand,
+        toggleButton,
+        menu
+    );
+
+    wrapper.appendChild(row);
+    nav.appendChild(wrapper);
+
+    return nav;
+};
+
+export default composeNavigationStory;

package/bin/commands/template/v1/WebComponents/v6/nav/createBrandTitle.js

@@ -0,0 +1,11 @@
+const createBrandTitle = ({ inTitleId, inTitle, inClassName }) => {
+    const brand = document.createElement("div");
+
+    brand.className = inClassName;
+    brand.id = inTitleId || "titlehtmlId";
+    brand.innerText = inTitle || "KeshavSoft";
+
+    return brand;
+};
+
+export default createBrandTitle;

package/bin/commands/template/v1/WebComponents/v6/nav/createMenuList.js

@@ -0,0 +1,10 @@
+const createMenuList = ({ inClassName, inExtraClass }) => {
+    const menu = document.createElement("ul");
+
+    menu.id = "menu";
+    menu.className = `${inClassName} ${inExtraClass || ""}`;
+
+    return menu;
+};
+
+export default createMenuList;

package/bin/commands/template/v1/WebComponents/v6/nav/createMenuToggleButton.js

@@ -0,0 +1,14 @@
+const createMenuToggleButton = ({ inMenu, inClassName }) => {
+    const button = document.createElement("button");
+
+    button.className = inClassName;
+    button.innerText = "☰";
+
+    button.addEventListener("click", () => {
+        inMenu.classList.toggle("hidden");
+    });
+
+    return button;
+};
+
+export default createMenuToggleButton;

package/bin/commands/template/v1/WebComponents/v6/nav/createNavigationBar.js

@@ -0,0 +1,9 @@
+const createNavigationBar = ({ inClassName }) => {
+    const nav = document.createElement("nav");
+
+    nav.className = inClassName;
+
+    return nav;
+};
+
+export default createNavigationBar;

package/bin/commands/template/v1/WebComponents/v6/nav/createNavigationRow.js

@@ -0,0 +1,9 @@
+const createNavigationRow = ({ inClassName }) => {
+    const innerDiv = document.createElement("div");
+
+    innerDiv.className = inClassName;
+
+    return innerDiv;
+};
+
+export default createNavigationRow;

package/bin/commands/template/v1/WebComponents/v6/nav/createNavigationWrapper.js

@@ -0,0 +1,9 @@
+const createNavigationWrapper = ({ inClassName }) => {
+    const outerDiv = document.createElement("div");
+
+    outerDiv.className = inClassName;
+
+    return outerDiv;
+};
+
+export default createNavigationWrapper;