@apptegy/nuxt-navigation 0.1.24 → 0.1.25

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -8,7 +8,6 @@ const module = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     addComponentsDir({ path: resolver.resolve("runtime/components") });
     addImportsDir(resolver.resolve("runtime/composables"));
-    addPlugin({ src: resolver.resolve("runtime/plugins/branding") });
     nuxt.hook("nitro:config", async (nitroConfig) => {
       nitroConfig.publicAssets ||= [];
       nitroConfig.publicAssets.push({

package/dist/runtime/api/brand.d.ts

@@ -0,0 +1,3 @@
+export declare function apiBrands(authFetch: any): {
+    getBrandSettings: (clientId: number) => Promise<unknown>;
+};

package/dist/runtime/api/brand.js

@@ -0,0 +1,8 @@
+export function apiBrands(authFetch) {
+  function getBrandSettings(clientId) {
+    return authFetch("/v2/public/brand_settings/" + clientId);
+  }
+  return {
+    getBrandSettings
+  };
+}

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

@@ -17,10 +17,14 @@
     </a>
     <div class="navbar--header">
       <div class="header-actions">
-          <NuxtLink v-if="expanded" :to="homepageUrl">
+          <NuxtLink v-if="expanded" class="no-link-style" :to="homepageUrl">
             <slot name="logo">
                 <div class="navbar--logo">
                   <img :src="brandLogo">
+                  <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>
             </slot>
           </NuxtLink>
@@ -70,12 +74,6 @@ import { useSidebar, useBranding, ref } from '#imports';
 import type { IApplication, IUser } from "../../types";
 import tsBrandLogo from '../../assets/thrillshare-logo-white.svg';
 
-
-const { state: expanded } = useSidebar();
-const { brand, getBrandingStyles } = useBranding();
-
-const brandLogo = ref(brand?.logo_light || tsBrandLogo);
-
 interface ILogo {
   alt: string;
   src: string;
@@ -83,6 +81,7 @@ interface ILogo {
 }
 
 interface ISidebarProps {
+  clientId: number;
   applications: Array<IApplication>;
   currentApplication?: IApplication['text'];
   homepageUrl?: string;
@@ -93,7 +92,7 @@ interface ISidebarProps {
   skipToContent: string;
 }
 
-withDefaults(defineProps<ISidebarProps>(), {
+const props = withDefaults(defineProps<ISidebarProps>(), {
   applications: () => [],
   currentApplication: 'media',
   homepageUrl: '/',
@@ -102,7 +101,7 @@ withDefaults(defineProps<ISidebarProps>(), {
   impersonatedUser: () => ({
     show: false,
     email: "staff3@lms.com",
-    phone_number : '',
+    phone_number: '',
     client: "Sales Demo",
     admin_email: '',
   }),
@@ -112,7 +111,14 @@ withDefaults(defineProps<ISidebarProps>(), {
     iconSrc: 'poweredby-icon.svg',
   }),
   skipToContent: '#main-content-section',
-})
+  clientId: undefined,
+});
+
+const { state: expanded } = useSidebar();
+const { brand, getBrandingStyles } = await useBranding(props.clientId);
+
+const brandLogo = ref(brand.value?.logo_light || tsBrandLogo);
+
 
 // Debounced Expand on Hover
 let expandedTimer = null;
@@ -169,12 +175,29 @@ function onHoverLeave() {
   height: 64px;
   justify-content: space-between;
 }
+.navbar .no-link-style {
+  text-decoration: none;
+  color: inherit;
+}
 .navbar--logo {
-  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.navbar--logo .school-name {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+}
+.navbar--logo .school-tag {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
 }
 .navbar--logo img {
-  max-height: 32px;
-  width: clamp(0px, 100%, 180px);
+  display: inline;
+  max-height: 36px;
+  max-width: 180px;
 }
 .navbar--content {
   display: flex;

package/dist/runtime/composables/useBranding.d.ts

@@ -1,4 +1,22 @@
-export declare function useBranding(): {
-    brand: any;
-    getBrandingStyles: any;
-};
+export declare function useBranding(clientId?: number): Promise<{
+    brand: import("vue").Ref<null>;
+    getBrandingStyles: import("vue").ComputedRef<{
+        '--brand-color'?: undefined;
+        '--nav-background-color'?: undefined;
+        '--nav-text-color'?: undefined;
+        '--nav-border-colors'?: undefined;
+        '--nav-icon-background'?: undefined;
+        '--nav-icon-color'?: undefined;
+        '--nav-active-icon-background'?: undefined;
+        '--nav-active-icon-color'?: undefined;
+    } | {
+        '--brand-color': any;
+        '--nav-background-color': string;
+        '--nav-text-color': string;
+        '--nav-border-colors': string;
+        '--nav-icon-background': string;
+        '--nav-icon-color': string;
+        '--nav-active-icon-background': string;
+        '--nav-active-icon-color': string;
+    }>;
+}>;

package/dist/runtime/composables/useBranding.js

@@ -1,8 +1,19 @@
-export function useBranding() {
-  const brand = useNuxtApp().$branding;
-  const brandPrimaryColor = computed(() => brand?.colors?.primary_color.hex || "#000000");
+import { computed, ref, useRuntimeConfig } from "#imports";
+let brand = ref(null);
+export async function useBranding(clientId) {
+  if (clientId !== void 0) {
+    const config = useRuntimeConfig();
+    try {
+      const oidcUrl = config.public.APPTEGY_OIDC_URL || config.public.apptegyOIDCUrl;
+      const { data } = await $fetch(oidcUrl + "/api/v2/public/brand_settings/" + clientId);
+      brand.value = data;
+    } catch (e) {
+      console.error("Error fetching brand settings:", e);
+    }
+  }
+  const brandPrimaryColor = computed(() => brand.value?.colors?.primary_color.hex || "#000000");
   const getBrandingStyles = computed(() => {
-    if (!brand) return {};
+    if (!brand.value) return {};
     return {
       "--brand-color": brandPrimaryColor.value,
       "--nav-background-color": "#f6f6f6",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "type": "module",
   "exports": {
     ".": {

package/dist/runtime/plugins/branding.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/runtime/plugins/branding.js

@@ -1,12 +0,0 @@
-import { defineNuxtPlugin, useAppConfig, useRuntimeConfig } from "#imports";
-export default defineNuxtPlugin(async (_nuxtApp) => {
-  const appConfig = useAppConfig();
-  if (!appConfig?.navigation?.branding) return;
-  const config = useRuntimeConfig();
-  const { data: brandData } = await $fetch(config.public.authUrl + "/v2/public/brand_settings");
-  return {
-    provide: {
-      branding: brandData
-    }
-  };
-});