@apptegy/nuxt-navigation 0.1.76 → 0.1.77

package/dist/module.json

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

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

@@ -20,21 +20,21 @@
         <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'">
                   <Pinned />
@@ -91,7 +91,7 @@
 </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 { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import Unpinned from "./Icons/Unpinned.vue";
@@ -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.76",
+    "version": "0.1.77",
     "type": "module",
     "exports": {
         ".": {
@@ -46,5 +46,5 @@
         "vue": "^3.5.13",
         "vue-tsc": "^3.0.3"
     },
-    "gitHead": "b115e75078e5a86f7ce2d2b358f68dbcdd43617a"
+    "gitHead": "112c6210e954838d100c8a5bf94c9f32d91152b1"
 }