@apptegy/nuxt-navigation 0.1.125 → 0.2.0-alpha.0

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

@@ -1,9 +1,9 @@
 <template>
   <nav
-    class="navbar"
     role="navigation"
     aria-label="Main"
-    :class="{ expanded }"
+    class="navbar"
+    :class="[isBeaconNavEnabled ? 'beacon' : 'classic', { expanded }]"
     :style="getBrandingStyles"
     @mouseenter="!lockedExpanded && onHover()"
     @mouseleave="!lockedExpanded && onHoverLeave()"
@@ -17,89 +17,173 @@
     >
       {{ $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"
+    <div
+      class="navbar--wrapper"
+      :class="{ 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 }"
+              >
+                <template v-if="brandLogo">
+                  <div
+                    v-if="isBeaconNavEnabled"
+                    class="brand-logo"
+                  >
+                    <img
+                      ref="brandLogoRef"
+                      :src="brandLogo"
+                      :alt="$t('navigation.brandLogoAlt')"
+                    />
+                  </div>
+                  <img
                     v-else
+                    ref="brandLogoRef"
+                    :src="brandLogo"
                     :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>
+                  />
+                </template>
+                <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>
-              </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>
+          </NuxtLink>
+          <div v-if="!isMobile && showCollapseButton">
+            <button
+              v-if="lockedExpanded && !allowCollapse && expanded"
+              class="hamburger-button"
+              @click="closeSidebar"
+              v-tooltip.bottom="isBeaconNavEnabled ? 'Collapse menu' : 'Unpin menu'"
+            >
+              <Icon
+                v-if="isBeaconNavEnabled"
+                name="lucide:panel-left-close"
+              />
+              <Pinned v-else />
+            </button>
+            <button
+              v-if="!lockedExpanded && allowCollapse && expanded"
+              class="hamburger-button"
+              @click="lockSidebar"
+              v-tooltip.bottom="isBeaconNavEnabled ? 'Expand menu' : 'Pin menu open'"
+            >
+              <Icon
+                v-if="isBeaconNavEnabled"
+                name="lucide:panel-right-close"
+              />
+              <Unpinned v-else />
+            </button>
+            <button
+              v-if="!lockedExpanded && allowCollapse && !expanded"
+              ref="hamburgerButtonRef"
+              class="hamburger-button"
+            >
+              <Icon
+                v-if="isBeaconNavEnabled"
+                name="lucide:menu"
+              />
+              <a-icon
+                v-else
+                icon="24:hamburger"
+              />
+            </button>
           </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 || isCurrentApplication(application) || isMobile"
-                  :application="application"
-                  :active="isCurrentApplication(application)"
-                  :collapsed="!expanded && !isMobile"
-                >
-                  <slot v-if="isCurrentApplication(application)" />
-                </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>
+      <div class="navbar--content">
+        <slot name="switcher" />
+        <ul class="navbar-applications">
+          <li
+            v-for="application of applications"
+            :key="application.id"
+          >
+            <NavSidebarSection
+              v-if="isBeaconNavEnabled || expanded || isCurrentApplication(application) || isMobile"
+              :application="application"
+              :active="isCurrentApplication(application)"
+              :collapsed="!expanded && !isMobile"
+            >
+              <slot v-if="isCurrentApplication(application)" />
+            </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>
   </nav>
 </template>
 
 <script setup>
-import { useSidebar, useBranding, useNuxtApp, ref, watch, computed, onMounted, onBeforeUnmount, nextTick } from "#imports";
+import {
+  useSidebar,
+  useBranding,
+  useNuxtApp,
+  ref,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  nextTick
+} from "#imports";
 import { isSameApplication } from "../../utils/application";
 import ApptegyLogo from "./Icons/ApptegyLogo.vue";
 import { useWindowSize } from "@vueuse/core";
 import Unpinned from "./Icons/Unpinned.vue";
 import Pinned from "./Icons/Pinned.vue";
-const { $t } = useNuxtApp();
+import PAvatar from "primevue/avatar";
+const { $t, $ld } = useNuxtApp();
 const props = defineProps({
   clientId: { type: Number, required: true, default: void 0 },
   applications: { type: Array, required: true, default: () => [] },
@@ -138,6 +222,9 @@ let brandLogoResizeObserver = null;
 const _brandLogoWidth = computed(() => brandLogoWidthPx.value);
 const { width: windowWidth } = useWindowSize();
 const isMobile = computed(() => windowWidth.value < 600);
+const isBeaconNavEnabled = computed(() => {
+  return Boolean($ld?.flags?.beaconNavEnabled);
+});
 const lockedExpanded = ref(true);
 const allowCollapse = ref(false);
 let focusOutTimeout = null;
@@ -166,13 +253,17 @@ onBeforeUnmount(() => {
 watch(expanded, (value) => {
   emit("toggle-expand", value ? 264 : 64);
 });
-watch(isMobile, (value) => {
-  if (value) {
-    expanded.value = true;
-    lockedExpanded.value = true;
-    allowCollapse.value = false;
-  }
-}, { immediate: true });
+watch(
+  isMobile,
+  (value) => {
+    if (value) {
+      expanded.value = true;
+      lockedExpanded.value = true;
+      allowCollapse.value = false;
+    }
+  },
+  { immediate: true }
+);
 function onHover() {
   if (!expanded.value) {
     expanded.value = true;
@@ -209,6 +300,7 @@ async function closeSidebar() {
   lockedExpanded.value = false;
   allowCollapse.value = true;
   ignoreNextFocusIn = true;
+  if (isBeaconNavEnabled.value) return;
   await nextTick();
   if (hamburgerButtonRef.value) {
     hamburgerButtonRef.value.focus();
@@ -222,7 +314,7 @@ function lockSidebar() {
 </script>
 
 <style scoped>
-.navbar {
+.navbar.classic {
   grid-area: navsidebar;
   font: var(--font-regular);
   color: var(--nav-text-color, #646464);
@@ -234,24 +326,34 @@ function lockSidebar() {
   width: 64px;
   position: relative;
 }
-.navbar::-webkit-scrollbar {
+.navbar.classic::-webkit-scrollbar {
   display: none;
 }
-.navbar a:focus-visible {
+.navbar.classic a:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
-.navbar--wrapper {
+.navbar.classic.expanded {
+  transition: width 0.3s ease;
+  width: 264px;
+}
+.navbar.classic.expanded .navbar--content ul {
+  width: 264px;
+}
+.navbar.classic.expanded .navbar--header .header-actions {
+  width: 264px;
+}
+.navbar.classic .navbar--wrapper {
   display: grid;
   grid-template-rows: 0fr auto 0fr;
-  background-color: var(--nav-background-color, #FFF);
-  border-right: 1px solid #DFDFDF;
+  background-color: var(--nav-background-color, #fff);
+  border-right: 1px solid #dfdfdf;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
 }
-.navbar--wrapper.fixed {
+.navbar.classic .navbar--wrapper.fixed {
   position: fixed;
   top: 0;
   left: 0;
@@ -260,10 +362,10 @@ function lockSidebar() {
   overflow-y: unset;
   z-index: 10;
 }
-.navbar--header {
-  border-bottom: 1px solid var(--nav-border-colors, #DFDFDF);
+.navbar.classic .navbar--header {
+  border-bottom: 1px solid var(--nav-border-colors, #dfdfdf);
 }
-.navbar--header .header-actions {
+.navbar.classic .navbar--header .header-actions {
   padding: 12px 16px;
   display: inline-flex;
   align-items: center;
@@ -272,71 +374,240 @@ function lockSidebar() {
   justify-content: space-between;
   box-sizing: border-box;
 }
-.navbar--header .header-actions.collapsed {
+.navbar.classic .navbar--header .header-actions.collapsed {
   justify-content: center;
 }
-.navbar--logo {
+.navbar.classic .navbar--logo {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.navbar--logo.big-logo {
+.navbar.classic .navbar--logo.big-logo {
   flex-direction: column;
   align-items: flex-start;
 }
-.navbar--logo .school-name {
+.navbar.classic .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 {
+.navbar.classic .navbar--logo .school-tag {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   overflow-wrap: break-word;
   word-break: break-word;
 }
-.navbar--logo img {
+.navbar.classic .navbar--logo img {
   display: inline;
   max-height: 36px;
   max-width: 180px;
 }
-.navbar--content {
+.navbar.classic .navbar--content {
   display: flex;
   flex-direction: column;
 }
-.navbar--content ul {
+.navbar.classic .navbar--content ul {
   list-style: none;
   padding: 0;
   margin: 0;
   width: 64px;
 }
-.navbar--footer {
+.navbar.classic .navbar--footer {
   display: flex;
   flex-direction: column;
 }
-.navbar--footer-logo {
+.navbar.classic .navbar--footer-logo {
   padding: 8px 16px 16px 16px;
   display: flex;
   justify-content: center;
 }
-.navbar--footer-logo img {
+.navbar.classic .navbar--footer-logo img {
   height: 32px;
   width: clamp(0px, 100%, 180px);
 }
-.navbar.expanded {
+.navbar.classic .skip-to-content {
+  overflow: hidden;
+  padding: 16px 24px 14px;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: auto;
+  height: auto;
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  z-index: 20;
+  opacity: 0;
+  pointer-events: none;
+}
+.navbar.classic .skip-to-content:focus-visible {
+  --native-outline-blue: #0000ff;
+  opacity: 1;
+  pointer-events: auto;
+  outline: var(--native-outline-blue) auto 2px;
+  outline-offset: 0px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
+}
+.navbar.classic .no-link-style {
+  text-decoration: none;
+  color: inherit;
+  max-width: 200px;
+}
+.navbar.classic .hamburger-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+.navbar.classic .hamburger-button svg {
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+}
+.navbar.beacon {
+  grid-area: navsidebar;
+  font: var(--font-regular, "Public Sans");
+  color: var(--nav-text-color, #2d2d2d);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0.1px;
   transition: width 0.3s ease;
-  width: 264px;
+  width: 64px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  position: relative;
 }
-.navbar.expanded .navbar--content ul {
-  width: 264px;
+.navbar.beacon::-webkit-scrollbar {
+  display: none;
 }
-.navbar.expanded .navbar--header .header-actions {
+.navbar.beacon a:focus-visible {
+  outline: var(--orange) auto 2px;
+  outline-offset: 0px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
+}
+.navbar.beacon.expanded {
+  transition: width 0.3s ease;
   width: 264px;
 }
-.navbar .skip-to-content {
+.navbar.beacon .navbar--wrapper {
+  display: grid;
+  grid-template-rows: 0fr auto 0fr;
+  grid-template-columns: minmax(0, 1fr);
+  background-color: var(--nav-background-color, #f7f7f7);
+  border-right: 1px solid #e9e9e9;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px 16px 0px 16px;
+}
+.navbar.beacon .navbar--wrapper.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  height: unset;
+  overflow-y: unset;
+  z-index: 10;
+}
+.navbar.beacon .navbar--header {
+  padding-bottom: 24px;
+}
+.navbar.beacon .navbar--header .header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.navbar.beacon .navbar--header .header-actions.collapsed {
+  justify-content: center;
+}
+.navbar.beacon .navbar--logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.navbar.beacon .navbar--logo.big-logo {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.navbar.beacon .navbar--logo .brand-logo {
+  background-color: #fff;
+  outline: 1px solid #d3d3d3;
+  border-radius: 6px;
+  padding: 2px;
+  min-width: 28px;
+  min-height: 28px;
+  max-width: 28px;
+  max-height: 28px;
+}
+.navbar.beacon .navbar--logo .brand-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  aspect-ratio: 1/1;
+  object-position: top;
+}
+.navbar.beacon .navbar--logo .school-name {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+.navbar.beacon .navbar--logo .school-tag {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+.navbar.beacon .navbar--logo img {
+  display: inline;
+  max-height: 36px;
+  max-width: 180px;
+}
+.navbar.beacon .navbar--content {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0px;
+  min-width: 36px;
+}
+.navbar.beacon .navbar--content .navbar-applications {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.navbar.beacon .navbar--content ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.navbar.beacon .navbar--footer {
+  display: flex;
+  flex-direction: column;
+}
+.navbar.beacon .navbar--footer-logo {
+  padding: 8px 16px 16px 16px;
+  display: flex;
+  justify-content: center;
+}
+.navbar.beacon .navbar--footer-logo img {
+  height: 32px;
+  width: clamp(0px, 100%, 180px);
+}
+.navbar.beacon .skip-to-content {
   overflow: hidden;
   padding: 16px 24px 14px;
   position: absolute;
@@ -354,20 +625,21 @@ function lockSidebar() {
   opacity: 0;
   pointer-events: none;
 }
-.navbar .skip-to-content:focus-visible {
-  --native-outline-blue: #0000FF;
+.navbar.beacon .skip-to-content:focus-visible {
+  --native-outline-blue: #0000ff;
   opacity: 1;
   pointer-events: auto;
   outline: var(--native-outline-blue) auto 2px;
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
-.navbar .no-link-style {
+.navbar.beacon .no-link-style {
   text-decoration: none;
   color: inherit;
   max-width: 200px;
+  min-width: 200px;
 }
-.navbar .hamburger-button {
+.navbar.beacon .hamburger-button {
   background: none;
   border: none;
   cursor: pointer;
@@ -375,10 +647,15 @@ function lockSidebar() {
   margin: 0;
   display: flex;
   align-items: center;
+  font-size: 16px;
+  min-height: 16px;
+  min-width: 16px;
+  max-height: 16px;
+  max-width: 16px;
 }
-.navbar .hamburger-button svg {
+.navbar.beacon .hamburger-button svg {
   cursor: pointer;
-  height: 24px;
-  width: 24px;
+  height: 16px;
+  width: 16px;
 }
 </style>

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;
@@ -21,15 +21,15 @@ interface ISidebarProps {
     schoolWebsite: string;
     showCollapseButton?: boolean;
 }
-declare var __VLS_6: {}, __VLS_26: {}, __VLS_33: {}, __VLS_45: {};
+declare var __VLS_6: {}, __VLS_41: {}, __VLS_48: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     logo?: (props: typeof __VLS_6) => any;
 } & {
-    switcher?: (props: typeof __VLS_26) => any;
+    switcher?: (props: typeof __VLS_41) => any;
 } & {
-    default?: (props: typeof __VLS_33) => any;
+    default?: (props: typeof __VLS_48) => any;
 } & {
-    logo?: (props: typeof __VLS_45) => any;
+    logo?: (props: typeof __VLS_60) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ISidebarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "toggle-expand": (width: number) => any;