@apptegy/nuxt-navigation 0.1.1

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

@@ -0,0 +1,154 @@
+<template>
+  <div class="help-btn-wrapper">
+    <div
+      class="help-btn-actions"
+      ref="helpBtnActions"
+      :class="{ expanded: expanded && navbarExpanded }"
+      :style="{ 'max-height': `${expanded && navbarExpanded ? dropdownScrollHeight : 0}px` }"
+    >
+      <button
+        v-for="(option, idx) in helpArticleOptions"
+        :key="idx"
+        :id="`help-btn-${option.id}`"
+        class="help-btn-action"
+      >
+        {{ option.text }}
+      </button>
+    </div>
+    <button
+      :id="!isDropdown && 'help-btn'"
+      :class="['help-articles-btn', !isDropdown && 'help-btn']"
+      @click="expandDropdown"
+    >
+      <img v-if="isDropdown" src="../../assets/img/help-toggle.svg" alt="" class="help-center-btn-icon" />
+      <img v-else src="../../assets/img/help.svg" alt="" class="help-center-btn-icon" />
+      <span v-if="navbarExpanded">
+        {{ isDropdown ? $t('dscl.navigation.helpCenter') : $t('dscl.navigation.helpArticles') }}
+      </span>
+      <img
+        v-if="isDropdown && navbarExpanded && !hasArticles"
+        class="caret-icon"
+        :class="{ collapse: !expanded }"
+        src="../../assets/img/navbar-up.svg"
+        alt=""
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+interface IHelpArticlesProps {
+  navbarExpanded: boolean;
+  helpArticleOptions: Array<any>;
+};
+
+const props = withDefaults(defineProps<IHelpArticlesProps>(), {
+  helpArticleOptions: () => [],
+})
+
+const expanded = ref(false);
+const helpBtnActions = ref();
+const dropdownScrollHeight = ref(0);
+const isDropdown = ref(false);
+
+const hasArticles = computed(() => {
+ return !!props.helpArticleOptions?.values?.length
+})
+
+onMounted(() => {
+  isDropdown.value = !!props.helpArticleOptions?.values?.length;
+  dropdownScrollHeight.value = helpBtnActions.value?.scrollHeight + 12;
+});
+
+function expandDropdown() {
+  if (!isDropdown) {
+    return;
+  }
+  expanded.value = !expanded.value;
+};
+
+</script>
+
+<style scoped>
+.help-btn-wrapper {
+  box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.help-btn-wrapper .help-articles-btn {
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  background: none;
+  padding: 8px 10px 8px 16px;
+  border: none;
+}
+.help-btn-wrapper .help-articles-btn:focus-visible {
+  outline: var(--orange) solid 2px;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 3px var(--primary-white);
+  border-radius: 3px;
+}
+.help-btn-wrapper .help-articles-btn .help-center-btn-icon {
+  min-width: 32px;
+  width: 32px;
+}
+.help-btn-wrapper .help-btn-actions {
+  visibility: hidden;
+  width: 100%;
+  max-height: 0px;
+  overflow-y: hidden;
+  transition: all 0.5s ease-in-out;
+}
+.help-btn-wrapper .help-btn-actions.expanded {
+  visibility: visible;
+  margin-top: -8px;
+  padding-bottom: 6px;
+}
+.help-btn-wrapper .help-btn-action {
+  border: none;
+  padding: 0;
+  background: none;
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
+  cursor: pointer;
+  font-size: 14px;
+  width: 100%;
+  text-align: left;
+  position: relative;
+  padding: 6px 51px 6px 45px;
+}
+.help-btn-wrapper .help-btn-action:hover:before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  left: -45px;
+  background-color: var(--dscl-nav-active-background-color, #463e59);
+}
+.help-btn-wrapper .caret-icon {
+  margin-left: auto;
+  transition: transform 0.2s ease-in-out;
+  background: none;
+}
+.help-btn-wrapper .caret-icon.collapse {
+  transform: rotate(0.5turn);
+}
+.help-btn-wrapper img {
+  background: #504764;
+  border-radius: 4px;
+}
+.help-btn-wrapper span {
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
+  margin-left: 8px;
+  font-size: 12px;
+  letter-spacing: 0.4px;
+  line-height: 16px;
+}
+</style>

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

@@ -0,0 +1,135 @@
+<template>
+  <div class="a-nav-section animated" id="impersonate-info">
+    <button v-if="navbarExpanded" class="a-nav-section--title" @click="expanded = !expanded">
+      <div class="a-nav-section-title-wrapper">
+        <div class="user-grid">
+          <img src="../../assets/img/impersonate-user.svg" alt="" class="user-icon" />
+          <p class="info">{{ impersonatedUser.client }}</p>
+          <p class="info email">{{ impersonatedUser.email }}</p>
+          <img v-if="!expanded " class="panel-icon" src="../../assets/icons/24/Plus.svg" alt="" />
+          <img v-else class="panel-icon" src="../../assets/icons/24/Minus.svg" alt="" />
+        </div>
+        <div
+          ref="dropdownWrapper"
+          :style="{ 'max-height': `${expanded && navbarExpanded ? dropdownScrollHeight : 0}px` }"
+          class="a-nav-section-title-dropdown-wrapper"
+        >
+          <div class="user-grid">
+            <img src="../../assets/img/user.svg" alt="" class="user-icon" />
+            <p class="info">{{ impersonatedUser.client }}</p>
+            <p class="info email">{{ impersonatedUser.admin_email }}</p>
+          </div>
+        </div>
+      </div>
+      <!-- add plus icon -->
+    </button>
+    <!-- <img v-else src="../../assets/img/impersonate-user.svg" alt="" class="user-icon" /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from '#imports';
+
+interface IPanelProps {
+  navbarExpanded: boolean;
+  impersonatedUser: () => {
+    show: false,
+    name: '',
+    email: '',
+    client: ''
+  }
+}
+const props = defineProps<IPanelProps>();
+
+const expanded = ref(false);
+const dropdownScrollHeight = ref(0);
+const dropdownWrapper = ref();
+
+onMounted(() => {
+  dropdownScrollHeight.value = dropdownWrapper.value?.scrollHeight
+})
+
+</script>
+
+<style scoped>
+.a-nav-section {
+  cursor: pointer;
+  height: fit-content;
+  overflow: hidden;
+  background-color: var(--dscl-nav-background-color, var(--purple-70));
+}
+.a-nav-section.animated {
+  transition: overflow 0.5s ease-in-out;
+}
+.a-nav-section--title {
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
+  display: flex;
+  justify-content: space-between;
+  background: none;
+  border: none;
+  border-top: 1px var(--dscl-nav-section-border-bottom-color, var(--purple-65)) solid;
+  padding: 0;
+  width: 100%;
+  cursor: pointer;
+}
+.a-nav-section--title:focus-visible {
+  outline: var(--orange) auto 2px;
+  outline-offset: 0px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
+}
+.a-nav-section--title .a-nav-section-title-wrapper {
+  font-size: 12px;
+  letter-spacing: 0.4px;
+  line-height: 16px;
+  text-align: left;
+  width: 100%;
+}
+.a-nav-section--title .a-nav-section-title-wrapper .user-grid {
+  display: grid;
+  grid-template-columns: 56px auto 1fr;
+  grid-template-rows: 1fr 1fr;
+  align-items: center;
+  padding: 12px 0;
+}
+.a-nav-section--title .a-nav-section-title-wrapper .user-grid .user-icon {
+  grid-row: 1/span 2;
+  background: #504764;
+  border-radius: 4px;
+  padding: 4px;
+  margin-right: auto;
+  margin-left: 16px;
+}
+.a-nav-section--title .a-nav-section-title-wrapper .user-grid .info {
+  color: var(--primary-white);
+  margin: 0;
+  grid-row: 1;
+  grid-column: 2;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 450;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+}
+.a-nav-section--title .a-nav-section-title-wrapper .user-grid .email {
+  grid-column: 2;
+  grid-row: 2;
+  margin-top: 4px;
+  color: #CAC2D0;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 450;
+  line-height: 12px;
+  letter-spacing: 0.4px;
+}
+.a-nav-section--title .a-nav-section-title-wrapper .user-grid .panel-icon {
+  transition: transform 0.2s ease-in-out;
+  grid-column: 3;
+  grid-row: 1/span 2;
+  margin-left: auto;
+  margin-right: 16px;
+}
+.a-nav-section--title .a-nav-section-title-dropdown-wrapper {
+  height: fit-content;
+  transition: max-height 0.5s ease-in-out;
+}
+</style>

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="org-selection">
+    <label id="org-dropdown-label" class="sr-only">
+      {{ orgDropdownLabel }}
+    </label>
+    <div
+      ref="dropdownTriggerRef"
+      aria-labelledby="org-dropdown-label"
+      aria-controls="organizations-options-list"
+      :aria-expanded="active"
+      aria-haspopup="listbox"
+      role="combobox"
+      class="dropdown-trigger"
+    >
+      <input
+        ref="inputRef"
+        is="input"
+        class="org-title"
+        type="text"
+        placeholder="Start typing to search"
+        :value="active? newQuery : selectedOrg.name"
+        @keydown="keydownActionsOnTrigger($event, orgs, optionRef, dropdownTriggerRef, true, inputRef)"
+        @click.prevent="toggleDropdown($event, optionRef)"
+        @input="handleDropdownSearch($event, sortedOrgs, optionRef)"
+      />
+      <span v-if="selectedOrg.intranet" class="intranet selected">
+        <a-icon icon="16:lock-locked" ></a-icon>
+        {{ $t('dscl.navigation.intranet') }}
+      </span>
+      <!-- <Icon
+        style="margin-bottom: 2px"
+        :name-or-path="`dropdown${active ? '-up' : ''}`"
+        size="tiny"
+        reduced
+        variant="info"
+      /> -->
+    </div>
+    <div v-show="active" id="organizations-options-list" class="dropdown" role="listbox">
+      <div
+        v-for="(option, idx) in sortedOrgs"
+        v-on-click-outside="onClickOutsideHandler"
+        ref="optionRef"
+        :key="option.name"
+        role="option"
+        class="org-option"
+        :class="{ selected: option === selectedOrg }"
+        :aria-selected="!!String(option === selectedOrg)"
+        tabindex="-1"
+        @keydown="handleKeydownAction(orgs, idx, $event, optionRef, dropdownTriggerRef)"
+        @click="handleSelectedClick(idx)"
+      >
+        <div class="selected-space">
+          <!-- <Icon v-if="option === selectedOrg" name-or-path="success" size="tiny" /> -->
+        </div>
+        <span :class="{ pinned: option.pinned, 'item-flex': true }">{{ option?.name || option.label }}
+          <span v-if="option.intranet" class="intranet selected">
+            <a-icon icon="16:lock-locked"></a-icon>
+            {{ $t('dscl.navigation.intranet') }}
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDropdown } from '../../composables/accessibleActions.js';
+import { vOnClickOutside } from '@vueuse/components';
+import { ref, computed, useNuxtApp } from '#imports';
+const { $t } = useNuxtApp();
+
+const emit = defineEmits(['selected']);
+
+const {
+  active,
+  newQuery,
+  toggleDropdown,
+  closeDropdown,
+  onClickOutsideHandler,
+  keydownActionsOnTrigger,
+  handleKeydown,
+  handleDropdownSearch,
+  // focusDropdownItem,
+} = useDropdown();
+
+interface IOrgSelectProps {
+  orgs: Array<any>;
+  selectedOrg: {};
+};
+
+const dropdownTriggerRef = ref();
+const optionRef = ref();
+
+const props = defineProps<IOrgSelectProps>();
+
+const sortedOrgs = computed(() => {
+  return [...props.orgs].sort((a, b) => {
+    if (a.pinned && !b.pinned) {
+      return -1;
+    } else if (!a.pinned && b.pinned) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+});
+const orgDropdownLabel = computed(() => {
+  return useNuxtApp().$t('navigation.orgDropdown') || 'Select Organization'
+})
+
+function handleSelectedClick(index: number) {
+  emit('selected', index);
+  closeDropdown();
+}
+
+function handleKeydownAction(orgs: string | any[], idx: number, $event: { key: string | boolean; }, optionRef: { focus: () => void; }[], dropdownTriggerRef: { focus: () => void; }) {
+  emit('selected', idx);
+  handleKeydown(orgs, idx, $event, optionRef, dropdownTriggerRef);
+}
+</script>
+
+<style scoped>
+#organizations-options-list {
+  position: absolute;
+  width: 300px;
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: white;
+  z-index: 50;
+}
+
+.org-selection {
+  width: 300px;
+  margin-right: 25px;
+}
+.org-selection .dropdown-trigger:focus-visible {
+  outline: 2px #000FFF solid;
+}
+.org-selection .dropdown-trigger .org-title {
+  line-height: 16px;
+  width: 300px;
+  padding: 12px;
+  letter-spacing: 0.4px;
+  touch-action: manipulation;
+  color: #333;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-radius: 4px 4px 0 0;
+  border: 0;
+  border-bottom: 1px solid var(--dscl-forms-underline, #747474);
+  background: var(--dscl-forms-bg, #fbfbfb);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.org-selection .intranet {
+  background-color: var(--purple-50);
+}
+.org-selection .dropdown .org-option {
+  display: block;
+  padding: 12px;
+  min-height: 40px;
+  line-height: 16px;
+  text-decoration: none;
+  text-transform: none;
+  position: relative;
+  cursor: pointer;
+}
+.org-selection .dropdown .org-option:focus-visible, .org-selection .dropdown .org-option:hover {
+  background-color: #F8F6FC;
+}
+.org-selection .custom-search {
+  margin: 8px 16px;
+}
+.org-selection .item-flex {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+.org-selection .intranet {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--purple-50);
+  padding: 2px 4px;
+  color: white;
+  border-radius: 4px;
+}
+.org-selection .intranet svg {
+  margin-right: 4px;
+}
+.org-selection .intranet.selected {
+  background-color: var(--grey-50);
+}
+</style>

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

@@ -0,0 +1,187 @@
+<template>
+  <nav
+    class="navbar"
+    role="navigation"
+    aria-label="Main"
+    :class="{ expanded }"
+  >
+  <a
+      ref="skip-to-content"
+      href="#main-content-section"
+      class="skip-to-content"
+      data-testid="skip-to-content"
+    >
+      {{ $t('navigation.skipToContent') }}
+    </a>
+    <div class="navbar--content">
+      <ul class="navbar-applications">
+        <li v-for="application of applications" :key="application.id">
+          <NavSidebarSection
+              :application="application"
+              :active="currentApplication === application.text"
+              :navbar-expanded="expanded"
+            >
+              <slot v-if="currentApplication === application.text" />
+            </NavSidebarSection>
+        </li>
+        <li>
+          <NavHelpArticles
+            v-if="showHelpArticles"
+            :navbar-expanded="expanded"
+            :help-article-options="helpArticleOptions"
+          />
+        </li>
+      </ul>
+
+    </div>
+    <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 lang="ts">
+import { useNuxtApp } from '#imports';
+const { $t } = useNuxtApp();
+
+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 :null,
+    client: "Sales Demo",
+    admin_email: null
+  },
+  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);
+  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.expanded {
+  transition: min-width 0.3s ease-in-out, translate 0.2s ease-in-out;
+  min-width: 256px;
+  translate: 0px;
+}
+.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: 0;
+  margin: 0;
+  max-width: 256px;
+}
+.navbar--footer {
+  display: flex;
+  flex-direction: column;
+}
+.navbar .skip-to-content {
+  overflow: hidden;
+  padding: 15px 23px 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 .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);
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <NuxtLink class="a-navbar-item">
+    <slot />
+  </NuxtLink>
+</template>
+
+<style scoped>
+.a-navbar-item {
+  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: 4px;
+  border-radius: 8px;
+}
+.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.nuxt-link-exact-active, .a-navbar-item.router-link-exact-active {
+  background-color: var(--dscl-nav-active-background-color, #463e59);
+  font-weight: 500;
+  /* box-shadow: inset -4px 0px 0px 0px var(--orange-40); */
+}
+.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(--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>