@apptegy/nuxt-navigation 0.1.68 → 0.1.70

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

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

@@ -21,13 +21,7 @@ type __VLS_Slots = {} & {
 } & {
     'user-controls'?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "selected-option": (...args: any[]) => void;
-    "user-logout": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onSelected-option"?: ((...args: any[]) => any) | undefined;
-    "onUser-logout"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,9 +1,10 @@
 <template>
-  <div class="help-btn-wrapper">
+  <div class="help-btn-wrapper" :class="{ 'collapsed': collapsed }">
     <button
       v-if="schoolWebsite"
       :id="'school-website'"
       class="help-articles-btn"
+      :class="{ 'collapsed': collapsed }"
       :aria-label="$t('navigation.website')"
       @click="goToWebsite"
     >
@@ -17,7 +18,8 @@
       :class="[
   'help-articles-btn',
   !isDropdown && 'help-btn',
-  isRoomsUser && `help-btn-${userRoomsRole}`
+  isRoomsUser && `help-btn-${userRoomsRole}`,
+  collapsed && 'collapsed'
 ]"
       :aria-label="isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles')"
       @click="expandDropdown"
@@ -29,7 +31,7 @@
     <button
       v-if="settingsRoute"
       :id="!isDropdown && 'help-btn'"
-      :class="['help-articles-btn', !isDropdown && 'help-btn']"
+      :class="['help-articles-btn', !isDropdown && 'help-btn', collapsed && 'collapsed']"
       :aria-label="$t('navigation.accountSettings')"
       @click="goToSettings"
     >
@@ -50,7 +52,8 @@ const props = defineProps({
   helpArticleOptions: { type: Array, required: true, default: () => [] },
   settingsRoute: { type: String, required: true, default: "" },
   schoolWebsite: { type: String, required: true, default: "" },
-  showHelpArticles: { type: Boolean, required: true, default: false }
+  showHelpArticles: { type: Boolean, required: true, default: false },
+  collapsed: { type: Boolean, required: true }
 });
 const { state: expandedSidebar } = useSidebar();
 const expanded = ref(false);
@@ -93,6 +96,11 @@ async function goToWebsite() {
   text-transform: uppercase;
   padding-left: 8px;
 }
+.help-btn-wrapper.collapsed {
+  justify-content: center;
+  flex-direction: column;
+  padding-left: 0;
+}
 .help-btn-wrapper .help-articles-btn {
   cursor: pointer;
   display: flex;
@@ -112,6 +120,9 @@ async function goToWebsite() {
   min-width: 32px;
   width: 32px;
 }
+.help-btn-wrapper .help-articles-btn.collapsed {
+  padding: 10px 0px;
+}
 .help-btn-wrapper .help-btn-actions {
   visibility: hidden;
   max-height: 0px;

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

@@ -3,6 +3,7 @@ interface IHelpArticlesProps {
     settingsRoute: string;
     schoolWebsite: string;
     showHelpArticles: boolean;
+    collapsed: boolean;
 }
 declare const _default: import("vue").DefineComponent<IHelpArticlesProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IHelpArticlesProps> & Readonly<{}>, {
     helpArticleOptions: Array<unknown>;

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

@@ -5,8 +5,8 @@
     aria-label="Main"
     :class="{ expanded }"
     :style="getBrandingStyles"
-    @mouseenter="onHover"
-    @mouseleave="onHoverLeave"
+    @mouseenter="!lockedExpanded && onHover()"
+    @mouseleave="!lockedExpanded && onHoverLeave()"
   >
     <a
       :href="`#${skipToContent}`"
@@ -17,24 +17,35 @@
     </a>
     <div :class="['navbar--wrapper', fixed && 'fixed']" >
         <div class="navbar--header">
-        <div class="header-actions">
+        <div :class="['header-actions', { 'collapsed': !expanded && !isMobile }]">
             <NuxtLink v-if="expanded" class="no-link-style" :to="homepageUrl">
               <slot name="logo">
-                  <div class="navbar--logo">
-                    <img v-if="brandLogo" :src="brandLogo" :alt="$t('navigation.brandLogoAlt')">
-                    <component
-                    :is="ApptegyLogo"
-                    v-else
-                    :alt="$t('navigation.brandLogoAlt')"
-                    :use-light-logo="isAdmin || Object.values(getBrandingStyles).length === 0"
-                    />
-                    <div v-if="!brand?.hide_school_name">
-                      <div class="school-name"> {{ brand?.school_name }} </div>
-                      <div v-if="brand?.school_tag_line" class="school-tag">{{ brand.school_tag_line }}</div>
-                  </div>
+                    <div class="navbar--logo">
+                      <img v-if="brandLogo" :src="brandLogo" :alt="$t('navigation.brandLogoAlt')">
+                      <component
+                      :is="ApptegyLogo"
+                      v-else
+                      :alt="$t('navigation.brandLogoAlt')"
+                      :use-light-logo="isAdmin || Object.values(getBrandingStyles).length === 0"
+                      />
+                      <div v-if="!brand?.hide_school_name">
+                        <div class="school-name"> {{ brand?.school_name }} </div>
+                        <div v-if="brand?.school_tag_line" class="school-tag">{{ brand.school_tag_line }}</div>
+                      </div>
                     </div>
                 </slot>
               </NuxtLink>
+              <div v-if="!isMobile && showCollapseButton">
+                <button v-if="lockedExpanded && !allowCollapse" class="hamburger-button" @click="closeSidebar">
+                  <a-icon icon="24:hamburger" />
+                </button>
+                <button v-if="!lockedExpanded && allowCollapse && expanded" class="hamburger-button" @click="lockSidebar">
+                  <a-icon icon="24:lock-unlocked" />
+                </button>
+                <button v-if="!lockedExpanded && allowCollapse && !expanded" class="hamburger-button">
+                  <a-icon icon="24:hamburger" />
+                </button>
+              </div>
           </div>
           <slot name="switcher" />
         </div>
@@ -42,8 +53,10 @@
           <ul class="navbar-applications">
             <li v-for="application of applications" :key="application.id">
               <NavSidebarSection
+                  v-if="expanded || currentApplication === application.text || isMobile"
                   :application="application"
                   :active="currentApplication === application.text"
+                  :collapsed="!expanded && !isMobile"
                 >
                   <slot v-if="currentApplication === application.text" />
                 </NavSidebarSection>
@@ -56,6 +69,7 @@
             :help-article-options="helpArticleOptions"
             :settings-route="settingsRoute"
             :school-website="schoolWebsite"
+            :collapsed="!expanded && !isMobile"
           />
           <NavImpersonateInfoPanel
             v-if="impersonatedUser.show"
@@ -65,7 +79,7 @@
           <slot name="logo">
             <template v-if="brand">
               <NuxtLink v-if="expanded ? logo.src : logo.iconSrc" :to="homepageUrl">
-                <div class="navbar--footer-logo">
+                <div v-if="!isMobile && expanded" class="navbar--footer-logo">
                   <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt || $t('navigation.logoAlt')">
                 </div>
               </NuxtLink>
@@ -79,6 +93,7 @@
 <script setup>
 import { useSidebar, useBranding, useNuxtApp, ref, watch } from "#imports";
 import ApptegyLogo from "./Icons/ApptegyLogo.vue";
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 const { $t } = useNuxtApp();
 const props = defineProps({
   clientId: { type: Number, required: true, default: void 0 },
@@ -104,28 +119,40 @@ const props = defineProps({
   fixed: { type: Boolean, required: false, default: false },
   isAdmin: { type: Boolean, required: false, default: false },
   settingsRoute: { type: String, required: true, default: "" },
-  schoolWebsite: { type: String, required: true, default: "" }
+  schoolWebsite: { type: String, required: true, default: "" },
+  showCollapseButton: { type: Boolean, required: false }
 });
 const emit = defineEmits(["toggle-expand"]);
 const { state: expanded } = useSidebar();
 const { brand, getBrandingStyles } = await useBranding(props.clientId);
 const brandLogo = ref(brand.value?.logo_light);
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isMobile = breakpoints.smaller("md");
+const lockedExpanded = ref(true);
+const allowCollapse = ref(false);
 watch(expanded, (value) => {
   emit("toggle-expand", value ? 264 : 64);
 });
-let expandedTimer = null;
 function onHover() {
   if (!expanded.value) {
-    expandedTimer = setTimeout(() => {
-      expanded.value = true;
-    }, 280);
+    expanded.value = true;
   }
 }
 function onHoverLeave() {
-  if (!expanded.value) {
-    clearTimeout(expandedTimer);
+  if (expanded.value) {
+    expanded.value = false;
   }
 }
+function closeSidebar() {
+  expanded.value = false;
+  lockedExpanded.value = false;
+  allowCollapse.value = true;
+}
+function lockSidebar() {
+  lockedExpanded.value = true;
+  expanded.value = true;
+  allowCollapse.value = false;
+}
 </script>
 
 <style scoped>
@@ -156,6 +183,7 @@ function onHoverLeave() {
   border-right: 1px solid #DFDFDF;
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 .navbar--wrapper.fixed {
   position: fixed;
@@ -178,6 +206,9 @@ function onHoverLeave() {
   justify-content: space-between;
   box-sizing: border-box;
 }
+.navbar--header .header-actions.collapsed {
+  justify-content: center;
+}
 .navbar--logo {
   display: flex;
   align-items: center;
@@ -266,4 +297,18 @@ function onHoverLeave() {
   color: inherit;
   max-width: 200px;
 }
+.navbar .hamburger-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+.navbar .hamburger-button svg {
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+}
 </style>

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

@@ -19,16 +19,17 @@ interface ISidebarProps {
     isAdmin?: boolean;
     settingsRoute: string;
     schoolWebsite: string;
+    showCollapseButton?: boolean;
 }
-declare var __VLS_6: {}, __VLS_13: {}, __VLS_20: {}, __VLS_32: {};
+declare var __VLS_6: {}, __VLS_28: {}, __VLS_35: {}, __VLS_47: {};
 type __VLS_Slots = {} & {
     logo?: (props: typeof __VLS_6) => any;
 } & {
-    switcher?: (props: typeof __VLS_13) => any;
+    switcher?: (props: typeof __VLS_28) => any;
 } & {
-    default?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_35) => any;
 } & {
-    logo?: (props: typeof __VLS_32) => any;
+    logo?: (props: typeof __VLS_47) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ISidebarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "toggle-expand": (width: number) => any;

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

@@ -3,16 +3,20 @@ import { useSidebar, computed, resolveComponent } from "#imports";
 const props = defineProps({
   icon: { type: String, required: false },
   active: { type: Boolean, required: false },
-  as: { type: String, required: false }
+  as: { type: String, required: false },
+  name: { type: String, required: false }
 });
 const { state: expanded } = useSidebar();
 const component = computed(() => props.as || resolveComponent("NuxtLink"));
 </script>
 
 <template>
-  <component :is="component" class="a-navbar-item" :class="{ expanded, active }">
+  <component :is="component" class="a-navbar-item" :class="{ expanded, active, collapsed: !expanded }">
     <slot name="icon">
+      <a-tooltip v-if="!expanded" :label="name" position="right" size="small">
         <a-icon class="icon" :icon="icon" font-size="24px"/>
+      </a-tooltip>
+      <a-icon v-else class="icon" :icon="icon" font-size="24px"/>
     </slot>
     <slot v-if="expanded" />
   </component>
@@ -32,6 +36,11 @@ const component = computed(() => props.as || resolveComponent("NuxtLink"));
   border-radius: 8px;
   user-select: none;
 }
+.a-navbar-item.collapsed {
+  justify-content: center;
+  margin: 8px;
+  cursor: pointer;
+}
 .a-navbar-item:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;

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

@@ -2,12 +2,13 @@ type __VLS_Props = {
     icon?: string;
     active?: boolean;
     as?: string;
+    name?: string;
 };
-declare var __VLS_7: {}, __VLS_14: {};
+declare var __VLS_7: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="a-nav-section" :class="{ active }">
-    <NuxtLink class="a-nav-section--link" :to="active ? '' : application.url" :aria-label="appText">
+    <NuxtLink v-if="!collapsed" class="a-nav-section--link" :to="active ? '' : application.url" :aria-label="appText">
       <span v-if="expanded">{{ appText }}</span>
       <a-icon v-if="expanded && active" :class="['caret-icon', { 'collapse': !isOpen }]" icon="16:carret-up" @click="isOpen = !isOpen" />
       <a-icon v-if="expanded && !active" :class="['caret-icon', { 'collapse': !isOpen }]" icon="16:carret-down" @click="isOpen = !isOpen" />
@@ -16,7 +16,8 @@ import { useSidebar, computed, ref } from "#imports";
 import icons from "../../assets/iconPaths.json";
 const props = defineProps({
   application: { type: Object, required: true },
-  active: { type: Boolean, required: true }
+  active: { type: Boolean, required: true },
+  collapsed: { type: Boolean, required: true }
 });
 const appText = computed(() => props.application.text.replace("_", " "));
 const { state: expanded } = useSidebar();

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

@@ -2,6 +2,7 @@ import type { IApplication } from "../../types/index.js";
 type __VLS_Props = {
     application: IApplication;
     active: boolean;
+    collapsed: boolean;
 };
 declare var __VLS_22: {};
 type __VLS_Slots = {} & {

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

@@ -1,5 +1,5 @@
 export declare function useSidebar(): {
-    state: any;
+    state: import("vue").Ref<boolean, boolean>;
     toggleSidebar: () => void;
     sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.68",
+    "version": "0.1.70",
     "type": "module",
     "exports": {
         ".": {
@@ -27,24 +27,23 @@
     },
     "dependencies": {
         "@apptegy/nuxt-intl": "^2.4.2",
-        "@nuxt/kit": "^3.17.0",
-        "@vueuse/components": "^12.0.0",
-        "@vueuse/core": "^12.0.0"
+        "@nuxt/kit": "catalog:",
+        "@vueuse/components": "catalog:shared",
+        "@vueuse/core": "catalog:shared"
     },
     "devDependencies": {
-        "@nuxt/devtools": "^2.6.2",
-        "@nuxt/eslint-config": "^1.6.0",
-        "@nuxt/module-builder": "^1.0.1",
-        "@nuxt/schema": "^3.17.0",
-        "@nuxt/test-utils": "^3.17.0",
-        "@types/node": "^22.0.0",
-        "eslint": "^9.31.0",
-        "nuxt": "^3.17.0",
-        "sass": "^1.89.2",
-        "typescript": "~5.8.0",
-        "vitest": "^3.2.4",
-        "vue": "^3.5.13",
-        "vue-tsc": "^3.0.3"
-    },
-    "gitHead": "f2b6d8385d69cf522eb52430455fb61b4e43a9d4"
+        "@nuxt/devtools": "catalog:",
+        "@nuxt/eslint-config": "catalog:",
+        "@nuxt/module-builder": "catalog:",
+        "@nuxt/schema": "catalog:",
+        "@nuxt/test-utils": "catalog:",
+        "@types/node": "catalog:",
+        "eslint": "catalog:",
+        "nuxt": "catalog:",
+        "sass": "catalog:",
+        "typescript": "catalog:",
+        "vitest": "catalog:",
+        "vue": "catalog:",
+        "vue-tsc": "catalog:"
+    }
 }