@apptegy/nuxt-navigation 0.1.7 → 0.1.9

package/dist/module.d.mts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

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

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

@@ -22,7 +22,7 @@
     >
       <img v-if="isDropdown" src="../../assets/img/help-toggle.svg" alt="" class="help-center-btn-icon">
       <img v-else src="../../assets/img/help.svg" alt="" class="help-center-btn-icon">
-      <span>
+      <span v-if="expandedSidebar">
         {{ isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles') }}
       </span>
       <img
@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import { useSidebar } from "#import";
 import { ref, computed, onMounted } from 'vue'
 
 interface IHelpArticlesProps {
@@ -47,6 +48,8 @@ const props = withDefaults(defineProps<IHelpArticlesProps>(), {
   helpArticleOptions: () => [],
 })
 
+const { state: expandedSidebar } = useSidebar();
+
 const expanded = ref(false);
 const helpBtnActions = ref();
 const dropdownScrollHeight = ref(0);

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

@@ -1,6 +1,16 @@
 <template>
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
-<rect x="4.3335" y="5.5" width="15.3333" height="13" rx="0.666667" stroke="currentColor"/>
-<path d="M10 6L10 18" stroke="currentColor" stroke-linecap="round"/>
+<rect x="4.3335" y="5.5" width="15.3333"  height="13" rx="0.666667" stroke="currentColor"/>
+<rect x="4.3335" y="5.5" :width="expanded ? 6: 2" height="13" rx="0.666667" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
 </svg>
 </template>
+
+<script setup lang="ts">
+import { useSidebar } from "#import";
+
+const { state: expanded } = useSidebar();
+</script>
+
+<style scoped>
+rect{transition:width .2s}
+</style>

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

@@ -170,7 +170,7 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
   white-space: nowrap;
   cursor: pointer;
 }
-.org-selection .dropdown-trigger .org-title:focus {
+.org-selection .dropdown-trigger .org-title:focus-visible {
   outline: none;
 }
 .org-selection .dropdown {

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

@@ -4,6 +4,8 @@
     role="navigation"
     aria-label="Main"
     :class="{ expanded }"
+    @mouseenter="onHover"
+    @mouseleave="onHoverLeave"
   >
     <a
       ref="skip-to-content"
@@ -13,8 +15,10 @@
     >
       {{ $t('navigation.skipToContent') }}
     </a>
+    <div class="navbar--header">
+        <slot name="switcher" />
+    </div>
     <div class="navbar--content">
-      <slot name="switcher" />
       <ul class="navbar-applications">
         <li v-for="application of applications" :key="application.id">
           <NavSidebarSection
@@ -31,22 +35,21 @@
           />
         </li>
       </ul>
-
     </div>
     <div class="navbar--footer">
       <NavImpersonateInfoPanel
         v-if="impersonatedUser.show"
         :impersonated-user="impersonatedUser"
       />
-    </div>
 
       <slot name="logo">
         <NuxtLink :to="homepageUrl">
           <div class="navbar--logo">
-            <img :src="logo.src" :alt="logo.alt">
+            <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt">
           </div>
         </NuxtLink>
       </slot>
+    </div>
   </nav>
 </template>
 
@@ -102,10 +105,24 @@ withDefaults(defineProps<ISidebarProps>(), {
   logo: () => ({
     alt: 'Thrillshare',
     src: 'logo.svg',
-    iconSrc: 'logo.svg',
+    iconSrc: 'icon.svg',
   })
 })
 
+// Debounced Expand on Hover
+let expandedTimer;
+function onHover() {
+  if(!expanded.value) {
+    expandedTimer = setTimeout(() => {
+      expanded.value = true;
+    }, 280);
+  }
+}
+function onHoverLeave() {
+  if(!expanded.value) {
+    clearTimeout(expandedTimer);
+  }
+}
 
 </script>
 
@@ -113,15 +130,14 @@ withDefaults(defineProps<ISidebarProps>(), {
 .navbar {
   grid-area: navsidebar;
   display: grid;
-  grid-template-rows: 1fr auto auto;
+  grid-template-rows: 0fr auto 0fr;
   font: var(--font-regular);
   background-color: var(--dscl-nav-background-color, var(--purple-70));
   color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
   transition: width 0.3s ease-in-out, translate 0.2s ease-in-out;
   height: 100vh;
   overflow-y: auto;
-  /* min-width: 0px; */
-  translate: -256px;
+  width: 64px;
 }
 .navbar a:focus-visible {
   outline: var(--orange) auto 2px;
@@ -130,9 +146,12 @@ withDefaults(defineProps<ISidebarProps>(), {
 }
 .navbar.expanded {
   transition: width 0.3s ease-in-out, translate 0.2s ease-in-out;
-  min-width: 256px;
+  width: 256px;
   translate: 0px;
 }
+.navbar.expanded .navbar--content ul {
+  width: 256px;
+}
 .navbar--logo {
   padding: 16px;
   background-color: var(--dscl-nav-background-color, var(--purple-70));
@@ -141,7 +160,6 @@ withDefaults(defineProps<ISidebarProps>(), {
 .navbar--content {
   display: flex;
   flex-direction: column;
-  flex-basis: auto;
   margin-top: 24px;
   background-color: var(--dscl-nav-background-color, var(--purple-70));
 }
@@ -149,15 +167,16 @@ withDefaults(defineProps<ISidebarProps>(), {
   list-style: none;
   padding: 0;
   margin: 0;
-  max-width: 256px;
+  width: 64px;
 }
 .navbar--footer {
   display: flex;
   flex-direction: column;
+  height: fit-content;
 }
 .navbar .skip-to-content {
   overflow: hidden;
-  padding: 15px 23px 14px;
+  padding: 16px 24px 14px;
   position: absolute;
   left: 5px;
   top: 5px;

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

@@ -1,15 +1,26 @@
+<script setup lang="ts">
+import { useSidebar } from "#import";
+
+defineProps<{
+  icon: string;
+}>();
+const { state: expanded } = useSidebar();
+</script>
+
 <template>
-  <NuxtLink class="a-navbar-item">
-    <slot />
+  <NuxtLink class="a-navbar-item" :class="{expanded}">
+    <a-icon :icon="icon" font-size="32px"/>
+    <slot v-if="expanded" />
   </NuxtLink>
 </template>
 
 <style scoped>
 .a-navbar-item {
   color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
-  margin: 4px 16px;
+  margin: 4px 12px;
   display: flex;
   align-items: center;
+  gap: 4px;
   text-decoration: none;
   text-transform: capitalize;
   padding: 4px;

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

@@ -1,9 +1,9 @@
 <template>
   <div class="a-nav-section" :class="{ active }">
-    <NuxtLink class="a-nav-section--link" :to="application.url">
-      <img v-if="application.img_src" :src="iconUrl" alt="icon">
-      <span>{{ application.text.replace("_", " ") }}</span>
-      <a-icon v-if="active" class="caret-icon" icon="16:carret-up" />
+    <NuxtLink class="a-nav-section--link" :to="active ? '' : application.url">
+      <img v-if="application.img_src" :src="active ? getActiveIcon(application.img_src) : application.img_src" alt="icon">
+      <span v-if="expanded">{{ application.text.replace("_", " ") }}</span>
+      <a-icon v-if="expanded && active" class="caret-icon" icon="16:carret-up" />
     </NuxtLink>
     <div class="a-nav-section--content">
       <slot />
@@ -12,18 +12,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { useSidebar } from "#import";
 
-const props = defineProps<{
+defineProps<{
   application: IApplication;
   active: boolean;
 }>();
 
-const iconUrl = computed(() =>
-  props.active
-    ? props.application.img_src?.replace(".svg", "_active.svg")
-    : props.application.img_src,
-);
+const { state: expanded } = useSidebar();
+
+function getActiveIcon(src){
+  return src.replace(".svg", "_active.svg");
+};
 </script>
 
 <style scoped>
@@ -31,9 +31,6 @@ const iconUrl = computed(() =>
   box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));
   cursor: pointer;
   min-height: 48px;
-  /* &--content {
-    margin-bottom: 8px;
-  } */
 }
 .a-nav-section.active {
   box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));

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

@@ -19,11 +19,11 @@ const { toggleSidebar } = useSidebar();
   background: var(--purple-20);
   border: none;
   border-radius: 4px;
-  padding: 8px 16px;
+  padding: 4px 8px;
   color: var(--purple);
   cursor: pointer;
 }
-.sidebar-toggle:focus {
+.sidebar-toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
 }

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

@@ -48,13 +48,13 @@ defineProps({
   border-top: 2px solid transparent;
   border-radius: 4px;
 }
-.menu-item:hover, .menu-item:focus, .menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {
+.menu-item:hover, .menu-item:focus-visible, .menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {
   background-color: var(--purple-10);
   border-radius: 4px 4px 0px 0px;
   color: var(--purple);
   outline: none;
 }
-.menu-item:hover:after, .menu-item:focus:after, .menu-item.nuxt-link-exact-active:after, .menu-item.router-link-exact-active:after {
+.menu-item:hover:after, .menu-item:focus-visible:after, .menu-item.nuxt-link-exact-active:after, .menu-item.router-link-exact-active:after {
   border-top: 2px solid var(--purple);
 }
 .menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {

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

@@ -7,8 +7,9 @@ interface IUserDropdown {
   user: {
     name: string;
     avatar?: string;
+    email: string;
   };
-  userDropdownOptions: Array<{ label: string; url: string; icon: string }>;
+  userDropdownOptions: Array<{ label: string; url: string; }>;
 }
 
 const appConfig = useAppConfig();
@@ -72,6 +73,17 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
     class="options-dropdown"
     role="listbox"
   >
+    <div class="user-info">
+        <span class="user-info-title">{{ $t("navigation.userDropdown") }}</span>
+        <div class="user-info-details">
+            <NavAvatar :name="user.name" :src="user.avatar" style="--size: 40px"/>
+            <div class="user-info-details-container">
+            <span class="user-info-name"> {{ user.name }} </span>
+            <span class="user-info-email"> {{ user.email }} </span>
+            </div>
+        </div>
+    </div>
+    <hr>
     <div
       v-for="(option, idx) in userDropdownOptions"
       :key="option.label"
@@ -86,7 +98,6 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
       <!-- because of the the above handler, this component is never treated as a link and can't redirect natively? -->
       <NuxtLink class="option" :to="option.url">
         {{ option.label }}
-        <a-icon :icon="option.icon" font-size="24px" />
       </NuxtLink>
     </div>
   </div>
@@ -111,13 +122,44 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
   align-items: center;
   cursor: pointer;
 }
-.header__dropdown:focus {
+.header__dropdown:focus-visible {
   box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
 }
-.header__dropdown .avatar-container:focus {
+.header__dropdown .avatar-container:focus-visible {
   outline: none;
 }
 
+hr {
+  border: 0;
+  border-top: 1px solid var(--grey-20);
+  margin: 8px 0;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px;
+}
+.user-info .user-info-title {
+  font-weight: bold;
+  font-size: 12px;
+  color: var(--grey-60);
+  text-transform: uppercase;
+}
+.user-info .user-info-details {
+  display: flex;
+  gap: 4px;
+}
+.user-info .user-info-details .user-info-details-container {
+  display: flex;
+  flex-direction: column;
+}
+.user-info .user-info-details .user-info-details-container .user-info-email {
+  font-size: 12px;
+  color: var(--grey-50);
+}
+
 .options-dropdown {
   min-height: 100px;
   position: absolute;

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

@@ -3,8 +3,8 @@ export declare function useDropdown(options: Array<unknown>, dropdownOptionsRef:
     searchable: boolean;
     trackBy?: string;
 }): {
-    active: Ref<boolean>;
-    searchQuery: Ref<string>;
+    active: Ref<boolean, boolean>;
+    searchQuery: Ref<string, string>;
     toggleDropdown: ($event: KeyboardEvent | MouseEvent) => Promise<void>;
     openDropdown: () => void;
     closeDropdown: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "exports": {
     ".": {
@@ -26,24 +26,24 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.4",
-    "@vueuse/components": "11.0.1",
+    "@nuxt/kit": "^3.13.1",
+    "@vueuse/components": "11.0.3",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.14",
-    "@nuxt/eslint-config": "^0.5.1",
+    "@nuxt/devtools": "^1.4.1",
+    "@nuxt/eslint-config": "^0.5.6",
     "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.12.4",
+    "@nuxt/schema": "^3.13.1",
     "@nuxt/test-utils": "^3.14.1",
-    "@types/node": "^20.16.1",
+    "@types/node": "^20.16.5",
     "changelogen": "^0.5.5",
-    "eslint": "^9.9.0",
-    "nuxt": "^3.12.4",
-    "sass": "^1.77.8",
+    "eslint": "^9.9.1",
+    "nuxt": "^3.13.1",
+    "sass": "^1.78.0",
     "typescript": "^5.5.4",
     "vitest": "^1.6.0",
-    "vue": "^3.4.38",
-    "vue-tsc": "^2.0.29"
+    "vue": "^3.5.2",
+    "vue-tsc": "^2.1.6"
   }
 }