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

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

@@ -1,202 +1,200 @@
 <template>
   <header
-    class="header"
     :class="{ sticky }"
     role="banner"
   >
-    <div class="header__logo">
-      <slot name="logo">
-        <NuxtLink
-          class="no-link-style"
-          :to="homepageUrl"
-        >
-          <div
-            class="header__logo-content"
-            :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>
-        </NuxtLink>
-      </slot>
-    </div>
+    <button
+      class="sidebar-toggle"
+      @click="toggleSidebar">
+        <a-icon
+          class="icon"
+          icon="16:apptegy"
+        />
+        <span>Menu</span>
+    </button >
     <div class="header__breadcrumbs">
       <slot name="breadcrumbs" />
     </div>
-    <div class="user-control-actions">
-      <slot name="org-select" />
-      <slot name="user-controls" />
-      <NavUserDropdown
-        :user="user"
-        :user-dropdown-options="userDropdownOptions"
-        :impersonated-user="impersonatedUser"
-        @select-option="(index) => $emit('selected-option', index)"
+    <slot name="org-select" />
+    <slot name="user-controls" />
+    <div
+      ref="settingsTriggerRef"
+      aria-controls="settings-dropdown"
+      :aria-expanded="active"
+      aria-haspopup="listbox"
+      role="combobox"
+      tabindex="0"
+      class="header__dropdown"
+      @keydown="keydownActionsOnTrigger($event, userSettingsOptions, settingsOptionsRef, settingsTriggerRef, false, '')"
+      @click.prevent="toggleDropdown($event, settingsOptionsRef)">
+      <NavAvatar
+        :name="user.name"
+        :src="user.avatar"
       />
-      <template v-if="impersonatedUser?.show">
-        <button
-          v-if="useLogoutEmit"
-          class="logout-impersonate-user"
-          :aria-label="$t('accountSettings.signOut')"
-          @click="$emit('user-logout')"
-        >
-          <Icon
-            name="lucide:log-out"
-            size="20"
-            color="#662E80"
-          />
-        </button>
-        <NuxtLink
-          v-else
-          class="logout-impersonate-user"
-          :to="'/logout'"
-        >
-          <Icon
-            name="lucide:log-out"
-            size="20"
-            color="#662E80"
+      <a-icon
+        class="icon"
+        icon="24:hamburger"
+      />
+      <span class="sr-only">Account Settings</span>
+    </div>
+    <div
+      v-show="active"
+      id="settings-dropdown"
+      class="options-dropdown"
+      role="listbox"
+    >
+      <div
+        v-for ="(option, idx) in userSettingsOptions"
+        v-on-click-outside="onClickOutsideHandler"
+        ref="settingsOptionsRef"
+        :key="option.label"
+        role="option"
+        class="option"
+        tabindex="-1"
+        @keydown="handleKeydownAction(userSettingsOptions, idx, $event, settingsOptionsRef, settingsTriggerRef)"
+        @click="handleSelectedClick(idx)"
+      >
+        <NuxtLink :to="option.url">
+          {{ option.label }}
+          <a-icon
+            :icon="option.icon"
+            color="black"
+            font-size="32px"
           />
         </NuxtLink>
-      </template>
+      </div>
     </div>
   </header>
 </template>
 
-<script setup>
-import { useBranding, useNuxtApp, ref, computed, onMounted, onBeforeUnmount } from "#imports";
-import ApptegyLogo from "./Icons/ApptegyLogo.vue";
-const { $t } = useNuxtApp();
-const props = defineProps({
-  sticky: { type: Boolean, required: false },
-  clientId: { type: Number, required: false },
-  homepageUrl: { type: String, required: false, default: "/" },
-  isAdmin: { type: Boolean, required: false, default: false },
-  user: { type: Object, required: true },
-  impersonatedUser: { type: Object, required: false },
-  useLogoutEmit: { type: Boolean, required: false },
-  userDropdownOptions: { type: Array, required: true }
-});
-defineEmits(["selected-option", "user-logout"]);
-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);
-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;
-});
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDropdown } from '../../composables/accessibleActions.js';
+import { vOnClickOutside } from '@vueuse/components';
+
+const {
+  active,
+  toggleDropdown,
+  closeDropdown,
+  keydownActionsOnTrigger,
+  handleKeydown,
+  onClickOutsideHandler,
+} = useDropdown();
+
+interface IHeaderProps {
+  user: {
+    name: string;
+    avatar?: string;
+  };
+  sticky?: boolean;
+  userSettingsOptions: Array<any>;
+  selectedSetting?: {}
+}
+
+const props = defineProps<IHeaderProps>();
+
+const settingsTriggerRef = ref();
+const settingsOptionsRef = ref();
+
+const emit = defineEmits(['toggle-sidebar', 'select-setting']);
+
+function handleSelectedClick(index: number) {
+  emit('select-setting', index);
+  closeDropdown();
+}
+
+function handleKeydownAction(userSettingsOptions: any[], idx: number, $event: { key: string | boolean; }, optionRef: { focus: () => void; }[], dropdownTriggerRef: { focus: () => void; }) {
+  emit('select-setting', idx);
+  handleKeydown(userSettingsOptions, idx, $event, optionRef, dropdownTriggerRef);
+}
+
+function toggleSidebar() {
+  emit('toggle-sidebar');
+}
 </script>
 
 <style scoped>
-header.header {
-  position: relative;
+header {
   grid-area: navheader;
   display: grid;
+  grid-auto-flow: column;
   grid-template-columns: auto 1fr auto;
   gap: 16px;
   align-items: center;
-  padding: 16px 32px;
+  padding: 24px 64px 24px 36px;
   width: 100%;
   background-color: var(--primary-white);
   font: var(--font-regular);
 }
-header.header .header__logo {
-  display: flex;
-  align-items: center;
+@media only screen and (max-width: 960px) {
+  header {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
 }
-header.header .header__logo .no-link-style {
-  text-decoration: none;
-  color: inherit;
+header.sticky {
+  position: sticky;
 }
-header.header .header__logo .header__logo-content {
+header .sidebar-toggle {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-header.header .header__logo .header__logo-content.big-logo {
-  flex-direction: column;
-  align-items: flex-start;
-}
-header.header .header__logo .header__logo-content img {
-  display: inline;
-  max-height: 36px;
-  max-width: 180px;
-}
-header.header .header__logo .header__logo-content .school-name {
-  font-size: 16px;
-  font-weight: 700;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  white-space: nowrap;
-}
-header.header .header__logo .header__logo-content .school-tag {
-  font-size: 14px;
-  font-weight: 400;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-header.header .header__breadcrumbs {
-  grid-column: 2;
-}
-header.header .user-control-actions {
-  grid-column: 3;
-  display: flex;
-  justify-content: end;
-  gap: 8px;
+  gap: 4px;
+  background: var(--purple-20);
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  color: var(--purple);
+  cursor: pointer;
 }
-header.header .logout-impersonate-user {
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
+header .sidebar-toggle:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
+}
+header .header__dropdown {
+  font-size: 24px;
+  min-width: 64px;
+  width: 64px;
+  max-width: 64px;
+  border: none;
+  padding: 0;
+  outline: none;
+  color: var(--purple);
   background: var(--purple-20);
+  border-radius: 16px;
+  overflow: hidden;
+  text-align: left;
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
-  border: none;
   cursor: pointer;
 }
-header.header .logout-impersonate-user:hover {
-  background: var(--purple-30);
+header .header__dropdown:focus {
+  box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
 }
-@media only screen and (width <= 960px) {
-  header.header {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
+header .header__dropdown .avatar-container:focus {
+  outline: none;
 }
-header.header.sticky {
-  position: sticky;
+header .options-dropdown {
+  min-height: 100px;
+  position: absolute;
+  width: 198px;
+  right: 65px;
+  top: 80px;
+  background-color: #FFFFFF;
+  border-radius: 4px;
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
+  padding: 12px 0;
+  z-index: 10;
+}
+header .options-dropdown .option {
+  padding: 12px 16px;
+  cursor: pointer;
+}
+header .options-dropdown .option a {
+  color: #333;
+  text-decoration: none;
+}
+header .options-dropdown .option:focus-visible, header .options-dropdown .option:hover {
+  background-color: #F8F6FC;
 }
 </style>

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

@@ -1,149 +1,92 @@
 <template>
-  <div
-    class="help-btn-wrapper"
-    :class="{ collapsed }"
-  >
-    <button
-      v-if="schoolWebsite"
-      :id="'school-website'"
-      class="help-articles-btn"
-      :class="{ collapsed }"
-      :aria-label="$t('navigation.website')"
-      @click="goToWebsite"
+  <div class="help-btn-wrapper">
+    <div
+      class="help-btn-actions"
+      ref="helpBtnActions"
+      :class="{ expanded: expanded && navbarExpanded }"
+      :style="{ 'max-height': `${expanded && navbarExpanded ? dropdownScrollHeight : 0}px` }"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
+      <button
+        v-for="(option, idx) in helpArticleOptions"
+        :key="idx"
+        :id="`help-btn-${option.id}`"
+        class="help-btn-action"
       >
-        <path
-          d="M4 8H6.64922C6.87629 8 7.0966 7.92272 7.27391 7.78087L11.3753 4.49976C11.7405 4.20758 12.2595 4.20758 12.6247 4.49976L16.7261 7.78087C16.9034 7.92272 17.1237 8 17.3508 8H20M4 18H20M5 10V16M19 10V16M9 11V15M12 11V15M15 11V15M12.5 8.5V8.5C12.2239 8.77614 11.7761 8.77614 11.5 8.5V8.5C11.2239 8.22386 11.2239 7.77614 11.5 7.5V7.5C11.7761 7.22386 12.2239 7.22386 12.5 7.5V7.5C12.7761 7.77614 12.7761 8.22386 12.5 8.5Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </button>
+        {{ option.text }}
+      </button>
+    </div>
     <button
-      v-if="showHelpArticles"
       :id="!isDropdown && 'help-btn'"
-      :class="[
-  'help-articles-btn',
-  !isDropdown && 'help-btn',
-  isRoomsUser && `help-btn-${userRoomsRole}`,
-  collapsed && 'collapsed'
-]"
-      :aria-label="isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles')"
+      :class="['help-articles-btn', !isDropdown && 'help-btn']"
       @click="expandDropdown"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          d="M10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10C14 10.7571 13.5793 11.4159 12.959 11.7555C12.4745 12.0207 12 12.4477 12 13V14M12 16V17M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </button>
-    <button
-      v-if="settingsRoute"
-      :id="!isDropdown && 'help-btn'"
-      :class="['help-articles-btn', !isDropdown && 'help-btn', collapsed && 'collapsed']"
-      :aria-label="$t('navigation.accountSettings')"
-      @click="goToSettings"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          d="M17 18.3153L18.3487 16.958C18.5827 16.7213 18.6067 16.3487 18.4047 16.0833L17.4807 14.8713C17.6547 14.5393 17.798 14.1933 17.9087 13.8367L19.42 13.6387C19.752 13.5953 20 13.3127 20 12.978V11.022C20 10.6873 19.752 10.404 19.42 10.3613L17.9 10.162C17.784 9.796 17.6347 9.44133 17.4533 9.10267L18.3773 7.874C18.578 7.608 18.5513 7.23533 18.3153 7.00067L16.958 5.652C16.72 5.41667 16.3473 5.39333 16.084 5.59333L14.8473 6.536C14.5187 6.36533 14.178 6.22467 13.8267 6.116L13.6393 4.586C13.5987 4.25133 13.3153 4 12.978 4H11.022C10.6867 4 10.404 4.24867 10.3613 4.58067L10.1613 6.11733C9.79533 6.23067 9.442 6.37733 9.10333 6.55667L7.87733 5.624C7.612 5.422 7.23667 5.448 7.00067 5.68533L5.65267 7.042C5.416 7.28133 5.39333 7.658 5.6 7.92333L6.53267 9.11533C6.35133 9.45333 6.204 9.80533 6.08933 10.1693L4.58267 10.3607C4.24933 10.4033 4 10.686 4 11.022V12.978C4 13.3147 4.25067 13.5973 4.584 13.6393L6.07867 13.8253C6.192 14.1933 6.34067 14.55 6.52267 14.8933L5.61667 16.134C5.42267 16.4 5.45133 16.768 5.68533 17.0007L7.04333 18.348C7.27933 18.582 7.65 18.6073 7.91467 18.4073L9.13533 17.486C9.466 17.6593 9.81133 17.8007 10.166 17.9107L10.3607 19.4187C10.4033 19.7513 10.6867 20 11.022 20H12.978C13.312 20 13.5947 19.7527 13.6387 19.4213L13.84 17.9053C14.2027 17.7933 14.5533 17.6473 14.89 17.4687L16.1313 18.382C16.3987 18.5773 16.7667 18.5493 17 18.3153Z"
-          stroke="currentColor"
-        />
-        <circle
-          cx="12"
-          cy="12"
-          r="3"
-          stroke="currentColor"
-        />
-      </svg>
+      <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>
-import { useSidebar, navigateTo, useAuth } from "#imports";
-import { ref, computed, onMounted } from "vue";
-const { userProfile } = useAuth();
-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 },
-  collapsed: { type: Boolean, required: true }
-});
-const { state: expandedSidebar } = useSidebar();
+<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 isRoomsUser = computed(() => {
-  return !!userProfile.value?.roles?.rooms;
-});
-const userRoomsRole = computed(() => {
-  return userProfile.value?.roles?.rooms;
-});
-const hasArticles = computed(() => !!props.helpArticleOptions?.values?.length);
+
+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.value) return;
+  if (!isDropdown) {
+    return;
+  }
   expanded.value = !expanded.value;
-}
-async function goToSettings() {
-  await navigateTo(`${props.settingsRoute}`, { external: true });
-}
-async function goToWebsite() {
-  await navigateTo(`${props.schoolWebsite}`, { external: true });
-}
+};
+
 </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: row;
+  flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
   width: 100%;
-  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;
+  width: 100%;
   align-items: center;
   background: none;
-  padding: 10px 0px 10px 8px;
+  padding: 8px 10px 8px 16px;
   border: none;
-  text-transform: inherit;
 }
 .help-btn-wrapper .help-articles-btn:focus-visible {
   outline: var(--orange) solid 2px;
@@ -155,11 +98,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;
+  width: 100%;
   max-height: 0px;
   overflow-y: hidden;
   transition: all 0.5s ease-in-out;
@@ -173,9 +114,10 @@ async function goToWebsite() {
   border: none;
   padding: 0;
   background: none;
-  color: var(--nav-text-color, var(--primary-white));
+  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;
@@ -188,7 +130,7 @@ async function goToWebsite() {
   bottom: 0px;
   right: 0px;
   left: -45px;
-  background-color: var(--nav-background-color, var(--purple-70));
+  background-color: var(--dscl-nav-active-background-color, #463e59);
 }
 .help-btn-wrapper .caret-icon {
   margin-left: auto;
@@ -198,12 +140,12 @@ async function goToWebsite() {
 .help-btn-wrapper .caret-icon.collapse {
   transform: rotate(0.5turn);
 }
-.help-btn-wrapper svg {
+.help-btn-wrapper img {
+  background: #504764;
   border-radius: 4px;
-  color: var(--nav-icon-color, #662e80);
 }
 .help-btn-wrapper span {
-  color: var(--nav-text-color, var(--primary-white));
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
   margin-left: 8px;
   font-size: 12px;
   letter-spacing: 0.4px;