@apptegy/nuxt-navigation 0.1.18 → 0.1.20

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

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

@@ -34,6 +34,7 @@ defineEmits(['selected-option']);
 
 <style scoped>
 header.header {
+  position: relative;
   grid-area: navheader;
   display: grid;
   grid-auto-flow: column;
@@ -45,7 +46,7 @@ header.header {
   background-color: var(--primary-white);
   font: var(--font-regular);
 }
-@media only screen and (max-width: 960px) {
+@media only screen and (width <= 960px) {
   header.header {
     padding-left: 32px;
     padding-right: 32px;

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

@@ -7,13 +7,13 @@
     @mouseenter="onHover"
     @mouseleave="onHoverLeave"
   >
-    <a
-      href="#main-content-section"
+    <!-- <a
+      :href="skipToContent"
       class="skip-to-content"
       data-testid="skip-to-content"
     >
       {{ $t('navigation.skipToContent') }}
-    </a>
+    </a> -->
     <div class="navbar--header">
         <slot name="switcher" />
     </div>
@@ -41,10 +41,10 @@
         :impersonated-user="impersonatedUser"
       />
 
-      <slot name="logo" v-bind="expanded">
+      <slot name="logo">
         <NuxtLink v-if="expanded ?  logo.src : logo.iconSrc" :to="homepageUrl">
           <div class="navbar--logo">
-            <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt">
+            <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt || $t('navigation.logoAlt')">
           </div>
         </NuxtLink>
       </slot>
@@ -53,24 +53,10 @@
 </template>
 
 <script setup lang="ts">
-import { useNuxtApp, useSidebar } from '#imports';
-const { $t } = useNuxtApp();
-const { state: expanded } = useSidebar();
-
-interface IApplications {
-  id: number;
-  text: string;
-  url: string;
-  img_src: string;
-}
+import { useSidebar } from '#imports';
+import type { IApplication, IUser } from "../../types";
 
-interface IUser {
-  show: boolean;
-  email: string;
-  phone_number: string;
-  client: string;
-  admin_email: string;
-}
+const { state: expanded } = useSidebar();
 
 interface ILogo {
   alt: string;
@@ -79,8 +65,8 @@ interface ILogo {
 }
 
 interface ISidebarProps {
-  applications: Array<IApplications>;
-  currentApplication?: IApplications['text'];
+  applications: Array<IApplication>;
+  currentApplication?: IApplication['text'];
   homepageUrl?: string;
   showHelpArticles?: boolean;
   helpArticleOptions?: Array<unknown>;
@@ -103,7 +89,7 @@ withDefaults(defineProps<ISidebarProps>(), {
     admin_email: '',
   }),
   logo: () => ({
-    alt: 'Thrillshare',
+    alt: '',
     src: 'logo.svg',
     iconSrc: 'icon.svg',
   }),
@@ -111,7 +97,7 @@ withDefaults(defineProps<ISidebarProps>(), {
 })
 
 // Debounced Expand on Hover
-let expandedTimer;
+let expandedTimer = null;
 function onHover() {
   if(!expanded.value) {
     expandedTimer = setTimeout(() => {

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

@@ -13,6 +13,7 @@
 
 <script setup lang="ts">
 import { useSidebar } from "#imports";
+import type { IApplication } from "../../types";
 
 defineProps<{
   application: IApplication;
@@ -21,7 +22,7 @@ defineProps<{
 
 const { state: expanded } = useSidebar();
 
-function getActiveIcon(src){
+function getActiveIcon(src: string){
   return src.replace(".svg", "_active.svg");
 };
 </script>
@@ -29,7 +30,6 @@ function getActiveIcon(src){
 <style scoped>
 .a-nav-section {
   box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));
-  cursor: pointer;
   min-height: 48px;
 }
 .a-nav-section.active {
@@ -52,6 +52,9 @@ function getActiveIcon(src){
   padding: 0px 16px;
   width: 100%;
 }
+.a-nav-section--link:not([href]) {
+  cursor: default;
+}
 .a-nav-section--link:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;

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

@@ -44,9 +44,9 @@ function handleSelectedClick(index: number) {
 function handleKeydownAction($event: KeyboardEvent, index: number) {
   if ($event.key === "Enter" || $event.key === " ") {
     emit("select-option", index);
-  } else {
-    handleKeydown($event, index);
+    $event?.target?.children[0]?.click();
   }
+  handleKeydown($event, index);
 }
 </script>
 

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,13 @@
+export interface IApplication {
+    id: number;
+    text: string;
+    url: string;
+    img_src: string;
+}
+export interface IUser {
+    show: boolean;
+    email: string;
+    phone_number: string;
+    client: string;
+    admin_email: string;
+}

package/package.json

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