@ptlm-azulejo/sidebar 0.0.1-alpha.87 → 0.0.1-alpha.89

package/dist/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as b, openBlock as r, createElementBlock as i, normalizeClass as a, createElementVNode as s, normalizeStyle as m, toDisplayString as p, createCommentVNode as l, Fragment as f, renderList as w, ref as g, computed as y, renderSlot as u, createVNode as h, unref as _, mergeDefaults as x } from "vue";
-import { AzIconButton as C } from "@ptlm-azulejo/icon-button";
+import { defineComponent as b, openBlock as n, createElementBlock as i, normalizeClass as o, createElementVNode as s, normalizeStyle as v, toDisplayString as u, createCommentVNode as d, Fragment as C, renderList as x, createVNode as h, unref as w, ref as O, computed as k, renderSlot as f, mergeDefaults as $ } from "vue";
+import { AzIconButton as S } from "@ptlm-azulejo/icon-button";
 import "@ptlm-azulejo/icon-button/style.css";
-const k = ["src", "alt"], S = /* @__PURE__ */ b({
+const I = ["src", "alt"], B = /* @__PURE__ */ b({
   __name: "SidebarHeader",
   props: {
     isCollapsed: { type: Boolean },
@@ -13,30 +13,30 @@ const k = ["src", "alt"], S = /* @__PURE__ */ b({
       sidebarHeaderLogo: "w-10 h-10 rounded flex-shrink-0",
       sidebarHeaderTitle: "overflow-hidden whitespace-nowrap transition-all duration-300 font-200 font-semibold whitespace-nowrap"
     };
-    return (n, c) => (r(), i("div", {
-      class: a(t.sidebarHeaderContainer)
+    return (r, l) => (n(), i("div", {
+      class: o(t.sidebarHeaderContainer)
     }, [
       s("img", {
-        class: a(t.sidebarHeaderLogo),
-        style: m(`background-color:${e.headerOptions.logoBgColor}`),
+        class: o(t.sidebarHeaderLogo),
+        style: v(`background-color:${e.headerOptions.logoBgColor}`),
         src: e.headerOptions.logoSrc,
         alt: e.headerOptions.logoAlt
-      }, null, 14, k),
-      e.isCollapsed ? l("", !0) : (r(), i("h2", {
+      }, null, 14, I),
+      e.isCollapsed ? d("", !0) : (n(), i("h2", {
         key: 0,
-        class: a(t.sidebarHeaderTitle)
-      }, p(e.headerOptions.sidebarTitle), 3))
+        class: o(t.sidebarHeaderTitle)
+      }, u(e.headerOptions.sidebarTitle), 3))
     ], 2));
   }
-}), v = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [c, o] of t)
-    n[c] = o;
-  return n;
-}, $ = /* @__PURE__ */ v(S, [["__scopeId", "data-v-1be64a50"]]), O = { key: 0 }, I = {
+}), y = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [l, a] of t)
+    r[l] = a;
+  return r;
+}, _ = /* @__PURE__ */ y(B, [["__scopeId", "data-v-1be64a50"]]), H = { key: 0 }, j = {
   role: "navigation",
   "aria-label": "sidebar shortcut items"
-}, H = ["id", "href", "target"], B = ["id"], L = /* @__PURE__ */ b({
+}, z = ["id", "href", "target"], L = ["id"], T = /* @__PURE__ */ b({
   __name: "SidebarShortcuts",
   props: {
     isCollapsed: { type: Boolean },
@@ -49,68 +49,221 @@ const k = ["src", "alt"], S = /* @__PURE__ */ b({
       shortcutItemIcon: "text-[24px] az az-",
       shortcutItemLabel: "font-semibold text-[10px]"
     };
-    return (n, c) => e.shortcutOptions.items && e.shortcutOptions.items.length > 0 ? (r(), i("section", O, [
-      s("nav", I, [
+    return (r, l) => e.shortcutOptions.items && e.shortcutOptions.items.length > 0 ? (n(), i("section", H, [
+      s("nav", j, [
         s("ul", {
           role: "menu",
-          class: a(t.shortcutList)
+          class: o(t.shortcutList)
         }, [
-          (r(!0), i(f, null, w(e.shortcutOptions.items, (o) => (r(), i("div", {
-            key: o.id,
+          (n(!0), i(C, null, x(e.shortcutOptions.items, (a) => (n(), i("div", {
+            key: a.id,
             class: ""
           }, [
-            o.type === "link" ? (r(), i("a", {
+            a.type === "link" ? (n(), i("a", {
               key: 0,
-              id: `shortcut-${o.id}`,
-              href: o.link,
-              target: o.target
+              id: `shortcut-${a.id}`,
+              href: a.link,
+              target: a.target
             }, [
               s("div", {
-                class: a(t.shortcutItem)
+                class: o(t.shortcutItem)
               }, [
                 s("i", {
-                  class: a(`${t.shortcutItemIcon}${o.icon}`)
+                  class: o(`${t.shortcutItemIcon}${a.icon}`)
                 }, null, 2),
                 s("span", {
-                  class: a([
+                  class: o([
                     "inline-block overflow-hidden whitespace-nowrap transition-all duration-300",
                     e.isCollapsed ? "max-w-0 opacity-0" : "max-w-xs opacity-100"
                   ])
                 }, [
                   s("p", {
-                    class: a(t.shortcutItemLabel)
-                  }, p(o.label), 3)
+                    class: o(t.shortcutItemLabel)
+                  }, u(a.label), 3)
                 ], 2)
               ], 2)
-            ], 8, H)) : l("", !0),
-            o.type === "button" ? (r(), i("button", {
+            ], 8, z)) : d("", !0),
+            a.type === "button" ? (n(), i("button", {
               key: 1,
-              id: `shortcut-${o.id}`
+              id: `shortcut-${a.id}`
             }, [
               s("div", {
-                class: a(t.shortcutItem)
+                class: o(t.shortcutItem)
               }, [
                 s("i", {
-                  class: a(`${t.shortcutItemIcon}${o.icon}`)
+                  class: o(`${t.shortcutItemIcon}${a.icon}`)
                 }, null, 2),
                 s("span", {
-                  class: a([
+                  class: o([
                     "inline-block overflow-hidden whitespace-nowrap transition-all duration-300",
                     e.isCollapsed ? "max-w-0 opacity-0" : "max-w-xs opacity-100"
                   ])
                 }, [
                   s("p", {
-                    class: a(t.shortcutItemLabel)
-                  }, p(o.label), 3)
+                    class: o(t.shortcutItemLabel)
+                  }, u(a.label), 3)
                 ], 2)
               ], 2)
-            ], 8, B)) : l("", !0)
+            ], 8, L)) : d("", !0)
           ]))), 128))
         ], 2)
       ])
-    ])) : l("", !0);
+    ])) : d("", !0);
   }
-}), z = {
+}), A = ["id", "href", "target"], N = ["onClick"], E = /* @__PURE__ */ b({
+  __name: "SidebarNavigationItems",
+  props: {
+    isCollapsed: { type: Boolean },
+    navigationOptions: {}
+  },
+  setup(e) {
+    const t = {
+      container: "h-10 px-2 flex items-center justify-between",
+      containerExpanded: "",
+      containerCollapsed: "",
+      itemContainer: "flex items-center justify-start gap-2 text-[#404040] cursor-pointer",
+      icon: "text-[24px] az az-",
+      label: "font-semibold text-[14px]"
+    };
+    return (r, l) => (n(!0), i(C, null, x(e.navigationOptions.items, (a, c) => {
+      var p;
+      return n(), i("li", {
+        key: (p = a.id) != null ? p : c,
+        class: o([
+          t.container,
+          e.isCollapsed ? t.containerCollapsed : t.containerExpanded
+        ])
+      }, [
+        a.type === "link" ? (n(), i("a", {
+          key: 0,
+          id: `navigation-${a.id}`,
+          href: a.link,
+          target: a.target
+        }, [
+          s("div", {
+            class: o(t.itemContainer)
+          }, [
+            s("i", {
+              class: o(`${t.icon}${a.icon}`)
+            }, null, 2),
+            s("p", {
+              class: o(t.label)
+            }, u(a.label), 3)
+          ], 2)
+        ], 8, A)) : d("", !0),
+        a.type === "button" ? (n(), i("button", {
+          key: 1,
+          onClick: a.onClick
+        }, [
+          s("div", {
+            class: o(t.itemContainer)
+          }, [
+            s("i", {
+              class: o(`${t.icon}${a.icon}`)
+            }, null, 2),
+            s("p", {
+              class: o(t.label)
+            }, u(a.label), 3)
+          ], 2)
+        ], 8, N)) : d("", !0)
+      ], 2);
+    }), 128));
+  }
+}), F = ["src", "alt"], D = /* @__PURE__ */ b({
+  __name: "SidebarFooterAvatar",
+  props: {
+    avatarUrl: {},
+    name: {},
+    initials: {},
+    initialsBG: {}
+  },
+  setup(e) {
+    const t = {
+      container: "h-8 w-8 rounded-full",
+      avatarImg: "h-8 w-8 rounded-full",
+      avatarInitials: "h-full w-full flex items-center justify-center rounded-full"
+    };
+    return (r, l) => {
+      var a;
+      return n(), i("div", {
+        class: o(t.container)
+      }, [
+        e.avatarUrl ? (n(), i("img", {
+          key: 0,
+          class: o(t.avatarImg),
+          src: e.avatarUrl,
+          alt: (a = e.name) != null ? a : "User avatar"
+        }, null, 10, F)) : (n(), i("p", {
+          key: 1,
+          class: o(t.avatarInitials),
+          style: v(`background-color: ${e.initialsBG}`)
+        }, u(e.initials), 7))
+      ], 2);
+    };
+  }
+}), U = { class: "w-8" }, G = /* @__PURE__ */ b({
+  __name: "SidebarFooter",
+  props: {
+    isCollapsed: { type: Boolean },
+    footerOptions: {}
+  },
+  emits: ["toggleSidebarCollapsed"],
+  setup(e, { emit: t }) {
+    const r = t, l = {
+      containerExpanded: "w-full flex justify-between items-center",
+      containerCollapsed: "flex flex-col items-center",
+      avatarNameContainer: "flex gap-2",
+      nameContainer: "flex-1",
+      name: "p-0 font-semibold text-[12px]",
+      jobTitle: "p-0 text-[12px] text-gray-500",
+      collapseButton: "cursor-pointer",
+      collapsedCollapseButton: "!w-8 rotate-180 transition-transform duration-300",
+      expandedCollapsedButton: "w-10"
+    };
+    return (a, c) => {
+      var p, m, g;
+      return n(), i("div", {
+        class: o(
+          l[e.isCollapsed ? "containerCollapsed" : "containerExpanded"]
+        )
+      }, [
+        s("div", {
+          class: o(l.avatarNameContainer)
+        }, [
+          h(D, {
+            "avatar-url": e.footerOptions.avatarUrl,
+            initials: (p = e.footerOptions.initials) != null ? p : "AZ",
+            "initials-b-g": e.footerOptions.initialsBG
+          }, null, 8, ["avatar-url", "initials", "initials-b-g"]),
+          e.isCollapsed ? d("", !0) : (n(), i("div", {
+            key: 0,
+            class: o(l.nameContainer)
+          }, [
+            s("p", {
+              class: o(l.name)
+            }, u((m = e.footerOptions.name) != null ? m : "First Last"), 3),
+            s("p", {
+              class: o(l.jobTitle)
+            }, u((g = e.footerOptions.jobTitle) != null ? g : "Job Title"), 3)
+          ], 2))
+        ], 2),
+        s("div", U, [
+          h(w(S), {
+            class: o([
+              l.collapseButton,
+              e.isCollapsed ? l.collapsedCollapseButton : l.expandedCollapsedButton
+            ]),
+            ghost: "",
+            appearance: "inverse",
+            "aria-label": "Sidebar close button",
+            "icon-class": "az-ui-sidebar-collapse",
+            onClick: c[0] || (c[0] = () => r("toggleSidebarCollapsed"))
+          }, null, 8, ["class"])
+        ])
+      ], 2);
+    };
+  }
+}), V = {
   showHeader: !0,
   headerOptions: () => ({
     showSearch: !0,
@@ -130,77 +283,93 @@ const k = ["src", "alt"], S = /* @__PURE__ */ b({
         onClick: () => console.log("dashboard")
       }
     ]
-  }
-}, A = { class: "" }, D = { class: "" }, T = {
+  },
+  navigationOptions: {
+    items: [
+      {
+        id: "dashboard",
+        label: "Dashboard",
+        icon: "ui-chevron-left",
+        type: "button",
+        onClick: () => console.log("dashboard")
+      }
+    ]
+  },
+  footerOptions: { initials: "AZ" }
+}, P = { class: "" }, Z = {
   key: 0,
   class: ""
-}, j = {
+}, J = {
   key: 0,
   class: ""
-}, N = { class: "" }, V = {
+}, W = { class: "" }, q = {
   class: "",
   role: "navigation",
   "aria-label": "navigation items"
-}, E = { class: "" }, P = { class: "flex items-center justify-between" }, F = /* @__PURE__ */ b({
+}, K = { class: "" }, M = /* @__PURE__ */ b({
   __name: "index",
-  props: /* @__PURE__ */ x({
+  props: /* @__PURE__ */ $({
     showHeader: { type: Boolean },
     headerOptions: {},
     showShortcuts: { type: Boolean },
-    shortcutOptions: {}
-  }, z),
+    shortcutOptions: {},
+    navigationOptions: {},
+    footerOptions: {}
+  }, V),
   setup(e) {
-    const t = g(!1), n = y(() => t.value ? "4rem" : "300px"), c = {
-      sidebarContainer: "p-3 bg-white border-r transition-[width] duration-300 ease-in-out overflow-hidden whitespace-nowrap"
+    const t = O(!1), r = k(() => t.value ? "4rem" : "300px"), l = {
+      sidebarContainer: "h-full flex flex-col gap-3 p-3 bg-white border-r transition-[width] duration-500 ease-in-out overflow-hidden whitespace-nowrap",
+      footer: "pt-2 flex items-center justify-between border-t border-[#999999]"
     };
-    function o() {
+    function a() {
       t.value = !t.value;
     }
-    return (d, W) => (r(), i("aside", {
-      class: a(c.sidebarContainer),
-      style: m({ width: n.value })
+    return (c, p) => (n(), i("aside", {
+      class: o(l.sidebarContainer),
+      style: v({ width: r.value })
     }, [
-      s("div", A, [
-        s("div", D, [
-          u(d.$slots, "header", {}, void 0, !0),
-          e.showHeader ? (r(), i("div", T, [
-            h($, {
+      s("div", P, [
+        f(c.$slots, "header", {}, void 0, !0),
+        e.showHeader ? (n(), i("div", Z, [
+          h(_, {
+            "is-collapsed": t.value,
+            "header-options": e.headerOptions
+          }, null, 8, ["is-collapsed", "header-options"])
+        ])) : d("", !0)
+      ]),
+      s("div", null, [
+        f(c.$slots, "shortcuts", {}, void 0, !0),
+        e.showShortcuts ? (n(), i("div", J, [
+          h(T, {
+            "is-collapsed": t.value,
+            "shortcut-options": e.shortcutOptions
+          }, null, 8, ["is-collapsed", "shortcut-options"])
+        ])) : d("", !0)
+      ]),
+      s("section", W, [
+        s("nav", q, [
+          s("ul", K, [
+            h(E, {
               "is-collapsed": t.value,
-              "header-options": e.headerOptions
-            }, null, 8, ["is-collapsed", "header-options"])
-          ])) : l("", !0)
-        ]),
-        s("div", null, [
-          u(d.$slots, "shortcuts", {}, void 0, !0),
-          e.showShortcuts ? (r(), i("div", j, [
-            h(L, {
-              "is-collapsed": t.value,
-              "shortcut-options": e.shortcutOptions
-            }, null, 8, ["is-collapsed", "shortcut-options"])
-          ])) : l("", !0)
-        ]),
-        s("section", N, [
-          s("nav", V, [
-            s("ul", E, [
-              u(d.$slots, "nav", {}, void 0, !0)
-            ])
+              navigationOptions: e.navigationOptions
+            }, null, 8, ["is-collapsed", "navigationOptions"]),
+            f(c.$slots, "nav", {}, void 0, !0)
           ])
-        ]),
-        s("div", P, [
-          u(d.$slots, "footer", {}, void 0, !0),
-          h(_(C), {
-            class: "cursor-pointer",
-            ghost: "",
-            appearance: "inverse",
-            "aria-label": "Sidebar close button",
-            "icon-class": "az-ui-sidebar-collapse",
-            onClick: o
-          })
         ])
-      ])
+      ]),
+      s("div", {
+        class: o(l.footer)
+      }, [
+        f(c.$slots, "footer", {}, void 0, !0),
+        h(G, {
+          "is-collapsed": t.value,
+          "footer-options": e.footerOptions,
+          onToggleSidebarCollapsed: a
+        }, null, 8, ["is-collapsed", "footer-options"])
+      ], 2)
     ], 6));
   }
-}), K = /* @__PURE__ */ v(F, [["__scopeId", "data-v-24046845"]]);
+}), Y = /* @__PURE__ */ y(M, [["__scopeId", "data-v-3107cbc1"]]);
 export {
-  K as AzSidebar
+  Y as AzSidebar
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@ptlm-azulejo/icon-button"),require("@ptlm-azulejo/icon-button/style.css")):typeof define=="function"&&define.amd?define(["exports","vue","@ptlm-azulejo/icon-button","@ptlm-azulejo/icon-button/style.css"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.sidebar={},a.Vue,a["icon-button"]))})(this,function(a,e,c){"use strict";const d=["src","alt"],m=e.defineComponent({__name:"SidebarHeader",props:{isCollapsed:{type:Boolean},headerOptions:{}},setup(t){const o={sidebarHeaderContainer:"flex items-center gap-2",sidebarHeaderLogo:"w-10 h-10 rounded flex-shrink-0",sidebarHeaderTitle:"overflow-hidden whitespace-nowrap transition-all duration-300 font-200 font-semibold whitespace-nowrap"};return(n,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.sidebarHeaderContainer)},[e.createElementVNode("img",{class:e.normalizeClass(o.sidebarHeaderLogo),style:e.normalizeStyle(`background-color:${t.headerOptions.logoBgColor}`),src:t.headerOptions.logoSrc,alt:t.headerOptions.logoAlt},null,14,d),t.isCollapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("h2",{key:0,class:e.normalizeClass(o.sidebarHeaderTitle)},e.toDisplayString(t.headerOptions.sidebarTitle),3))],2))}}),i=(t,o)=>{const n=t.__vccOpts||t;for(const[l,s]of o)n[l]=s;return n},h=i(m,[["__scopeId","data-v-1be64a50"]]),p={key:0},b={role:"navigation","aria-label":"sidebar shortcut items"},f=["id","href","target"],u=["id"],C=e.defineComponent({__name:"SidebarShortcuts",props:{isCollapsed:{type:Boolean},shortcutOptions:{}},setup(t){const o={shortcutList:"h-12 flex items-center justify-start",shortcutItem:"h-12 w-[70px] flex flex-col items-center justify-start gap-1",shortcutItemIcon:"text-[24px] az az-",shortcutItemLabel:"font-semibold text-[10px]"};return(n,l)=>t.shortcutOptions.items&&t.shortcutOptions.items.length>0?(e.openBlock(),e.createElementBlock("section",p,[e.createElementVNode("nav",b,[e.createElementVNode("ul",{role:"menu",class:e.normalizeClass(o.shortcutList)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.shortcutOptions.items,s=>(e.openBlock(),e.createElementBlock("div",{key:s.id,class:""},[s.type==="link"?(e.openBlock(),e.createElementBlock("a",{key:0,id:`shortcut-${s.id}`,href:s.link,target:s.target},[e.createElementVNode("div",{class:e.normalizeClass(o.shortcutItem)},[e.createElementVNode("i",{class:e.normalizeClass(`${o.shortcutItemIcon}${s.icon}`)},null,2),e.createElementVNode("span",{class:e.normalizeClass(["inline-block overflow-hidden whitespace-nowrap transition-all duration-300",t.isCollapsed?"max-w-0 opacity-0":"max-w-xs opacity-100"])},[e.createElementVNode("p",{class:e.normalizeClass(o.shortcutItemLabel)},e.toDisplayString(s.label),3)],2)],2)],8,f)):e.createCommentVNode("",!0),s.type==="button"?(e.openBlock(),e.createElementBlock("button",{key:1,id:`shortcut-${s.id}`},[e.createElementVNode("div",{class:e.normalizeClass(o.shortcutItem)},[e.createElementVNode("i",{class:e.normalizeClass(`${o.shortcutItemIcon}${s.icon}`)},null,2),e.createElementVNode("span",{class:e.normalizeClass(["inline-block overflow-hidden whitespace-nowrap transition-all duration-300",t.isCollapsed?"max-w-0 opacity-0":"max-w-xs opacity-100"])},[e.createElementVNode("p",{class:e.normalizeClass(o.shortcutItemLabel)},e.toDisplayString(s.label),3)],2)],2)],8,u)):e.createCommentVNode("",!0)]))),128))],2)])])):e.createCommentVNode("",!0)}}),k={showHeader:!0,headerOptions:()=>({showSearch:!0,logoSrc:"",logoAlt:"",logoBgColor:"",sidebarTitle:"Product name"}),showShortcuts:!0,shortcutOptions:{items:[{id:"dashboard",label:"Dashboard",icon:"ui-chevron-left",type:"button",onClick:()=>console.log("dashboard")}]}},y={class:""},g={class:""},w={key:0,class:""},E={key:0,class:""},V={class:""},_={class:"",role:"navigation","aria-label":"navigation items"},B={class:""},N={class:"flex items-center justify-between"},S=i(e.defineComponent({__name:"index",props:e.mergeDefaults({showHeader:{type:Boolean},headerOptions:{},showShortcuts:{type:Boolean},shortcutOptions:{}},k),setup(t){const o=e.ref(!1),n=e.computed(()=>o.value?"4rem":"300px"),l={sidebarContainer:"p-3 bg-white border-r transition-[width] duration-300 ease-in-out overflow-hidden whitespace-nowrap"};function s(){o.value=!o.value}return(r,x)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(l.sidebarContainer),style:e.normalizeStyle({width:n.value})},[e.createElementVNode("div",y,[e.createElementVNode("div",g,[e.renderSlot(r.$slots,"header",{},void 0,!0),t.showHeader?(e.openBlock(),e.createElementBlock("div",w,[e.createVNode(h,{"is-collapsed":o.value,"header-options":t.headerOptions},null,8,["is-collapsed","header-options"])])):e.createCommentVNode("",!0)]),e.createElementVNode("div",null,[e.renderSlot(r.$slots,"shortcuts",{},void 0,!0),t.showShortcuts?(e.openBlock(),e.createElementBlock("div",E,[e.createVNode(C,{"is-collapsed":o.value,"shortcut-options":t.shortcutOptions},null,8,["is-collapsed","shortcut-options"])])):e.createCommentVNode("",!0)]),e.createElementVNode("section",V,[e.createElementVNode("nav",_,[e.createElementVNode("ul",B,[e.renderSlot(r.$slots,"nav",{},void 0,!0)])])]),e.createElementVNode("div",N,[e.renderSlot(r.$slots,"footer",{},void 0,!0),e.createVNode(e.unref(c.AzIconButton),{class:"cursor-pointer",ghost:"",appearance:"inverse","aria-label":"Sidebar close button","icon-class":"az-ui-sidebar-collapse",onClick:s})])])],6))}}),[["__scopeId","data-v-24046845"]]);a.AzSidebar=S,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
+(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@ptlm-azulejo/icon-button"),require("@ptlm-azulejo/icon-button/style.css")):typeof define=="function"&&define.amd?define(["exports","vue","@ptlm-azulejo/icon-button","@ptlm-azulejo/icon-button/style.css"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.sidebar={},i.Vue,i["icon-button"]))})(this,function(i,e,p){"use strict";const h=["src","alt"],f=e.defineComponent({__name:"SidebarHeader",props:{isCollapsed:{type:Boolean},headerOptions:{}},setup(t){const o={sidebarHeaderContainer:"flex items-center gap-2",sidebarHeaderLogo:"w-10 h-10 rounded flex-shrink-0",sidebarHeaderTitle:"overflow-hidden whitespace-nowrap transition-all duration-300 font-200 font-semibold whitespace-nowrap"};return(l,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.sidebarHeaderContainer)},[e.createElementVNode("img",{class:e.normalizeClass(o.sidebarHeaderLogo),style:e.normalizeStyle(`background-color:${t.headerOptions.logoBgColor}`),src:t.headerOptions.logoSrc,alt:t.headerOptions.logoAlt},null,14,h),t.isCollapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("h2",{key:0,class:e.normalizeClass(o.sidebarHeaderTitle)},e.toDisplayString(t.headerOptions.sidebarTitle),3))],2))}}),c=(t,o)=>{const l=t.__vccOpts||t;for(const[n,a]of o)l[n]=a;return l},C=c(f,[["__scopeId","data-v-1be64a50"]]),b={key:0},g={role:"navigation","aria-label":"sidebar shortcut items"},k=["id","href","target"],y=["id"],B=e.defineComponent({__name:"SidebarShortcuts",props:{isCollapsed:{type:Boolean},shortcutOptions:{}},setup(t){const o={shortcutList:"h-12 flex items-center justify-start",shortcutItem:"h-12 w-[70px] flex flex-col items-center justify-start gap-1",shortcutItemIcon:"text-[24px] az az-",shortcutItemLabel:"font-semibold text-[10px]"};return(l,n)=>t.shortcutOptions.items&&t.shortcutOptions.items.length>0?(e.openBlock(),e.createElementBlock("section",b,[e.createElementVNode("nav",g,[e.createElementVNode("ul",{role:"menu",class:e.normalizeClass(o.shortcutList)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.shortcutOptions.items,a=>(e.openBlock(),e.createElementBlock("div",{key:a.id,class:""},[a.type==="link"?(e.openBlock(),e.createElementBlock("a",{key:0,id:`shortcut-${a.id}`,href:a.link,target:a.target},[e.createElementVNode("div",{class:e.normalizeClass(o.shortcutItem)},[e.createElementVNode("i",{class:e.normalizeClass(`${o.shortcutItemIcon}${a.icon}`)},null,2),e.createElementVNode("span",{class:e.normalizeClass(["inline-block overflow-hidden whitespace-nowrap transition-all duration-300",t.isCollapsed?"max-w-0 opacity-0":"max-w-xs opacity-100"])},[e.createElementVNode("p",{class:e.normalizeClass(o.shortcutItemLabel)},e.toDisplayString(a.label),3)],2)],2)],8,k)):e.createCommentVNode("",!0),a.type==="button"?(e.openBlock(),e.createElementBlock("button",{key:1,id:`shortcut-${a.id}`},[e.createElementVNode("div",{class:e.normalizeClass(o.shortcutItem)},[e.createElementVNode("i",{class:e.normalizeClass(`${o.shortcutItemIcon}${a.icon}`)},null,2),e.createElementVNode("span",{class:e.normalizeClass(["inline-block overflow-hidden whitespace-nowrap transition-all duration-300",t.isCollapsed?"max-w-0 opacity-0":"max-w-xs opacity-100"])},[e.createElementVNode("p",{class:e.normalizeClass(o.shortcutItemLabel)},e.toDisplayString(a.label),3)],2)],2)],8,y)):e.createCommentVNode("",!0)]))),128))],2)])])):e.createCommentVNode("",!0)}}),x=["id","href","target"],E=["onClick"],N=e.defineComponent({__name:"SidebarNavigationItems",props:{isCollapsed:{type:Boolean},navigationOptions:{}},setup(t){const o={container:"h-10 px-2 flex items-center justify-between",containerExpanded:"",containerCollapsed:"",itemContainer:"flex items-center justify-start gap-2 text-[#404040] cursor-pointer",icon:"text-[24px] az az-",label:"font-semibold text-[14px]"};return(l,n)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navigationOptions.items,(a,s)=>{var r;return e.openBlock(),e.createElementBlock("li",{key:(r=a.id)!=null?r:s,class:e.normalizeClass([o.container,t.isCollapsed?o.containerCollapsed:o.containerExpanded])},[a.type==="link"?(e.openBlock(),e.createElementBlock("a",{key:0,id:`navigation-${a.id}`,href:a.link,target:a.target},[e.createElementVNode("div",{class:e.normalizeClass(o.itemContainer)},[e.createElementVNode("i",{class:e.normalizeClass(`${o.icon}${a.icon}`)},null,2),e.createElementVNode("p",{class:e.normalizeClass(o.label)},e.toDisplayString(a.label),3)],2)],8,x)):e.createCommentVNode("",!0),a.type==="button"?(e.openBlock(),e.createElementBlock("button",{key:1,onClick:a.onClick},[e.createElementVNode("div",{class:e.normalizeClass(o.itemContainer)},[e.createElementVNode("i",{class:e.normalizeClass(`${o.icon}${a.icon}`)},null,2),e.createElementVNode("p",{class:e.normalizeClass(o.label)},e.toDisplayString(a.label),3)],2)],8,E)):e.createCommentVNode("",!0)],2)}),128))}}),z=["src","alt"],V=e.defineComponent({__name:"SidebarFooterAvatar",props:{avatarUrl:{},name:{},initials:{},initialsBG:{}},setup(t){const o={container:"h-8 w-8 rounded-full",avatarImg:"h-8 w-8 rounded-full",avatarInitials:"h-full w-full flex items-center justify-center rounded-full"};return(l,n)=>{var a;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.container)},[t.avatarUrl?(e.openBlock(),e.createElementBlock("img",{key:0,class:e.normalizeClass(o.avatarImg),src:t.avatarUrl,alt:(a=t.name)!=null?a:"User avatar"},null,10,z)):(e.openBlock(),e.createElementBlock("p",{key:1,class:e.normalizeClass(o.avatarInitials),style:e.normalizeStyle(`background-color: ${t.initialsBG}`)},e.toDisplayString(t.initials),7))],2)}}}),w={class:"w-8"},S=e.defineComponent({__name:"SidebarFooter",props:{isCollapsed:{type:Boolean},footerOptions:{}},emits:["toggleSidebarCollapsed"],setup(t,{emit:o}){const l=o,n={containerExpanded:"w-full flex justify-between items-center",containerCollapsed:"flex flex-col items-center",avatarNameContainer:"flex gap-2",nameContainer:"flex-1",name:"p-0 font-semibold text-[12px]",jobTitle:"p-0 text-[12px] text-gray-500",collapseButton:"cursor-pointer",collapsedCollapseButton:"!w-8 rotate-180 transition-transform duration-300",expandedCollapsedButton:"w-10"};return(a,s)=>{var r,d,m;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(n[t.isCollapsed?"containerCollapsed":"containerExpanded"])},[e.createElementVNode("div",{class:e.normalizeClass(n.avatarNameContainer)},[e.createVNode(V,{"avatar-url":t.footerOptions.avatarUrl,initials:(r=t.footerOptions.initials)!=null?r:"AZ","initials-b-g":t.footerOptions.initialsBG},null,8,["avatar-url","initials","initials-b-g"]),t.isCollapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(n.nameContainer)},[e.createElementVNode("p",{class:e.normalizeClass(n.name)},e.toDisplayString((d=t.footerOptions.name)!=null?d:"First Last"),3),e.createElementVNode("p",{class:e.normalizeClass(n.jobTitle)},e.toDisplayString((m=t.footerOptions.jobTitle)!=null?m:"Job Title"),3)],2))],2),e.createElementVNode("div",w,[e.createVNode(e.unref(p.AzIconButton),{class:e.normalizeClass([n.collapseButton,t.isCollapsed?n.collapsedCollapseButton:n.expandedCollapsedButton]),ghost:"",appearance:"inverse","aria-label":"Sidebar close button","icon-class":"az-ui-sidebar-collapse",onClick:s[0]||(s[0]=()=>l("toggleSidebarCollapsed"))},null,8,["class"])])],2)}}}),u={showHeader:!0,headerOptions:()=>({showSearch:!0,logoSrc:"",logoAlt:"",logoBgColor:"",sidebarTitle:"Product name"}),showShortcuts:!0,shortcutOptions:{items:[{id:"dashboard",label:"Dashboard",icon:"ui-chevron-left",type:"button",onClick:()=>console.log("dashboard")}]},navigationOptions:{items:[{id:"dashboard",label:"Dashboard",icon:"ui-chevron-left",type:"button",onClick:()=>console.log("dashboard")}]},footerOptions:{initials:"AZ"}},O={class:""},$={key:0,class:""},I={key:0,class:""},_={class:""},j={class:"",role:"navigation","aria-label":"navigation items"},D={class:""},H=c(e.defineComponent({__name:"index",props:e.mergeDefaults({showHeader:{type:Boolean},headerOptions:{},showShortcuts:{type:Boolean},shortcutOptions:{},navigationOptions:{},footerOptions:{}},u),setup(t){const o=e.ref(!1),l=e.computed(()=>o.value?"4rem":"300px"),n={sidebarContainer:"h-full flex flex-col gap-3 p-3 bg-white border-r transition-[width] duration-500 ease-in-out overflow-hidden whitespace-nowrap",footer:"pt-2 flex items-center justify-between border-t border-[#999999]"};function a(){o.value=!o.value}return(s,r)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(n.sidebarContainer),style:e.normalizeStyle({width:l.value})},[e.createElementVNode("div",O,[e.renderSlot(s.$slots,"header",{},void 0,!0),t.showHeader?(e.openBlock(),e.createElementBlock("div",$,[e.createVNode(C,{"is-collapsed":o.value,"header-options":t.headerOptions},null,8,["is-collapsed","header-options"])])):e.createCommentVNode("",!0)]),e.createElementVNode("div",null,[e.renderSlot(s.$slots,"shortcuts",{},void 0,!0),t.showShortcuts?(e.openBlock(),e.createElementBlock("div",I,[e.createVNode(B,{"is-collapsed":o.value,"shortcut-options":t.shortcutOptions},null,8,["is-collapsed","shortcut-options"])])):e.createCommentVNode("",!0)]),e.createElementVNode("section",_,[e.createElementVNode("nav",j,[e.createElementVNode("ul",D,[e.createVNode(N,{"is-collapsed":o.value,navigationOptions:t.navigationOptions},null,8,["is-collapsed","navigationOptions"]),e.renderSlot(s.$slots,"nav",{},void 0,!0)])])]),e.createElementVNode("div",{class:e.normalizeClass(n.footer)},[e.renderSlot(s.$slots,"footer",{},void 0,!0),e.createVNode(S,{"is-collapsed":o.value,"footer-options":t.footerOptions,onToggleSidebarCollapsed:a},null,8,["is-collapsed","footer-options"])],2)],6))}}),[["__scopeId","data-v-3107cbc1"]]);i.AzSidebar=H,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/dist/src/components/SidebarFooter.vue.d.ts

@@ -0,0 +1,18 @@
+import { SidebarFooterProps } from '../models/sidebar-footer.models';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SidebarFooterProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggleSidebarCollapsed: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SidebarFooterProps>>> & Readonly<{
+    onToggleSidebarCollapsed?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=SidebarFooter.vue.d.ts.map

package/dist/src/components/SidebarFooter.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFooter.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarFooter.vue"],"names":[],"mappings":"AAGA,OAAO,qCAAqC,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;;;;;;AA0KrE,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/src/components/SidebarFooterAvatar.vue.d.ts

@@ -0,0 +1,14 @@
+import { SidebarFooterAvatarProps } from '../models/sidebar-footer.models';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SidebarFooterAvatarProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SidebarFooterAvatarProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=SidebarFooterAvatar.vue.d.ts.map

package/dist/src/components/SidebarFooterAvatar.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFooterAvatar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarFooterAvatar.vue"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;;AAkF3E,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/src/components/SidebarNavigationItems.vue.d.ts

@@ -0,0 +1,14 @@
+import { SidebarNavigationItemsProps } from '../models/sidebar-navigation-items.models';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SidebarNavigationItemsProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SidebarNavigationItemsProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=SidebarNavigationItems.vue.d.ts.map

package/dist/src/components/SidebarNavigationItems.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavigationItems.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarNavigationItems.vue"],"names":[],"mappings":"AAGA,OAAO,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAC;;AAkKxF,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/src/index.stories.d.ts

@@ -10,4 +10,5 @@ export declare const WithoutSearch: Story;
 export declare const WithShortcuts: Story;
 export declare const CustomHeader: Story;
 export declare const WithFooter: Story;
+export declare const WithFooterAvatar: Story;
 //# sourceMappingURL=index.stories.d.ts.map

package/dist/src/index.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,OAAO,MAAM,aAAa,CAAC;AAgClC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAgL9B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC"}
+{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,OAAO,MAAM,aAAa,CAAC;AAuFlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAyL9B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC"}

package/dist/src/index.vue.d.ts

@@ -25,6 +25,18 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             onClick: () => void;
         }[];
     };
+    navigationOptions: {
+        items: {
+            id: string;
+            label: string;
+            icon: string;
+            type: string;
+            onClick: () => void;
+        }[];
+    };
+    footerOptions: {
+        initials: string;
+    };
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SidebarProps>, {
     showHeader: boolean;
     headerOptions: () => {
@@ -44,9 +56,23 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             onClick: () => void;
         }[];
     };
+    navigationOptions: {
+        items: {
+            id: string;
+            label: string;
+            icon: string;
+            type: string;
+            onClick: () => void;
+        }[];
+    };
+    footerOptions: {
+        initials: string;
+    };
 }>>> & Readonly<{}>, {
     headerOptions: import('./models/sidebar-header.models').SidebarHeaderOptions;
     shortcutOptions: import('./models/sidebar-shortcuts.models').SidebarShortcutsOptions;
+    navigationOptions: import('./models/sidebar-navigation-items.models').SidebarNavigationItemsOptions;
+    footerOptions: import('./models/sidebar-footer.models').SidebarFooterOptions;
     showHeader: boolean;
     showShortcuts: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/src/index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"AAQA,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EAAuB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAuB5E,iBAAS,cAAc;oBAuMM,GAAG;uBACA,GAAG;iBACT,GAAG;oBACA,GAAG;EAK/B;AAeD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"AASA,OAAO,EAAuB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAwB5E,iBAAS,cAAc;oBAwMM,GAAG;uBACA,GAAG;iBACT,GAAG;oBACA,GAAG;EAK/B;AAgBD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/src/models/sidebar-footer.models.d.ts

@@ -0,0 +1,18 @@
+export interface SidebarFooterProps {
+    isCollapsed: boolean;
+    footerOptions: SidebarFooterOptions;
+}
+export interface SidebarFooterOptions {
+    name?: string;
+    jobTitle?: string;
+    avatarUrl?: string;
+    initials?: string;
+    initialsBG?: string;
+}
+export type SidebarFooterAvatarProps = {
+    avatarUrl?: string;
+    name?: string;
+    initials: string;
+    initialsBG?: string;
+};
+//# sourceMappingURL=sidebar-footer.models.d.ts.map

package/dist/src/models/sidebar-footer.models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-footer.models.d.ts","sourceRoot":"","sources":["../../../src/models/sidebar-footer.models.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,oBAAoB,CAAC;CACrC;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/dist/src/models/sidebar-navigation-items.models.d.ts

@@ -0,0 +1,22 @@
+export type SidebarNavigationItemsProps = {
+    isCollapsed: boolean;
+    navigationOptions: SidebarNavigationItemsOptions;
+};
+export type SidebarNavigationItemsOptions = {
+    items: SidebarNavigationItem[];
+};
+export type SidebarNavigationItem = {
+    id: string;
+    label: string;
+    icon: string;
+    subItems: Omit<SidebarNavigationItem, "subItems">[];
+} & SidebarNavigationItemTypeOption;
+export type SidebarNavigationItemTypeOption = {
+    type: "button";
+    onClick: () => void;
+} | {
+    type: "link";
+    link?: string;
+    target: "_blank" | "_self" | "_parent" | "_top";
+};
+//# sourceMappingURL=sidebar-navigation-items.models.d.ts.map

package/dist/src/models/sidebar-navigation-items.models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-navigation-items.models.d.ts","sourceRoot":"","sources":["../../../src/models/sidebar-navigation-items.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,6BAA6B,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,EAAE,CAAC;CACrD,GAAG,+BAA+B,CAAC;AAEpC,MAAM,MAAM,+BAA+B,GACvC;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CACjD,CAAC"}

package/dist/src/models/sidebar.models.d.ts

@@ -1,4 +1,6 @@
+import { SidebarFooterOptions } from './sidebar-footer.models';
 import { SidebarHeaderOptions } from './sidebar-header.models';
+import { SidebarNavigationItemsOptions } from './sidebar-navigation-items.models';
 import { SidebarShortcutsOptions } from './sidebar-shortcuts.models';
 
 export type SidebarProps = {
@@ -6,6 +8,8 @@ export type SidebarProps = {
     headerOptions?: SidebarHeaderOptions;
     showShortcuts?: boolean;
     shortcutOptions?: SidebarShortcutsOptions;
+    navigationOptions?: SidebarNavigationItemsOptions;
+    footerOptions?: SidebarFooterOptions;
 };
 export declare const DefaultSidebarProps: {
     showHeader: boolean;
@@ -26,5 +30,17 @@ export declare const DefaultSidebarProps: {
             onClick: () => void;
         }[];
     };
+    navigationOptions: {
+        items: {
+            id: string;
+            label: string;
+            icon: string;
+            type: string;
+            onClick: () => void;
+        }[];
+    };
+    footerOptions: {
+        initials: string;
+    };
 };
 //# sourceMappingURL=sidebar.models.d.ts.map

package/dist/src/models/sidebar.models.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.models.d.ts","sourceRoot":"","sources":["../../../src/models/sidebar.models.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,uBAAuB,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;CAqB/B,CAAC"}
+{"version":3,"file":"sidebar.models.d.ts","sourceRoot":"","sources":["../../../src/models/sidebar.models.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,iBAAiB,CAAC,EAAE,6BAA6B,CAAC;IAClD,aAAa,CAAC,EAAE,oBAAoB,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptlm-azulejo/sidebar",
-  "version": "0.0.1-alpha.87",
+  "version": "0.0.1-alpha.89",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",