@apptegy/nuxt-navigation 0.1.75 → 0.1.77

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

package/dist/runtime/components/Nav/Icons/Pinned.vue

@@ -0,0 +1,9 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.667 0.708008C11.186 0.708137 11.6846 0.91431 12.0518 1.28125C12.4188 1.64834 12.6258 2.14691 12.626 2.66602C12.626 3.1852 12.4187 3.68356 12.0518 4.05078C11.6846 4.41792 11.1862 4.62487 10.667 4.625C10.6563 4.62508 10.6454 4.62926 10.6377 4.63672C10.63 4.64437 10.6261 4.65522 10.626 4.66602V7.17285L10.6328 7.27051C10.6464 7.36774 10.6803 7.46185 10.7324 7.5459C10.7844 7.62963 10.8529 7.70153 10.9336 7.75684L11.0186 7.80664L11.0225 7.80859L12.2051 8.40625C12.5311 8.5683 12.8061 8.81858 12.998 9.12793C13.19 9.43741 13.2917 9.79503 13.292 10.1592V10.666C13.292 11.0084 13.156 11.3379 12.9141 11.5801C12.672 11.822 12.3432 11.9578 12.001 11.958H8.62598V14.666C8.62598 15.0109 8.34578 15.2906 8.00098 15.291C7.6558 15.291 7.37598 15.0112 7.37598 14.666V11.958H4.00098C3.65844 11.958 3.32914 11.8223 3.08691 11.5801C2.84468 11.3378 2.70801 11.0086 2.70801 10.666V10.1592L2.71387 10.0234C2.73613 9.70682 2.83494 9.39883 3.00293 9.12793C3.19491 8.81864 3.46988 8.56825 3.7959 8.40625L4.97852 7.80859L4.98242 7.80664C5.10016 7.74801 5.20019 7.65767 5.26953 7.5459C5.32151 7.46193 5.35555 7.36761 5.36914 7.27051L5.37598 7.17285V4.66602C5.37579 4.65524 5.3709 4.64437 5.36328 4.63672C5.3556 4.62912 5.34478 4.62512 5.33398 4.625C4.81463 4.625 4.31647 4.418 3.94922 4.05078C3.58206 3.68354 3.37598 3.18532 3.37598 2.66602C3.37616 2.14688 3.58212 1.64835 3.94922 1.28125C4.31642 0.91436 4.81488 0.708008 5.33398 0.708008H10.667Z" fill="#2D2D2D"/>
+    </svg>
+</template>
+
+<style scoped>
+svg{height:16px!important;width:16px!important}
+</style>

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

@@ -20,27 +20,27 @@
         <div :class="['header-actions', { 'collapsed': !expanded && !isMobile }]">
             <NuxtLink v-if="expanded" class="no-link-style" :to="homepageUrl">
               <slot name="logo">
-                    <div class="navbar--logo">
-                      <img v-if="brandLogo" :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 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>
-                </slot>
-              </NuxtLink>
+                  </div>
+              </slot>
+            </NuxtLink>
               <div v-if="!isMobile && showCollapseButton">
                 <button v-if="lockedExpanded && !allowCollapse && expanded" class="hamburger-button" @click="closeSidebar" v-tooltip.bottom="'Unpin menu'">
-                  <UnlockedPin />
+                  <Pinned />
                 </button>
                 <button v-if="!lockedExpanded && allowCollapse && expanded" class="hamburger-button" @click="lockSidebar" v-tooltip.bottom="'Pin menu open'">
-                  <LockedPin />
+                  <Unpinned />
                 </button>
                 <button v-if="!lockedExpanded && allowCollapse && !expanded" class="hamburger-button">
                   <a-icon icon="24:hamburger" />
@@ -91,11 +91,11 @@
 </template>
 
 <script setup>
-import { useSidebar, useBranding, useNuxtApp, ref, watch } from "#imports";
+import { useSidebar, useBranding, useNuxtApp, ref, watch, computed, onMounted, onBeforeUnmount } from "#imports";
 import ApptegyLogo from "./Icons/ApptegyLogo.vue";
-import LockedPin from "./Icons/LockedPin.vue";
-import UnlockedPin from "./Icons/UnlockedPin.vue";
 import { useBreakpoints, breakpointsTailwind } 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 },
@@ -128,10 +128,30 @@ 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 breakpoints = useBreakpoints(breakpointsTailwind);
 const isMobile = breakpoints.smaller("md");
 const lockedExpanded = ref(true);
 const allowCollapse = ref(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;
+});
 watch(expanded, (value) => {
   emit("toggle-expand", value ? 264 : 64);
 });
@@ -223,6 +243,10 @@ function lockSidebar() {
   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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.75",
+    "version": "0.1.77",
     "type": "module",
     "exports": {
         ".": {
@@ -46,5 +46,5 @@
         "vue": "^3.5.13",
         "vue-tsc": "^3.0.3"
     },
-    "gitHead": "2c1b946e8310b4be4e9be27f4a944ab5bfbaa3a9"
+    "gitHead": "112c6210e954838d100c8a5bf94c9f32d91152b1"
 }

package/dist/runtime/components/Nav/Icons/UnlockedPin.vue

@@ -1,16 +0,0 @@
-<template>
-   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_2001_18302)">
-            <path d="M7.99998 11.3333V14.6667M9.99998 6.22666V4.66666C9.99998 4.48985 10.0702 4.32028 10.1952 4.19526C10.3203 4.07023 10.4898 3.99999 10.6666 3.99999C11.0203 3.99999 11.3594 3.85952 11.6095 3.60947C11.8595 3.35942 12 3.02028 12 2.66666C12 2.31304 11.8595 1.9739 11.6095 1.72385C11.3594 1.4738 11.0203 1.33333 10.6666 1.33333H5.25998M1.33331 1.33333L14.6666 14.6667M5.99998 6V7.17333C5.99985 7.42138 5.93052 7.66449 5.79979 7.8753C5.66907 8.08611 5.48212 8.25628 5.25998 8.36666L4.07331 8.96666C3.85117 9.07705 3.66423 9.24721 3.5335 9.45803C3.40277 9.66884 3.33344 9.91194 3.33331 10.16V10.6667C3.33331 10.8435 3.40355 11.013 3.52858 11.1381C3.6536 11.2631 3.82317 11.3333 3.99998 11.3333H11.3333" stroke="#2D2D2D" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-        </g>
-        <defs>
-        <clipPath id="clip0_2001_18302">
-            <rect width="16" height="16" fill="white"/>
-        </clipPath>
-    </defs>
-    </svg>
-</template>
-
-<style scoped>
-svg{height:16px!important;width:16px!important}
-</style>