@apptegy/nuxt-navigation 0.1.5 → 0.1.6

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "unknown"

package/dist/runtime/components/Nav/Header.vue

@@ -4,18 +4,17 @@
     :class="{ sticky }"
     role="banner"
   >
-    <NavSidebarToggle @toggle-sidebar="$emit('toggle-sidebar')"/>
+    <NavSidebarToggle />
     <div class="header__breadcrumbs">
       <slot name="breadcrumbs" />
     </div>
     <slot name="org-select" />
     <slot name="user-controls" />
-    <NavUserDropdown :user="user" :user-dropdown-options="userDropdownOptions" :selected-option="selectedOptions" @select-option="$emit('selectedOption')"/>
+    <NavUserDropdown :user="user" :user-dropdown-options="userDropdownOptions" @select-option="(index) => $emit('selected-option', index)"/>
   </header>
 </template>
 
 <script setup lang="ts">
-
 interface IHeaderProps {
   sticky?: boolean;
 }
@@ -26,13 +25,10 @@ interface IUserDropdown {
     avatar?: string;
   };
   userDropdownOptions: Array<unknown>;
-  selectedOption?: unknown
 }
 
-
 defineProps<IHeaderProps & IUserDropdown>();
-defineEmits(['toggle-sidebar', 'selectedOption']);
-
+defineEmits(['selected-option']);
 </script>
 
 <style scoped>

package/dist/runtime/components/Nav/Sidebar.vue

@@ -54,8 +54,11 @@
 </template>
 
 <script setup lang="ts">
-import { useNuxtApp } from '#imports';
+import { useNuxtApp, useSidebar, ref } from '#imports';
 const { $t } = useNuxtApp();
+const { state } = useSidebar();
+
+const expanded = ref(state);
 
 interface IApplications {
   id: number;
@@ -81,7 +84,6 @@ interface ILogo {
 interface ISidebarProps {
   applications: Array<IApplications>;
   currentApplication?: IApplications['text'];
-  expanded?: boolean;
   homepageUrl?: string;
   showHelpArticles?: boolean;
   helpArticleOptions?: Array<unknown>;
@@ -94,7 +96,6 @@ withDefaults(defineProps<ISidebarProps>(), {
   currentApplication: 'media',
   homepageUrl: '/',
   showHelpArticles: true,
-  expanded: true,
   helpArticleOptions: () => [],
   impersonatedUser: () => ({
     show: false,
@@ -109,6 +110,8 @@ withDefaults(defineProps<ISidebarProps>(), {
     iconSrc: 'logo.svg',
   })
 })
+
+
 </script>
 
 <style scoped>

package/dist/runtime/components/Nav/SidebarSection.vue

@@ -17,7 +17,6 @@ import { computed } from 'vue';
 const props = defineProps<{
   application: IApplication;
   active: boolean;
-  navbarExpanded: boolean;
 }>();
 
 const iconUrl = computed(() =>

package/dist/runtime/components/Nav/SidebarToggle.vue

@@ -5,12 +5,10 @@
   </button>
 </template>
 
-<script setup>
-const emit = defineEmits(["toggle-sidebar"]);
+<script setup lang="ts">
+import { useSidebar } from '#imports';
 
-function toggleSidebar() {
-  emit("toggle-sidebar");
-}
+const { toggleSidebar } = useSidebar();
 </script>
 
 <style scoped>

package/dist/runtime/composables/useSidebar.d.ts

@@ -0,0 +1,5 @@
+export declare function useSidebar(): {
+    state: any;
+    toggleSidebar: () => void;
+    sidebarWidth: any;
+};

package/dist/runtime/composables/useSidebar.js

@@ -0,0 +1,13 @@
+import { useState, ref, computed } from "#imports";
+export function useSidebar() {
+  const state = useState("navigation:sidebar", () => ref(true));
+  function toggleSidebar() {
+    state.value = !state.value;
+  }
+  const sidebarWidth = computed(() => state.value ? "256px" : "0px");
+  return {
+    state,
+    toggleSidebar,
+    sidebarWidth
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "exports": {
     ".": {