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

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

@@ -0,0 +1,259 @@
+@use '../../../../components/src/css/mixin';
+
+.dashboardNavigation {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    background: var(--dashboard-navigation-background);
+    color: var(--dashboard-navigation-foreground);
+    z-index: 750;
+
+    .divider {
+        margin: 3px 15px;
+    }
+
+    .dividerLine {
+        background: rgb(var(--primary-10));
+    }
+
+    .menu {
+        flex-grow: 1;
+    }
+
+    .menuItem {
+        height: 54px;
+        min-width: 54px;
+        padding: 15px;
+        gap: 21px;
+        color: var(--dashboard-navigation-foreground);
+        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: var(--dashboard-navigation-foreground);
+        font-size: 24px;
+    }
+
+    .menuItemLabel {
+        transition: var(--dashboard-duration) var(--swift-out);
+        transition-property: filter, opacity, translate;
+        white-space: nowrap;
+    }
+}
+
+.dashboardNavigationCollapsed {
+    composes: dashboardNavigation;
+}
+
+[dark] .dashboardNavigation {
+    .dividerLine {
+        background: rgb(var(--gray-2));
+    }
+
+    .menuItem {
+        @media (hover: hover) {
+            &:hover {
+                background: rgb(var(--gray-2));
+            }
+        }
+
+        &:active {
+            background: rgb(var(--gray-3));
+        }
+    }
+
+    .menuItemHighlighted {
+        background: rgb(var(--gray-1));
+    }
+}
+
+.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: absolute;
+    display: block;
+    height: var(--radius);
+    width: var(--radius);
+    content: '';
+    background: var(--dashboard-navigation-background);
+    transition: left var(--dashboard-duration) var(--swift-out);
+
+    &::before {
+        position: absolute;
+        display: block;
+        inset: 0;
+        content: '';
+        background: rgb(var(--gray-1));
+    }
+}
+
+.dashboard:not(:has(.dashboardMenu)) .dashboardNavigationRoundingFix::before {
+    background: rgb(var(--gray-0));
+}
+
+@include mixin.breakpoint-up(lg) {
+    .dashboardNavigation {
+        height: 100dvh;
+        width: 300px;
+        padding: 15px;
+        flex-flow: column;
+        gap: 15px;
+        transition: width var(--dashboard-duration) var(--swift-out);
+    }
+
+    .dashboardNavigationCollapsed {
+        width: 84px;
+
+        .menuItemLabel {
+            filter: blur(6px);
+            opacity: 0;
+            translate: -12px 0;
+        }
+    }
+
+    .dashboardNavigationHeader {
+        display: flex;
+
+        .menuItem {
+            display: none;
+        }
+    }
+
+    .dashboardNavigationNav {
+        display: flex;
+        flex-flow: column;
+        flex-grow: 1;
+    }
+
+    .dashboardNavigationRoundingFix {
+        left: 100%;
+
+        &:first-of-type {
+            top: 0;
+
+            &::before {
+                border-top-left-radius: var(--radius);
+            }
+        }
+
+        &:not(:first-of-type) {
+            bottom: 0;
+
+            &::before {
+                border-bottom-left-radius: var(--radius);
+            }
+        }
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .dashboardNavigation {
+        width: 100dvw;
+        height: 84px;
+
+        &::after {
+            position: fixed;
+            display: block;
+            inset: 0;
+            width: 100dvw;
+            height: 100dvh;
+            content: '';
+            background: rgb(var(--gray-3) / .5);
+            backdrop-filter: blur(3px) saturate(180%);
+            transition: var(--dashboard-duration) var(--swift-out);
+            transition-property: background, backdrop-filter;
+            z-index: 1900;
+        }
+    }
+
+    .dashboardNavigationHeader {
+        display: flex;
+        width: inherit;
+        height: inherit;
+        padding: 0 15px;
+        align-items: center;
+        flex-flow: row;
+        justify-content: space-between;
+
+        .menuItem {
+            align-self: center;
+            justify-content: center;
+        }
+    }
+
+    .dashboardNavigationNav {
+        position: fixed;
+        display: flex;
+        top: 0;
+        left: 0;
+        width: min(300px, calc(100dvw - 42px));
+        height: 100dvh;
+        padding: 15px;
+        flex-flow: column;
+        background: var(--dashboard-navigation-background);
+        transition: translate var(--dashboard-duration) var(--swift-out);
+        z-index: 2000;
+    }
+
+    .dashboardNavigationRoundingFix {
+        position: fixed;
+        top: 84px;
+        z-index: 750;
+
+        &:first-of-type {
+            left: 0;
+
+            &::before {
+                border-top-left-radius: var(--radius);
+            }
+        }
+
+        &:not(:first-of-type) {
+            right: 0;
+
+            &::before {
+                border-top-right-radius: var(--radius);
+            }
+        }
+    }
+
+    .dashboardNavigationCollapsed {
+        &::after {
+            background: transparent;
+            backdrop-filter: none;
+            pointer-events: none;
+        }
+
+        .dashboardNavigationNav {
+            pointer-events: none;
+            translate: -100% 0;
+        }
+    }
+}

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

@@ -0,0 +1,83 @@
+@use '../../../../components/src/css/mixin';
+
+.dashboardPane {
+    background: rgb(var(--gray-1));
+    overflow: auto;
+    z-index: 200;
+
+    .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;
+}
+
+.dashboardSide {
+    composes: dashboardPane;
+
+    border-left: 1px solid rgb(var(--gray-2));
+}
+
+@include mixin.breakpoint-up(lg) {
+    .dashboardPane {
+        position: sticky;
+        top: 0;
+        height: 100dvh;
+        grid-row: 1 / span 2;
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .dashboardMenu {
+        height: calc(100dvh - 84px);
+    }
+
+    .dashboardMenuCollapsed {
+        display: none;
+    }
+}

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

@@ -0,0 +1,55 @@
+@use '../../../../components/src/css/mixin';
+
+.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;
+    }
+}
+
+.dashboardHeader:not(.routeTransitionEnterActive):not(.routeTransitionLeaveActive) {
+    transition: box-shadow var(--dashboard-duration) var(--swift-out);
+}
+
+.dashboardHeaderScrolled {
+    composes: dashboardHeader;
+
+    box-shadow: var(--shadow-md);
+}
+
+[dark] .dashboardHeaderScrolled {
+    box-shadow: 0 1px 0 rgb(var(--gray-1)), var(--shadow-md);
+}
+
+@include mixin.breakpoint-down(md) {
+    .dashboard > .dashboardTopBar {
+        top: 84px;
+    }
+
+    .dashboard > .dashboardTopBarCollapsed {
+        display: none;
+    }
+}

package/src/data/index.ts

@@ -3,5 +3,6 @@ import type { InjectionKey, Ref } from 'vue';
 export const FluxDashboardInjectionKey: InjectionKey<FluxDashboardInjection> = Symbol();
 
 export type FluxDashboardInjection = {
+    readonly isMenuCollapsed: Ref<boolean>;
     readonly isNavigationCollapsed: Ref<boolean>;
 };