@apptegy/nuxt-navigation 0.1.111 → 1.0.0-alpha.1

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

@@ -5,10 +5,6 @@
     aria-label="Main"
     :class="{ expanded }"
     :style="getBrandingStyles"
-    @mouseenter="!lockedExpanded && onHover()"
-    @mouseleave="!lockedExpanded && onHoverLeave()"
-    @focusin="!lockedExpanded && onFocusEnter()"
-    @focusout="!lockedExpanded && onFocusLeave()"
   >
     <a
       :href="`#${skipToContent}`"
@@ -17,87 +13,77 @@
     >
       {{ $t("navigation.skipToContent") }}
     </a>
-    <div :class="['navbar--wrapper', fixed && 'fixed']" >
-        <div class="navbar--header">
-        <div :class="['header-actions', { 'collapsed': !expanded && !isMobile }]">
-            <NuxtLink v-if="expanded" class="no-link-style" :to="homepageUrl">
-              <slot name="logo">
-                  <div class="navbar--logo" :class="{ 'big-logo': _brandLogoWidth > 80 }">
-                    <img v-if="brandLogo" ref="brandLogoRef" :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 && expanded" class="hamburger-button" @click="closeSidebar" v-tooltip.bottom="'Unpin menu'">
-                  <Pinned />
-                </button>
-                <button v-if="!lockedExpanded && allowCollapse && expanded" class="hamburger-button" @click="lockSidebar" v-tooltip.bottom="'Pin menu open'">
-                  <Unpinned />
-                </button>
-                <button v-if="!lockedExpanded && allowCollapse && !expanded" ref="hamburgerButtonRef" class="hamburger-button">
-                  <a-icon icon="24:hamburger" />
-                </button>
-              </div>
-          </div>
-          <slot name="switcher" />
-        </div>
-        <div class="navbar--content">
-          <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>
-            </li>
-          </ul>
-        </div>
-        <div class="navbar--footer">
-          <NavHelpArticles
-            :show-help-articles="showHelpArticles"
-            :help-article-options="helpArticleOptions"
-            :settings-route="settingsRoute"
-            :school-website="schoolWebsite"
-            :collapsed="!expanded && !isMobile"
-          />
-          <NavImpersonateInfoPanel
-            v-if="impersonatedUser.show"
-            :impersonated-user="impersonatedUser"
-          />
+    <div :class="['navbar--wrapper', fixed && 'fixed']">
+      <div
+        v-if="$slots.switcher"
+        class="navbar--header"
+      >
+        <slot name="switcher" />
+      </div>
+      <div class="navbar--content">
+        <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>
+          </li>
+        </ul>
+      </div>
+      <div class="navbar--footer">
+        <NavHelpArticles
+          :show-help-articles="showHelpArticles"
+          :help-article-options="helpArticleOptions"
+          :settings-route="settingsRoute"
+          :school-website="schoolWebsite"
+          :collapsed="!expanded && !isMobile"
+        />
+        <NavImpersonateInfoPanel
+          v-if="impersonatedUser.show"
+          :impersonated-user="impersonatedUser"
+        />
 
-          <slot name="logo">
-            <template v-if="brand">
-              <NuxtLink v-if="expanded ? logo.src : logo.iconSrc" :to="homepageUrl">
-                <div v-if="!isMobile && expanded" class="navbar--footer-logo">
-                  <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt || $t('navigation.logoAlt')">
-                </div>
-              </NuxtLink>
-            </template>
-          </slot>
-        </div>
+        <slot name="logo">
+          <template v-if="brand">
+            <NuxtLink
+              v-if="expanded ? logo.src : logo.iconSrc"
+              :to="homepageUrl"
+            >
+              <div
+                v-if="!isMobile && expanded"
+                class="navbar--footer-logo"
+              >
+                <img
+                  :src="expanded ? logo.src : logo.iconSrc"
+                  :alt="logo.alt || $t('navigation.logoAlt')"
+                />
+              </div>
+            </NuxtLink>
+          </template>
+        </slot>
+      </div>
     </div>
+    <button
+      v-if="!isMobile"
+      class="navbar--collapse-btn"
+      :aria-label="expanded ? 'Collapse sidebar' : 'Expand sidebar'"
+      @click="expanded = !expanded"
+    >
+      {{ expanded ? "\xAB" : "\xBB" }}
+    </button>
   </nav>
 </template>
 
 <script setup>
-import { useSidebar, useBranding, useNuxtApp, ref, watch, computed, onMounted, onBeforeUnmount, nextTick } from "#imports";
-import ApptegyLogo from "./Icons/ApptegyLogo.vue";
+import { useSidebar, useBranding, useNuxtApp, computed, watch } from "#imports";
 import { useWindowSize } from "@vueuse/core";
-import Unpinned from "./Icons/Unpinned.vue";
-import Pinned from "./Icons/Pinned.vue";
 const { $t } = useNuxtApp();
 const props = defineProps({
   clientId: { type: Number, required: true, default: void 0 },
@@ -119,104 +105,25 @@ const props = defineProps({
     iconSrc: "poweredby-icon.svg"
   }) },
   skipToContent: { type: String, required: true, default: "#main-content-section" },
-  useApptegyLogo: { type: Boolean, required: false, default: false },
   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: "" },
-  showCollapseButton: { type: Boolean, required: false, default: false }
+  schoolWebsite: { type: String, required: true, default: "" }
 });
 const emit = defineEmits(["toggle-expand"]);
 const { state: expanded } = useSidebar();
 const { brand, getBrandingStyles } = await useBranding(props.clientId);
-const brandLogo = ref(brand.value?.logo_light);
-const brandLogoRef = ref(null);
-const brandLogoWidthPx = ref(0);
-let brandLogoResizeObserver = null;
-const _brandLogoWidth = computed(() => brandLogoWidthPx.value);
 const { width: windowWidth } = useWindowSize();
 const isMobile = computed(() => windowWidth.value < 600);
-const lockedExpanded = ref(true);
-const allowCollapse = ref(false);
-let focusOutTimeout = null;
-const hamburgerButtonRef = ref(null);
-let ignoreNextFocusIn = false;
-function updateBrandLogoWidth() {
-  brandLogoWidthPx.value = brandLogoRef.value?.clientWidth ?? 0;
-}
-onMounted(() => {
-  updateBrandLogoWidth();
-  if (brandLogoRef.value) {
-    brandLogoResizeObserver = new ResizeObserver(() => {
-      updateBrandLogoWidth();
-    });
-    brandLogoResizeObserver.observe(brandLogoRef.value);
-  }
-});
-onBeforeUnmount(() => {
-  brandLogoResizeObserver?.disconnect();
-  brandLogoResizeObserver = null;
-  if (focusOutTimeout) {
-    clearTimeout(focusOutTimeout);
-    focusOutTimeout = null;
-  }
-});
 watch(expanded, (value) => {
-  emit("toggle-expand", value ? 264 : 64);
+  emit("toggle-expand", value ? 240 : 64);
 });
-watch(isMobile, (value) => {
-  if (value) {
-    expanded.value = true;
-    lockedExpanded.value = true;
-    allowCollapse.value = false;
-  }
-}, { immediate: true });
-function onHover() {
-  if (!expanded.value) {
-    expanded.value = true;
-  }
-}
-function onHoverLeave() {
-  if (expanded.value) {
-    expanded.value = false;
-  }
-}
-function onFocusEnter() {
-  if (ignoreNextFocusIn) {
-    ignoreNextFocusIn = false;
-    return;
-  }
-  if (focusOutTimeout) {
-    clearTimeout(focusOutTimeout);
-    focusOutTimeout = null;
-  }
-  if (!expanded.value) {
-    expanded.value = true;
-  }
-}
-function onFocusLeave() {
-  focusOutTimeout = setTimeout(() => {
-    if (expanded.value) {
-      expanded.value = false;
-    }
-    focusOutTimeout = null;
-  }, 100);
-}
-async function closeSidebar() {
-  expanded.value = false;
-  lockedExpanded.value = false;
-  allowCollapse.value = true;
-  ignoreNextFocusIn = true;
-  await nextTick();
-  if (hamburgerButtonRef.value) {
-    hamburgerButtonRef.value.focus();
-  }
-}
-function lockSidebar() {
-  lockedExpanded.value = true;
-  expanded.value = true;
-  allowCollapse.value = false;
-}
+watch(
+  isMobile,
+  (value) => {
+    if (value) expanded.value = true;
+  },
+  { immediate: true }
+);
 </script>
 
 <style scoped>
@@ -226,8 +133,8 @@ function lockSidebar() {
   color: var(--nav-text-color, #646464);
   transition: width 0.3s ease;
   height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  align-self: stretch;
+  overflow: visible;
   scrollbar-width: none;
   width: 64px;
   position: relative;
@@ -242,9 +149,8 @@ function lockSidebar() {
 }
 .navbar--wrapper {
   display: grid;
-  grid-template-rows: 0fr auto 0fr;
-  background-color: var(--nav-background-color, #FFF);
-  border-right: 1px solid #DFDFDF;
+  grid-template-rows: 1fr;
+  background-color: var(--nav-background-color, #fff);
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -259,7 +165,7 @@ function lockSidebar() {
   z-index: 10;
 }
 .navbar--header {
-  border-bottom: 1px solid var(--nav-border-colors, #DFDFDF);
+  border-bottom: 1px solid var(--nav-border-colors, #dfdfdf);
 }
 .navbar--header .header-actions {
   padding: 12px 16px;
@@ -273,45 +179,53 @@ function lockSidebar() {
 .navbar--header .header-actions.collapsed {
   justify-content: center;
 }
-.navbar--logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.navbar--logo.big-logo {
-  flex-direction: column;
-  align-items: flex-start;
-}
-.navbar--logo .school-name {
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-.navbar--logo .school-tag {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-.navbar--logo img {
-  display: inline;
-  max-height: 36px;
-  max-width: 180px;
-}
 .navbar--content {
   display: flex;
   flex-direction: column;
 }
 .navbar--content ul {
   list-style: none;
-  padding: 0;
+  padding: 8px 0;
   margin: 0;
   width: 64px;
 }
+.navbar--collapse-btn {
+  /* Fallback: fixed 32px from bottom, at the sidebar's right edge */
+  position: absolute;
+  bottom: 32px;
+  right: 0;
+  transform: translateX(50%);
+  /* Anchor API: pin exactly to the content/footer seam */
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--primary-white, #fff);
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #555;
+  z-index: 10;
+}
+@supports (anchor-name: --test) {
+  .navbar--collapse-btn {
+    position: fixed;
+    position-anchor: --nav-footer;
+    top: anchor(top);
+    left: anchor(right);
+    bottom: unset;
+    right: unset;
+    transform: translate(-50%, -50%);
+  }
+}
+.navbar--collapse-btn:hover {
+  background-color: #f5f5f5;
+}
 .navbar--footer {
+  anchor-name: --nav-footer;
   display: flex;
   flex-direction: column;
 }
@@ -326,13 +240,10 @@ function lockSidebar() {
 }
 .navbar.expanded {
   transition: width 0.3s ease;
-  width: 264px;
+  width: 240px;
 }
 .navbar.expanded .navbar--content ul {
-  width: 264px;
-}
-.navbar.expanded .navbar--header .header-actions {
-  width: 264px;
+  width: 240px;
 }
 .navbar .skip-to-content {
   overflow: hidden;
@@ -353,7 +264,7 @@ function lockSidebar() {
   pointer-events: none;
 }
 .navbar .skip-to-content:focus-visible {
-  --native-outline-blue: #0000FF;
+  --native-outline-blue: #0000ff;
   opacity: 1;
   pointer-events: auto;
   outline: var(--native-outline-blue) auto 2px;

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

@@ -1,4 +1,4 @@
-import type { IApplication, IUser } from "../../types/index.js";
+import type { IApplication, IUser } from '../../types/index.js';
 interface ILogo {
     alt: string;
     src: string;
@@ -14,43 +14,35 @@ interface ISidebarProps {
     impersonatedUser?: IUser;
     logo?: ILogo;
     skipToContent: string;
-    useApptegyLogo?: boolean;
     fixed?: boolean;
-    isAdmin?: boolean;
     settingsRoute: string;
     schoolWebsite: string;
-    showCollapseButton?: boolean;
 }
-declare var __VLS_6: {}, __VLS_26: {}, __VLS_33: {}, __VLS_45: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_20: {};
 type __VLS_Slots = {} & {
-    logo?: (props: typeof __VLS_6) => any;
+    switcher?: (props: typeof __VLS_1) => any;
 } & {
-    switcher?: (props: typeof __VLS_26) => any;
+    default?: (props: typeof __VLS_8) => any;
 } & {
-    default?: (props: typeof __VLS_33) => any;
-} & {
-    logo?: (props: typeof __VLS_45) => any;
+    logo?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ISidebarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "toggle-expand": (width: number) => any;
 }, string, import("vue").PublicProps, Readonly<ISidebarProps> & Readonly<{
     "onToggle-expand"?: ((width: number) => any) | undefined;
 }>, {
+    clientId: number;
+    homepageUrl: string;
     impersonatedUser: IUser;
     fixed: boolean;
     helpArticleOptions: Array<unknown>;
     settingsRoute: string;
     schoolWebsite: string;
     showHelpArticles: boolean;
-    clientId: number;
     applications: Array<IApplication>;
     currentApplication: IApplication["text"];
-    homepageUrl: string;
     logo: ILogo;
     skipToContent: string;
-    useApptegyLogo: boolean;
-    isAdmin: boolean;
-    showCollapseButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -11,9 +11,17 @@ const component = computed(() => props.as || resolveComponent("NuxtLink"));
 </script>
 
 <template>
-  <component :is="component" class="a-navbar-item" :class="{ expanded, active, collapsed: !expanded }">
+  <component
+    :is="component"
+    class="a-navbar-item"
+    :class="{ expanded, active, collapsed: !expanded }"
+  >
     <slot name="icon">
-      <a-icon class="icon" :icon="icon" font-size="24px"/>
+      <Icon
+        class="icon"
+        :name="`lucide:${icon}`"
+        size="24"
+      />
     </slot>
     <slot v-if="expanded" />
   </component>
@@ -23,20 +31,22 @@ const component = computed(() => props.as || resolveComponent("NuxtLink"));
 .a-navbar-item {
   background-color: transparent;
   color: inherit;
-  margin: 2px 12px;
+  margin: 2px 8px;
   display: flex;
   align-items: center;
   text-decoration: none;
   text-transform: capitalize;
-  padding: 4px;
+  padding: 10px 8px;
   border: none;
   border-radius: 8px;
+  gap: 8px;
+  width: calc(100% - 16px);
+  box-sizing: border-box;
   user-select: none;
 }
 .a-navbar-item.collapsed {
   justify-content: center;
-  margin: 8px;
-  cursor: pointer;
+  font-size: 16px;
 }
 .a-navbar-item:focus-visible {
   outline: var(--orange) auto 2px;
@@ -44,27 +54,14 @@ const component = computed(() => props.as || resolveComponent("NuxtLink"));
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
 .a-navbar-item.active, .a-navbar-item.nuxt-link-exact-active, .a-navbar-item.router-link-exact-active {
-  background-color: var(--nav-icon-background, #F7F5F9);
+  background-color: var(--nav-icon-background, #eef2ff);
   font-weight: 500;
-  color: #2D2D2D;
+  color: #2d2d2d;
 }
 .a-navbar-item.active svg path, .a-navbar-item.nuxt-link-exact-active svg path, .a-navbar-item.router-link-exact-active svg path {
   stroke-width: 1.5px;
 }
 .a-navbar-item:hover {
-  background-color: var(--nav-icon-background, #F7F5F9);
-}
-.a-navbar-item:focus-visible {
-  outline: var(--orange) auto 2px;
-  outline-offset: 0px;
-  box-shadow: inset 0 0 0px 4px var(--primary-white);
-}
-.a-navbar-item:last-child {
-  margin-bottom: 8px;
-}
-
-.icon {
-  margin-right: 12px;
-  margin-left: 8px;
+  background-color: var(--nav-icon-background, #eef2ff);
 }
 </style>

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

@@ -10,17 +10,12 @@
       :aria-label="appText"
     >
       <span v-if="expanded">{{ appText }}</span>
-      <a-icon
-        v-if="expanded && active"
+      <Icon
+        v-if="expanded"
+        name="lucide:chevron-up"
+        size="16"
         :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"
+        @click.prevent="isOpen = !isOpen"
       />
     </NuxtLink>
     <div :class="['a-nav-section--content', { collapse: !isOpen }]">
@@ -39,7 +34,7 @@ const props = defineProps({
 });
 const { $ld } = useNuxtApp();
 const { state: expanded } = useSidebar();
-const isOpen = ref(true);
+const isOpen = ref(props.active);
 const isEngageRenameEnabled = computed(() => {
   return Boolean($ld?.flags?.engageToNewslettersNameChange);
 });
@@ -57,7 +52,7 @@ const applicationUrl = computed(() => {
   const { text, url } = props.application || {};
   if (props.active) return "";
   if (text.toLowerCase() === ENGAGE_APP_TEXT && isNewslettersUrlEnabled.value) {
-    return url.replace(/\/engage(?=[/?#]|$)/i, "/newsletters");
+    return url.replace("engage", "newsletters");
   }
   return url;
 });
@@ -65,11 +60,18 @@ const applicationUrl = computed(() => {
 
 <style scoped>
 .a-nav-section {
-  box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #dfdfdf);
+  position: relative;
   min-height: 48px;
 }
-.a-nav-section.active {
-  box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #dfdfdf);
+.a-nav-section::after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 12px;
+  right: 12px;
+  height: 1px;
+  background-color: var(--nav-border-colors, #dfdfdf);
 }
 .a-nav-section--content {
   display: flex;
@@ -83,28 +85,18 @@ const applicationUrl = computed(() => {
 }
 .a-nav-section--link {
   display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 16px;
   color: inherit;
   text-decoration: none;
-  min-height: 48px;
-  align-items: center;
   font-size: 12px;
   letter-spacing: 1.4px;
-  overflow: hidden;
-  padding: 0px 16px;
-  width: 100%;
+  text-transform: uppercase;
   user-select: none;
 }
-.a-nav-section--link svg:first-child {
-  background: var(--nav-icon-background, #dfdfdf);
-  color: var(--nav-icon-color, var(--eggplant-30));
-  border-radius: 4px;
-  min-width: 32px;
-  min-height: 32px;
-}
-.a-nav-section--link svg:first-child.active {
-  background: var(--nav-active-icon-background, var(--orange-40));
-  color: var(--nav-active-icon-color, var(--primary-white));
-}
 .a-nav-section--link:not([href]) {
   cursor: default;
 }
@@ -114,14 +106,15 @@ const applicationUrl = computed(() => {
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
 .a-nav-section--link span {
-  margin: 0 8px;
+  min-width: 0;
   white-space: nowrap;
-  text-transform: uppercase;
-  width: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .a-nav-section--link .caret-icon {
   cursor: pointer;
-  font-size: 24px;
+  flex-shrink: 0;
+  margin-left: auto;
   transition: transform 0.2s ease-in-out;
 }
 .a-nav-section--link .caret-icon.collapse {

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

@@ -4,9 +4,9 @@ type __VLS_Props = {
     active: boolean;
     collapsed: boolean;
 };
-declare var __VLS_22: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_14) => 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/SubMenuItem.vue

@@ -10,7 +10,7 @@ defineProps({
 <template>
   <NuxtLink class="menu-item">
     <div class="menu-item__icon">
-      <a-icon :icon />
+      <Icon :name="`lucide:${icon}`" />
     </div>
     <span class="menu-item__text">
       <slot />