sprintify-ui 0.5.7 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -1,6 +1,7 @@
 import { DateTime } from 'luxon';
 import PageDashboard from '../../.storybook/components/PageDashboard.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
+import { useSystemAlertStore } from '../stores/systemAlerts';
 
 export default {
   title: 'Layout/BaseLayoutSidebarConfigurable',
@@ -141,6 +142,13 @@ const Template = (args) => ({
     PageDashboard,
   },
   setup() {
+
+    const alerts = useSystemAlertStore();
+    alerts.push({
+      color: 'warning',
+      message: 'This is a warning message',
+    });
+
     return { args };
   },
   template: `

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -1,3 +1,4 @@
+import { useSystemAlertStore } from '../stores/systemAlerts';
 import BaseContainer from './BaseContainer.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 
@@ -113,6 +114,13 @@ const Template = (args) => ({
     BaseContainer,
   },
   setup() {
+
+    const alerts = useSystemAlertStore();
+    alerts.push({
+      color: 'warning',
+      message: 'This is a warning message',
+    });
+
     return { args };
   },
   template: `

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -83,7 +83,7 @@
 
     <template #mobile>
       <!-- Links mobile -->
-      <div class="space-y-0.5 p-2 pt-0">
+      <div class="space-y-0.5 p-2">
         <BaseNavbarSideItem
           v-for="item in menu"
           :key="item.label"

package/src/components/BaseNavbar.vue

@@ -1,5 +1,11 @@
 <template>
-  <nav :class="classInternal">
+  <nav
+    ref="navRef"
+    :class="classInternal"
+    :style="{
+      maxHeight: `${maxHeight}px`,
+    }"
+  >
     <BaseContainer size="7xl">
       <div
         :style="{
@@ -72,7 +78,7 @@ import { Icon as BaseIcon } from '@iconify/vue';
 import BaseContainer from './BaseContainer.vue';
 import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
-import { useWindowSize } from '@vueuse/core';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
 import { disableScroll, enableScroll } from '..';
 
 defineOptions({
@@ -140,7 +146,7 @@ const backgroundClass = computed(() => {
 const classInternal = computed(() => {
 
   const classes = [
-    'fixed flex flex-col top-0 left-0 w-full max-h-screen',
+    'flex flex-col top-0 left-0 w-full',
     backgroundClass.value,
   ];
 
@@ -151,6 +157,13 @@ const classInternal = computed(() => {
   return twMerge(classes, props.class)
 })
 
+const navRef = ref<HTMLElement | null>(null);
+const navRefRect = useElementBounding(navRef);
+
+const maxHeight = computed(() => {
+  return window.height.value - navRefRect.top.value;
+});
+
 const showMobileMenu = ref(false);
 
 function toggleMenu() {