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

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

@@ -4,250 +4,162 @@
     role="navigation"
     aria-label="Main"
     :class="{ expanded }"
-    :style="getBrandingStyles"
   >
-    <a
-      :href="`#${skipToContent}`"
+  <a
+      ref="skip-to-content"
+      href="#main-content-section"
       class="skip-to-content"
       data-testid="skip-to-content"
     >
-      {{ $t("navigation.skipToContent") }}
+      {{ $t('navigation.skipToContent') }}
     </a>
-    <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"
+    <div class="navbar--content">
+      <ul class="navbar-applications">
+        <li v-for="application of applications" :key="application.id">
+          <NavSidebarSection
               :application="application"
               :active="currentApplication === application.text"
-              :collapsed="!expanded && !isMobile"
+              :navbar-expanded="expanded"
             >
               <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"
-        />
+        </li>
+        <li>
+          <NavHelpArticles
+            v-if="showHelpArticles"
+            :navbar-expanded="expanded"
+            :help-article-options="helpArticleOptions"
+          />
+        </li>
+      </ul>
 
-        <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>
+    <div class="navbar--footer">
+      <NavImpersonateInfoPanel
+        v-if="true"
+        :impersonated-user="impersonatedUser"
+        :navbar-expanded="expanded"
+      />
+    </div>
+
+      <slot name="logo">
+        <NuxtLink :to="homepageUrl">
+          <div class="navbar--logo">
+            <img v-if="expanded" :src="logo.src" :alt="logo.alt">
+            <img v-else :src="logo.iconSrc" :alt="logo.alt">
+          </div>
+        </NuxtLink>
+      </slot>
   </nav>
 </template>
 
-<script setup>
-import { useSidebar, useBranding, useNuxtApp, computed, watch } from "#imports";
-import { useWindowSize } from "@vueuse/core";
+<script setup lang="ts">
 const { $t } = useNuxtApp();
-const props = defineProps({
-  clientId: { type: Number, required: true, default: void 0 },
-  applications: { type: Array, required: true, default: () => [] },
-  currentApplication: { type: String, required: false, default: "media" },
-  homepageUrl: { type: String, required: false, default: "/" },
-  showHelpArticles: { type: Boolean, required: false, default: true },
-  helpArticleOptions: { type: Array, required: false, default: () => [] },
-  impersonatedUser: { type: Object, required: false, default: () => ({
+
+interface IApplications {
+  id: number;
+  text: string;
+  url: string;
+  img_src: string;
+}
+
+interface IUser {
+  show: boolean;
+  email: string;
+  phone_number: string;
+  client: string;
+  admin_email: string;
+}
+
+interface ILogo {
+  alt: string;
+  src: string;
+  iconSrc: string;
+}
+
+interface ISidebarProps {
+  applications: Array<IApplications>;
+  currentApplication?: IApplications['text'];
+  expanded?: boolean;
+  homepageUrl?: string;
+  showHelpArticles?: boolean;
+  helpArticleOptions?: Array<any>;
+  impersonatedUser?: IUser;
+  logo: ILogo;
+}
+
+withDefaults(defineProps<ISidebarProps>(), {
+  applications: () => [],
+  currentApplication: 'media',
+  homepageUrl: '/',
+  showHelpArticles: true,
+  helpArticleOptions: () => [],
+  impersonatedUser: {
     show: false,
     email: "staff3@lms.com",
-    phone_number: "",
+    phone_number :null,
     client: "Sales Demo",
-    admin_email: ""
-  }) },
-  logo: { type: Object, required: false, default: () => ({
-    alt: "",
-    src: "poweredby.svg",
-    iconSrc: "poweredby-icon.svg"
-  }) },
-  skipToContent: { type: String, required: true, default: "#main-content-section" },
-  fixed: { type: Boolean, required: false, default: false },
-  settingsRoute: { type: String, required: true, default: "" },
-  schoolWebsite: { type: String, required: true, default: "" }
-});
-const emit = defineEmits(["toggle-expand"]);
-const { state: expanded } = useSidebar();
-const { brand, getBrandingStyles } = await useBranding(props.clientId);
-const { width: windowWidth } = useWindowSize();
-const isMobile = computed(() => windowWidth.value < 600);
-watch(expanded, (value) => {
-  emit("toggle-expand", value ? 240 : 64);
-});
-watch(
-  isMobile,
-  (value) => {
-    if (value) expanded.value = true;
+    admin_email: null
   },
-  { immediate: true }
-);
+  logo: {
+    alt: 'Thrillshare',
+    src: 'logo.svg',
+    iconSrc: 'logo.svg',
+  }
+})
 </script>
 
 <style scoped>
+/* * {
+    outline: 2px solid red;
+} */
 .navbar {
   grid-area: navsidebar;
+  display: grid;
+  grid-template-rows: 1fr auto auto;
   font: var(--font-regular);
-  color: var(--nav-text-color, #646464);
-  transition: width 0.3s ease;
-  height: 100%;
-  align-self: stretch;
-  overflow: visible;
-  scrollbar-width: none;
-  width: 64px;
-  position: relative;
-}
-.navbar::-webkit-scrollbar {
-  display: none;
+  background-color: var(--dscl-nav-background-color, var(--purple-70));
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
+  transition: min-width 0.3s ease-in-out, translate 0.2s ease-in-out;
+  height: 100vh;
+  overflow-y: auto;
+  min-width: 0px;
+  translate: -256px;
 }
 .navbar a:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
-.navbar--wrapper {
-  display: grid;
-  grid-template-rows: 1fr;
-  background-color: var(--nav-background-color, #fff);
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.navbar--wrapper.fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  height: unset;
-  overflow-y: unset;
-  z-index: 10;
-}
-.navbar--header {
-  border-bottom: 1px solid var(--nav-border-colors, #dfdfdf);
-}
-.navbar--header .header-actions {
-  padding: 12px 16px;
-  display: inline-flex;
-  align-items: center;
-  width: 64px;
-  min-height: 64px;
-  justify-content: space-between;
-  box-sizing: border-box;
+.navbar.expanded {
+  transition: min-width 0.3s ease-in-out, translate 0.2s ease-in-out;
+  min-width: 256px;
+  translate: 0px;
 }
-.navbar--header .header-actions.collapsed {
-  justify-content: center;
+.navbar--logo {
+  padding: 16px;
+  background-color: var(--dscl-nav-background-color, var(--purple-70));
 }
 .navbar--content {
   display: flex;
   flex-direction: column;
+  flex-basis: auto;
+  margin-top: 24px;
+  background-color: var(--dscl-nav-background-color, var(--purple-70));
 }
 .navbar--content ul {
   list-style: none;
-  padding: 8px 0;
+  padding: 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;
+  max-width: 256px;
 }
 .navbar--footer {
-  anchor-name: --nav-footer;
   display: flex;
   flex-direction: column;
 }
-.navbar--footer-logo {
-  padding: 8px 16px 16px 16px;
-  display: flex;
-  justify-content: center;
-}
-.navbar--footer-logo img {
-  height: 32px;
-  width: clamp(0px, 100%, 180px);
-}
-.navbar.expanded {
-  transition: width 0.3s ease;
-  width: 240px;
-}
-.navbar.expanded .navbar--content ul {
-  width: 240px;
-}
 .navbar .skip-to-content {
   overflow: hidden;
-  padding: 16px 24px 14px;
+  padding: 15px 23px 14px;
   position: absolute;
   left: 5px;
   top: 5px;
@@ -264,30 +176,11 @@ watch(
   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;
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
-.navbar .no-link-style {
-  text-decoration: none;
-  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/SidebarItem.vue

@@ -1,67 +1,40 @@
-<script setup>
-import { useSidebar, computed, resolveComponent } from "#imports";
-const props = defineProps({
-  icon: { type: String, required: false },
-  active: { type: Boolean, 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, collapsed: !expanded }"
-  >
-    <slot name="icon">
-      <Icon
-        class="icon"
-        :name="`lucide:${icon}`"
-        size="24"
-      />
-    </slot>
-    <slot v-if="expanded" />
-  </component>
+  <NuxtLink class="a-navbar-item">
+    <slot />
+  </NuxtLink>
 </template>
 
 <style scoped>
 .a-navbar-item {
-  background-color: transparent;
-  color: inherit;
-  margin: 2px 8px;
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
+  margin: 4px 16px;
   display: flex;
   align-items: center;
   text-decoration: none;
   text-transform: capitalize;
-  padding: 10px 8px;
-  border: none;
+  padding: 4px;
   border-radius: 8px;
-  gap: 8px;
-  width: calc(100% - 16px);
-  box-sizing: border-box;
-  user-select: none;
-}
-.a-navbar-item.collapsed {
-  justify-content: center;
-  font-size: 16px;
 }
 .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.active, .a-navbar-item.nuxt-link-exact-active, .a-navbar-item.router-link-exact-active {
-  background-color: var(--nav-icon-background, #eef2ff);
+.a-navbar-item.nuxt-link-exact-active, .a-navbar-item.router-link-exact-active {
+  background-color: var(--dscl-nav-active-background-color, #463e59);
   font-weight: 500;
-  color: #2d2d2d;
+  /* box-shadow: inset -4px 0px 0px 0px var(--orange-40); */
 }
-.a-navbar-item.active svg path, .a-navbar-item.nuxt-link-exact-active svg path, .a-navbar-item.router-link-exact-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, #eef2ff);
+  background-color: var(--dscl-nav-active-background-color, #463e59);
+  /* box-shadow: inset -4px 0px 0px 0px var(--orange-40); */
+}
+.a-navbar-item:focus-visible {
+  outline: var(--orange) auto 2px;
+  outline-offset: 0px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
 </style>

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

@@ -1,104 +1,56 @@
 <template>
-  <div
-    class="a-nav-section"
-    :class="{ active }"
-  >
-    <NuxtLink
-      v-if="!collapsed"
-      class="a-nav-section--link"
-      :to="applicationUrl"
-      :aria-label="appText"
-    >
-      <span v-if="expanded">{{ appText }}</span>
-      <Icon
-        v-if="expanded"
-        name="lucide:chevron-up"
-        size="16"
-        :class="['caret-icon', { collapse: !isOpen }]"
-        @click.prevent="isOpen = !isOpen"
-      />
+  <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>
-    <div :class="['a-nav-section--content', { collapse: !isOpen }]">
+    <div class="a-nav-section--content">
       <slot />
     </div>
   </div>
 </template>
 
-<script setup>
-import { useSidebar, computed, ref, useNuxtApp } from "#imports";
-const ENGAGE_APP_TEXT = "engage";
-const props = defineProps({
-  application: { type: Object, required: true },
-  active: { type: Boolean, required: true },
-  collapsed: { type: Boolean, required: true }
-});
-const { $ld } = useNuxtApp();
-const { state: expanded } = useSidebar();
-const isOpen = ref(props.active);
-const isEngageRenameEnabled = computed(() => {
-  return Boolean($ld?.flags?.engageToNewslettersNameChange);
-});
-const isNewslettersUrlEnabled = computed(() => {
-  return Boolean($ld?.flags?.engageToNewslettersUrlChange);
-});
-const appText = computed(() => {
-  const { text } = props.application || {};
-  if (text.toLowerCase() === ENGAGE_APP_TEXT && isEngageRenameEnabled.value) {
-    return "Newsletters";
-  }
-  return text.replace("_", " ");
-});
-const applicationUrl = computed(() => {
-  const { text, url } = props.application || {};
-  if (props.active) return "";
-  if (text.toLowerCase() === ENGAGE_APP_TEXT && isNewslettersUrlEnabled.value) {
-    return url.replace("engage", "newsletters");
-  }
-  return url;
-});
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  application: IApplication;
+  active: boolean;
+  navbarExpanded: boolean;
+}>();
+
+const iconUrl = computed(() =>
+  props.active
+    ? props.application.img_src?.replace(".svg", "_active.svg")
+    : props.application.img_src,
+);
 </script>
 
 <style scoped>
 .a-nav-section {
-  position: relative;
+  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::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;
-  flex-direction: column;
-  max-height: 100vh;
-  overflow: auto;
-  transition: max-height 0.3s ease;
-}
-.a-nav-section--content.collapse {
-  max-height: 0;
+.a-nav-section.active {
+  box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));
+  padding-bottom: 4px;
 }
 .a-nav-section--link {
   display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 48px;
-  padding: 0 16px;
-  color: inherit;
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
   text-decoration: none;
+  min-height: 48px;
+  align-items: center;
   font-size: 12px;
   letter-spacing: 1.4px;
-  text-transform: uppercase;
-  user-select: none;
-}
-.a-nav-section--link:not([href]) {
-  cursor: default;
+  overflow: hidden;
+  padding: 0px 16px;
+  width: 100%;
 }
 .a-nav-section--link:focus-visible {
   outline: var(--orange) auto 2px;
@@ -106,15 +58,13 @@ const applicationUrl = computed(() => {
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
 .a-nav-section--link span {
-  min-width: 0;
+  margin: 0 8px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  text-transform: uppercase;
+  width: inherit;
 }
 .a-nav-section--link .caret-icon {
-  cursor: pointer;
-  flex-shrink: 0;
-  margin-left: auto;
+  font-size: 24px;
   transition: transform 0.2s ease-in-out;
 }
 .a-nav-section--link .caret-icon.collapse {

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

@@ -6,6 +6,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+
+</script>
+
 <style scoped>
 .secondary-nav {
   display: flex;

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

@@ -1,16 +1,17 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
   icon: {
     type: String,
     required: true
-  }
-});
+  },
+})
 </script>
 
+
 <template>
   <NuxtLink class="menu-item">
     <div class="menu-item__icon">
-      <Icon :name="`lucide:${icon}`" />
+      <a-icon :icon />
     </div>
     <span class="menu-item__text">
       <slot />
@@ -47,13 +48,13 @@ defineProps({
   border-top: 2px solid transparent;
   border-radius: 4px;
 }
-.menu-item:hover, .menu-item:focus-visible, .menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {
+.menu-item:hover, .menu-item:focus, .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-visible:after, .menu-item.nuxt-link-exact-active:after, .menu-item.router-link-exact-active:after {
+.menu-item:hover:after, .menu-item:focus: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 {