@flux-ui/dashboard 3.0.0-next.0 → 3.0.0-next.10

package/src/component/FluxDashboardMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <aside :class="$style.dashboardMenu">
+    <aside :class="[$style.dashboardMenu, isMenuCollapsed && $style.dashboardMenuCollapsed]">
         <FluxDashboardTopBar>
             <slot name="top-bar-start"/>
 
@@ -25,11 +25,14 @@
     setup>
     import { FluxIcon, FluxSpacer } from '@flux-ui/components';
     import type { FluxIconName } from '@flux-ui/types';
+    import { useDashboardInjection } from '$fluxDashboard/composable';
     import FluxDashboardTopBar from './FluxDashboardTopBar.vue';
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import $style from '$fluxDashboard/css/component/DashboardPane.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
         readonly title: string;
     }>();
+
+    const {isMenuCollapsed} = useDashboardInjection();
 </script>

package/src/component/FluxDashboardNavigation.vue

@@ -1,31 +1,44 @@
 <template>
-    <div
-        v-for="index of 2"
-        :key="index"
-        :class="isNavigationCollapsed ? $style.dashboardNavigationRoundingFixCollapsed : $style.dashboardNavigationRoundingFix"/>
-
     <nav
         v-bind="$attrs"
         :class="isNavigationCollapsed ? $style.dashboardNavigationCollapsed : $style.dashboardNavigation">
-        <router-link
-            v-if="slots.logo"
-            :class="$style.dashboardNavigationLogo"
-            :to="logoLocation || '/'">
-            <slot
-                name="logo"
-                v-bind="{isNavigationCollapsed}"/>
-        </router-link>
-
-        <slot/>
+        <header :class="$style.dashboardNavigationHeader">
+            <FluxMenuItem
+                icon-leading="bars"
+                @click="isNavigationCollapsed = !isNavigationCollapsed"/>
+
+            <router-link
+                v-if="slots.logo"
+                :class="$style.dashboardNavigationLogo"
+                :to="logoLocation || '/'">
+                <slot
+                    name="logo"
+                    v-bind="{isNavigationCollapsed}"/>
+            </router-link>
+
+            <FluxMenuItem
+                icon-leading="ellipsis-h"
+                @click="isMenuCollapsed = !isMenuCollapsed"/>
+        </header>
+
+        <div
+            v-for="index of 2"
+            :key="index"
+            :class="$style.dashboardNavigationRoundingFix"/>
+
+        <main :class="$style.dashboardNavigationNav">
+            <slot/>
+        </main>
     </nav>
 </template>
 
 <script
     lang="ts"
     setup>
+    import { FluxMenuItem } from '@flux-ui/components';
     import type { FluxTo } from '@flux-ui/types';
     import { useDashboardInjection } from '$fluxDashboard/composable';
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import $style from '$fluxDashboard/css/component/DashboardNavigation.module.scss';
 
     defineOptions({
         inheritAttrs: false
@@ -40,5 +53,8 @@
         logo?(): any;
     }>();
 
-    const {isNavigationCollapsed} = useDashboardInjection();
+    const {
+        isMenuCollapsed,
+        isNavigationCollapsed
+    } = useDashboardInjection();
 </script>

package/src/component/FluxDashboardSide.vue

@@ -19,7 +19,7 @@
     setup>
     import { FluxSpacer } from '@flux-ui/components';
     import FluxDashboardTopBar from './FluxDashboardTopBar.vue';
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import $style from '$fluxDashboard/css/component/DashboardPane.module.scss';
 
     defineProps<{
         readonly title: string;

package/src/component/FluxDashboardTopBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <header :class="$style.dashboardTopBar">
+    <header :class="[$style.dashboardTopBar, !isMenuCollapsed && $style.dashboardTopBarCollapsed]">
         <slot/>
     </header>
 </template>
@@ -7,5 +7,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import { useDashboardInjection } from '$fluxDashboard/composable';
+    import $style from '$fluxDashboard/css/component/DashboardTopBar.module.scss';
+
+    const {isMenuCollapsed} = useDashboardInjection();
 </script>

package/src/css/component/Dashboard.module.scss

@@ -1,323 +1,68 @@
-.dashboard {
-    --dashboard-navigation-background: rgb(var(--primary-11));
-
-    display: grid;
-    min-height: 100vh;
-    grid-template-columns: auto minmax(0, 1fr);
-    background: rgb(var(--gray-0));
-
-    &:has(> .dashboardMenu) {
-        grid-template-columns: auto 300px minmax(0, 1fr);
-    }
-
-    &:has(> .dashboardSide) {
-        grid-template-columns: auto minmax(0, 1fr) 330px;
-    }
+@use '../../../../components/src/css/mixin';
 
-    &:has(> .dashboardMenu):has(> .dashboardSide) {
-        grid-template-columns: auto 300px minmax(0, 1fr) 330px;
-    }
-
-    .notice.isFluid + .dashboardContent:not(:has(> .table:first-child)) {
-        padding-top: 30px;
-    }
-
-    .notice.isFluid + .dashboardContent > .table:first-child {
-        border-top: 0;
-    }
+:root {
+    --dashboard-background: rgb(var(--gray-0));
+    --dashboard-duration: 360ms;
+    --dashboard-navigation-background: rgb(var(--primary-11));
+    --dashboard-navigation-foreground: rgb(var(--primary-0));
 }
 
-[dark] .dashboard {
+[dark] {
     --dashboard-navigation-background: color-mix(in srgb, rgb(var(--gray-0)), black 50%);
 }
 
-.dashboardBody {
-    position: relative;
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-}
-
-.dashboardContent {
-    display: flex;
-    padding: 0 30px;
-    flex-flow: column;
-    flex-grow: 1;
-
-    > :is(.calendar, .table) {
-        margin-left: -30px;
-        margin-right: -30px;
-        height: calc(100dvh - 84px);
-        flex-grow: 1;
-    }
-
-    > .calendar {
-        border-left: 0;
-        border-right: 0;
-        border-radius: 0;
-
-        .calendarActions {
-            padding-left: 30px;
-            padding-right: 30px;
-        }
-    }
-
-    > .table {
-        border-top: 1px solid rgb(var(--gray-3));
-
-        .tableCell:first-child .tableCellContent {
-            padding-left: 30px;
-        }
-
-        .tableCell:last-child .tableCellContent {
-            padding-right: 30px;
-        }
-    }
-}
-
-.dashboardPane {
-    position: sticky;
-    top: 0;
-    height: 100dvh;
-    flex-shrink: 0;
-    background: rgb(var(--gray-1));
-    overflow: auto;
-
-    .menuSubHeader {
-        background: linear-gradient(to bottom, rgb(var(--gray-1)) 75%, transparent);
-    }
-
-    .dashboardTopBar {
-        background: rgb(var(--gray-1) / .9);
-    }
-
-    .filter {
-        --background: rgb(var(--gray-1));
-
-        max-height: calc(100dvh - 84px);
-        margin-top: -9px;
-        padding: 9px 18px 18px;
-        width: 100%;
-
-        .filterHeader {
-            margin-left: -18px;
-            margin-right: -18px;
-            padding-left: 18px;
-            padding-right: 18px;
-        }
-
-        .menu {
-            font-size: 14px;
-        }
-
-        .menuItemCommand {
-            font-size: 12px;
-        }
-
-        .menuItemIcon {
-            font-size: 16px;
-        }
-
-        .menu > :where(.divider, .separator) {
-            margin-left: -18px;
-            margin-right: -18px;
-        }
-    }
-}
-
-.dashboardMenu {
-    composes: dashboardPane;
-
-    border-right: 1px solid rgb(var(--gray-2));
-}
-
-.dashboardMenuBody {
-    padding: 0 18px 30px;
+body:has(.root > .dashboard) {
+    background: var(--dashboard-background);
 }
 
-.dashboardSide {
-    composes: dashboardPane;
-
-    border-left: 1px solid rgb(var(--gray-2));
+.dashboard {
+    min-height: 100dvh;
 }
 
-.dashboardNavigation {
-    position: sticky;
+.dashboardMount {
     display: flex;
-    top: 0;
-    height: 100dvh;
-    width: 300px;
-    padding: 15px;
+    align-items: stretch;
     flex-flow: column;
-    gap: 15px;
-    background: var(--dashboard-navigation-background);
-    transition: width 210ms var(--swift-out);
-
-    .divider {
-        margin: 3px 15px;
-    }
-
-    .dividerLine {
-        background: rgb(var(--primary-10));
-    }
-
-    .menu {
-        flex-grow: 1;
-    }
-
-    .menuItem {
-        padding: 15px;
-        color: rgb(var(--primary-0));
-        overflow: hidden;
-
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--primary-10));
-            }
-        }
-
-        &:active {
-            background: rgb(var(--primary-9));
-        }
-    }
-
-    .menuItemHighlighted {
-        background: rgb(var(--primary-10) / .5);
-    }
-
-    .menuItemIcon {
-        color: rgb(var(--primary-0));
-        font-size: 24px;
-    }
+}
 
-    .menuItemLabel {
-        transition: opacity 210ms var(--swift-out);
-        white-space: nowrap;
-    }
+.isResizing, .isResizing * {
+    animation: none !important;
+    transition: none !important;
 }
 
-[dark] .dashboardNavigation {
-    .dividerLine {
-        background: rgb(var(--gray-2));
-    }
+@include mixin.breakpoint-up(lg) {
+    .dashboard {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-rows: minmax(0, 1fr);
+        transition: padding-left var(--dashboard-duration) var(--swift-out);
 
-    .menuItem {
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--gray-2));
-            }
+        &:has(> .dashboardNavigation) {
+            padding-left: 300px;
         }
 
-        &:active {
-            background: rgb(var(--gray-3));
+        &:has(> .dashboardNavigationCollapsed) {
+            padding-left: 84px;
         }
-    }
-
-    .menuItemHighlighted {
-        background: rgb(var(--gray-1));
-    }
-}
-
-.dashboardNavigationCollapsed {
-    composes: dashboardNavigation;
-
-    width: 84px;
 
-    .menuItem {
-        width: 54px;
-    }
-
-    .menuItemLabel {
-        opacity: 0;
-    }
-}
-
-.dashboardNavigationLogo {
-    display: flex;
-    height: 54px;
-    width: 54px;
-    align-items: center;
-    justify-content: center;
-
-    :is(svg) {
-        max-height: 48px;
-        max-width: 48px;
-        width: 100%;
-    }
-}
-
-.dashboardNavigationRoundingFix {
-    position: fixed;
-    display: block;
-    left: 300px;
-    height: var(--radius);
-    width: var(--radius);
-    content: '';
-    background: var(--dashboard-navigation-background);
-    transition: left 210ms var(--swift-out);
-    z-index: 750;
-
-    &::before {
-        position: absolute;
-        display: block;
-        inset: 0;
-        content: '';
-        background: rgb(var(--gray-1));
-    }
-
-    &:first-of-type {
-        top: 0;
-
-        &::before {
-            border-top-left-radius: var(--radius);
+        .dashboardMount {
+            grid-column: 2;
         }
-    }
 
-    &:not(:first-of-type) {
-        bottom: 0;
+        .dashboardMenu {
+            grid-column: 1;
+        }
 
-        &::before {
-            border-bottom-left-radius: var(--radius);
+        .dashboardSide {
+            grid-column: 3;
         }
     }
 }
 
-.dashboardNavigationRoundingFixCollapsed {
-    composes: dashboardNavigationRoundingFix;
-
-    left: 84px;
-}
-
-.dashboard:not(:has(.dashboardMenu)) .dashboardNavigationRoundingFix::before {
-    background: rgb(var(--gray-0));
-}
-
-.dashboardTopBar {
-    position: sticky;
-    display: flex;
-    top: 0;
-    height: 84px;
-    padding-left: 30px;
-    padding-right: 30px;
-    align-items: center;
-    flex-flow: row;
-    gap: 15px;
-    background: rgb(var(--gray-0) / .9);
-    backdrop-filter: blur(10px) saturate(180%);
-    z-index: 100;
-
-    > h1 {
-        font-size: 18px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    > .icon {
-        color: var(--foreground-prominent);
-    }
-
-    > .separator {
-        height: 24px;
+@include mixin.breakpoint-down(md) {
+    .dashboard {
+        display: flex;
+        padding-top: 84px;
+        flex-flow: column;
     }
 }

package/src/css/component/DashboardContent.module.scss

@@ -0,0 +1,48 @@
+@use '../../../../components/src/css/mixin';
+
+.notice + .dashboardContent {
+    padding-top: 30px;
+}
+
+.dashboardContent {
+    display: flex;
+    padding: 0 30px;
+    flex-flow: column;
+    flex-grow: 1;
+
+    > :is(.calendar, .table) {
+        margin-left: -30px;
+        margin-right: -30px;
+        height: calc(100dvh - 84px);
+        flex-grow: 1;
+    }
+
+    > .calendar {
+        border-left: 0;
+        border-right: 0;
+        border-radius: 0;
+
+        .calendarActions {
+            padding-left: 30px;
+            padding-right: 30px;
+        }
+    }
+
+    > .table {
+        border-top: 1px solid rgb(var(--gray-2));
+
+        .tableCell:first-child .tableCellContent {
+            padding-left: 30px;
+        }
+
+        .tableCell:last-child .tableCellContent {
+            padding-right: 30px;
+        }
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .dashboardContentCollapsed {
+        display: none;
+    }
+}