GNexus UI Kit

@@ -18,9 +30,18 @@

- -

@@ -159,6 +189,7 @@ @@include("partials/utilities.html") @@include("partials/editable-string.html") @@include("partials/navigation-overlays.html") + @@include("partials/navigation-shell.html") @@include("partials/lists.html") @@include("partials/badges.html") @@include("partials/alerts.html") diff --git a/demo/partials/navigation-shell.html b/demo/partials/navigation-shell.html new file mode 100644 index 0000000..2b2ceb0 --- /dev/null +++ b/demo/partials/navigation-shell.html @@ -0,0 +1,123 @@ +

Navigation Shell

+ Navigation Shell объединяет верхнюю панель, кнопку меню, left drawer и footer. + Компонент подходит для docs, dashboards и внутренних инструментов с длинной навигацией. +

+ +

+ + +

+ +

Shell content

Topbar stays visible. Drawer opens from the left and keeps its footer pinned.

+ +

+ Navigation Shell HTML + +

<header class="nav-topbar">
+  <button class="nav-topbar-toggle" type="button" data-navigation-toggle
+    aria-controls="app-navigation" aria-expanded="false">
+    <i class="ph ph-sidebar-simple"></i>
+    <span>Menu</span>
+  </button>
+  <div class="nav-topbar-brand">
+    <img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
+    <span>Product Console</span>
+  </div>
+  <div class="nav-topbar-current">Overview</div>
+</header>
+
+<div class="nav-drawer-backdrop" data-navigation-close></div>
+<aside class="nav-drawer" id="app-navigation" data-navigation-drawer
+  aria-label="Main navigation" aria-hidden="true" inert>
+  <header class="nav-drawer-header">
+    <div>
+      <div class="nav-drawer-title">Navi</div>
+      <div class="nav-drawer-subtitle">Workspace</div>
+    </div>
+    <button class="nav-drawer-close" type="button" data-navigation-close aria-label="Close navigation">
+      <i class="ph ph-x"></i>
+    </button>
+  </header>
+
+  <nav class="nav-drawer-body">
+    <ul class="list list-nav">
+      <li class="list-item list-item-active">
+        <a class="list-action" href="/overview" data-navigation-link>
+          <span class="list-label"><i class="ph ph-house"></i> Overview</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <footer class="nav-drawer-footer">
+    <span>Version 0.2</span>
+    <span>© GNexus</span>
+  </footer>
+</aside>

+ +

+ Navigation Shell JS + +

NavigationShell.init();
+
+// Available on the global namespace too:
+GNexusUIKit.NavigationShell.init();

diff --git a/package-lock.json b/package-lock.json index 56851f7..64aceca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gnexus-ui-kit", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "gnexus-ui-kit", - "version": "0.1.0", + "version": "0.2.0", "devDependencies": { "autoprefixer": "^10.4.27", "browser-sync": "^3.0.4", diff --git a/package.json b/package.json index d69be93..f35f3b8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gnexus-ui-kit", - "version": "0.1.0", + "version": "0.2.0", "private": true, "scripts": { "build": "gulp build", diff --git a/src/js/components/navigation-shell.js b/src/js/components/navigation-shell.js new file mode 100644 index 0000000..77f5607 --- /dev/null +++ b/src/js/components/navigation-shell.js @@ -0,0 +1,96 @@ +const initializedRoots = new WeakSet(); + +function getDrawerForToggle(toggle, root) { + const id = toggle.getAttribute("aria-controls"); + + if(id) { + return root.getElementById?.(id) || document.getElementById(id); + } + + return root.querySelector?.("[data-navigation-drawer]") || document.querySelector("[data-navigation-drawer]"); +} + +function open(drawer, toggle) { + if(!drawer) { + return; + } + + drawer.classList.add("is-open"); + drawer.setAttribute("aria-hidden", "false"); + drawer.removeAttribute("inert"); + toggle?.setAttribute("aria-expanded", "true"); + document.body.classList.add("nav-drawer-open"); + + const firstControl = drawer.querySelector("[data-navigation-close], a, button, input, select, textarea"); + firstControl?.focus?.(); +} + +function close(drawer, toggle, shouldRestoreFocus = true) { + if(!drawer) { + return; + } + + drawer.classList.remove("is-open"); + drawer.setAttribute("aria-hidden", "true"); + drawer.setAttribute("inert", ""); + toggle?.setAttribute("aria-expanded", "false"); + document.body.classList.remove("nav-drawer-open"); + + if(shouldRestoreFocus) { + toggle?.focus?.(); + } +} + +function init(root = document) { + if(initializedRoots.has(root)) { + return; + } + + root.addEventListener("click", event => { + const toggle = event.target.closest("[data-navigation-toggle]"); + + if(!toggle) { + return; + } + + const drawer = getDrawerForToggle(toggle, root); + + if(drawer?.classList.contains("is-open")) { + close(drawer, toggle); + } else { + open(drawer, toggle); + } + }); + + root.addEventListener("click", event => { + const closeControl = event.target.closest("[data-navigation-close], [data-navigation-link], .nav-drawer .list-action"); + + if(!closeControl) { + return; + } + + const drawer = closeControl.closest("[data-navigation-drawer]") || root.querySelector("[data-navigation-drawer]"); + const toggle = drawer?.id ? root.querySelector(`[data-navigation-toggle][aria-controls="${drawer.id}"]`) : root.querySelector("[data-navigation-toggle]"); + const shouldRestoreFocus = !closeControl.matches("[data-navigation-link]"); + close(drawer, toggle, shouldRestoreFocus); + }); + + document.addEventListener("keydown", event => { + if(event.key !== "Escape") { + return; + } + + root.querySelectorAll("[data-navigation-drawer].is-open").forEach(drawer => { + const toggle = drawer.id ? root.querySelector(`[data-navigation-toggle][aria-controls="${drawer.id}"]`) : root.querySelector("[data-navigation-toggle]"); + close(drawer, toggle); + }); + }); + + initializedRoots.add(root); +} + +export default { + init, + open, + close +}; diff --git a/src/js/demo-navigation.js b/src/js/demo-navigation.js index 9df7733..f4d095d 100644 --- a/src/js/demo-navigation.js +++ b/src/js/demo-navigation.js @@ -1,6 +1,7 @@ export default function demoNavigation() { - const navItems = [...document.querySelectorAll(".docs-sidebar .list-item")]; + const navItems = [...document.querySelectorAll(".nav-drawer .list-item")]; const sections = [...document.querySelectorAll(".docs-content .section[id]")]; + const currentSection = document.querySelector("[data-docs-current-section]"); if (!navItems.length || !sections.length) { return; @@ -9,7 +10,12 @@ const setActive = id => { navItems.forEach(item => { const link = item.querySelector(".list-action"); - item.classList.toggle("list-item-active", link?.getAttribute("href") === `#${id}`); + const isActive = link?.getAttribute("href") === `#${id}`; + item.classList.toggle("list-item-active", isActive); + + if (isActive && currentSection) { + currentSection.textContent = link.querySelector(".list-label")?.textContent.trim() || id; + } }); }; diff --git a/src/js/index.js b/src/js/index.js index cd39981..02eea4f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -5,6 +5,7 @@ import editableString from "./components/editable-string.js"; import confirmPopup from "./components/confirm-popup.js"; import Drawer from "./components/drawer.js"; +import NavigationShell from "./components/navigation-shell.js"; import Overlays from "./components/overlays.js"; import InputPatterns from "./components/input-patterns.js"; import Accordion from "./components/accordion.js"; @@ -19,6 +20,7 @@ editableString, confirmPopup, Drawer, + NavigationShell, Overlays, InputPatterns, Accordion @@ -29,6 +31,7 @@ document.addEventListener("DOMContentLoaded", () => { Overlays.init(); + NavigationShell.init(); InputPatterns.init(); Accordion.init(); demoNavigation(); @@ -43,6 +46,7 @@ editableString, confirmPopup, Drawer, + NavigationShell, Overlays, InputPatterns, Accordion diff --git a/src/scss/_demo-layout.scss b/src/scss/_demo-layout.scss index f8a07ce..8bebd90 100644 --- a/src/scss/_demo-layout.scss +++ b/src/scss/_demo-layout.scss @@ -2,66 +2,17 @@ @use "components/typography" as *; .docs-layout { - display: grid; - grid-template-columns: 260px minmax(0, 1fr); - gap: $space-8; - align-items: start; - - @include media_down("xl") { - grid-template-columns: 1fr; - } -} - -.docs-sidebar { - position: sticky; - top: $space-5; - max-height: calc(100vh - #{$space-10}); - overflow-y: auto; - overscroll-behavior: contain; - scrollbar-width: thin; - scrollbar-color: $color-secondary $surface-panel; - - &::-webkit-scrollbar { - width: 8px; - } - - &::-webkit-scrollbar-track { - background: $surface-panel; - } - - &::-webkit-scrollbar-thumb { - background: $color-secondary; - } - - @include media_down("xl") { - position: relative; - top: 0; - max-height: none; - overflow-y: visible; - } - - .docs-sidebar-title { - display: inline-flex; - padding: $space-2 $space-3; - margin-bottom: $space-3; - color: $color-black; - background: $color-primary; - font-size: $font-size-sm; - font-weight: $font-weight-bold; - text-transform: uppercase; - } - - .list.list-nav { - max-width: none; - } + display: block; } .docs-content { min-width: 0; + max-width: 1040px; + margin: 0 auto; } .docs-section { - scroll-margin-top: $space-6; + scroll-margin-top: calc(58px + #{$space-6}); padding-top: $space-12; margin-bottom: $space-12 * 2; border-top: 2px solid $color-dark; @@ -81,12 +32,25 @@ .docs-intro { max-width: 820px; + margin-right: auto; + margin-left: auto; } .docs-page { + padding-top: $space-8; padding-bottom: $space-12 * 2; } +@include media_down("md") { + .docs-page { + padding-top: $space-6; + } + + .docs-section { + scroll-margin-top: calc(96px + #{$space-6}); + } +} + .demo-actions { display: flex; flex-wrap: wrap; diff --git a/src/scss/components/_navigation-shell.scss b/src/scss/components/_navigation-shell.scss new file mode 100644 index 0000000..e2df372 --- /dev/null +++ b/src/scss/components/_navigation-shell.scss @@ -0,0 +1,329 @@ +@use "../kit-deps" as *; +@use "typography" as *; + +.nav-topbar { + position: sticky; + top: 0; + z-index: 900; + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + min-height: 58px; + border-bottom: $border-width-base solid $border-color-muted; + background: rgba($surface-page, 0.96); + box-shadow: 0 10px 28px rgba($color-black, 0.26); +} + +.nav-topbar-toggle { + display: inline-flex; + align-items: center; + align-self: stretch; + gap: $space-2; + min-width: 150px; + padding: 0 $space-4; + border: 0; + border-right: $border-width-base solid $border-color-muted; + color: $color-text-light; + background: $surface-panel; + font-family: $font-family-base; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + text-transform: uppercase; + cursor: pointer; + transition-duration: $motion-base; + transition-timing-function: $motion-ease; + transition-property: color, background; + + .ph { + color: $color-secondary; + font-size: $icon-size-md; + } + + &:focus-visible { + @include focus_ring; + } + + @include hover_touch { + color: $color-black; + background: $color-electric-blue; + + .ph { + color: $color-black; + } + } +} + +.nav-topbar-brand { + display: inline-flex; + align-items: center; + gap: $space-2; + min-width: 0; + padding: 0 $space-4; + color: $color-text-light; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + text-transform: uppercase; + + img { + width: $icon-size-md; + height: $icon-size-md; + } +} + +.nav-topbar-current { + min-width: 160px; + margin-right: $space-4; + padding: $space-1 $space-2; + border: $border-width-base solid $border-color-muted; + color: $color-text-medium; + background: $surface-panel-muted; + font-size: $font-size-xs; + font-weight: $font-weight-bold; + text-align: center; + text-transform: uppercase; +} + +.nav-drawer-backdrop { + position: fixed; + inset: 0; + z-index: 910; + background: $color-black; + opacity: 0; + pointer-events: none; + transition-duration: $motion-slow; + transition-timing-function: $motion-ease; + transition-property: opacity; +} + +.nav-drawer { + position: fixed; + inset: 0 auto 0 0; + z-index: 920; + display: flex; + flex-direction: column; + width: min(380px, 100vw); + max-height: 100vh; + border-right: $border-width-base solid $color-text-light; + background: $surface-panel; + box-shadow: 18px 0 42px rgba($color-black, 0.38); + opacity: 0; + overflow: hidden; + pointer-events: none; + transform: translateX(-100%); + transition-duration: $motion-slow; + transition-timing-function: $motion-ease; + transition-property: opacity, transform; + + &.is-open { + opacity: 1; + pointer-events: auto; + transform: translateX(0); + } +} + +.nav-drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: $space-3; + padding: $space-3; + border-bottom: $border-width-base solid $border-color-muted; +} + +.nav-drawer-title { + display: inline-flex; + padding: $space-2 $space-3; + color: $color-black; + background: $color-primary; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + text-transform: uppercase; +} + +.nav-drawer-subtitle { + margin-top: $space-2; + color: $color-text-dark; + font-size: $font-size-xs; + font-weight: $font-weight-bold; + text-transform: uppercase; +} + +.nav-drawer-close { + display: inline-flex; + align-items: center; + justify-content: center; + width: $control-height-md; + height: $control-height-md; + padding: 0; + border: $border-width-base solid $border-color-muted; + color: $color-text-light; + background: transparent; + font-size: $icon-size-md; + cursor: pointer; + transition-duration: $motion-base; + transition-timing-function: $motion-ease; + transition-property: color, background, border-color; + + &:focus-visible { + @include focus_ring; + } + + @include hover_touch { + color: $color-black; + background: $color-error; + border-color: $color-error; + } +} + +.nav-drawer-body { + flex: 1; + overflow-y: auto; + overscroll-behavior: contain; + padding: $space-3; + scrollbar-width: thin; + scrollbar-color: $color-secondary $surface-panel; + + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-track { + background: $surface-panel; + } + + &::-webkit-scrollbar-thumb { + background: $color-secondary; + } + + .list.list-nav { + max-width: none; + } +} + +.nav-drawer-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: $space-3; + padding: $space-3; + border-top: $border-width-base solid $border-color-muted; + color: $color-text-dark; + background: $surface-panel-muted; + font-size: $font-size-xs; + font-weight: $font-weight-bold; + text-transform: uppercase; +} + +.nav-drawer-open { + overflow: hidden; + + .nav-drawer-backdrop { + opacity: 0.82; + pointer-events: auto; + } +} + +@include media_down("md") { + .nav-topbar { + grid-template-columns: auto minmax(0, 1fr); + } + + .nav-topbar-toggle { + min-width: $control-height-lg; + padding: 0 $space-3; + + span { + display: none; + } + } + + .nav-topbar-brand { + padding-right: $space-3; + padding-left: $space-3; + } + + .nav-topbar-current { + grid-column: 1 / -1; + width: 100%; + min-width: 0; + margin: 0; + border-right: 0; + border-left: 0; + } + + .nav-drawer { + width: min(376px, 100vw); + } +} + +.nav-shell-preview { + width: 100%; + max-width: 900px; + overflow: hidden; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-page; +} + +.nav-shell-preview-topbar { + position: relative; + z-index: 0; + min-height: 52px; + box-shadow: none; +} + +.nav-shell-preview-body { + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + min-height: 320px; +} + +.nav-shell-preview-drawer { + position: relative; + z-index: 0; + inset: auto; + width: auto; + max-height: none; + opacity: 1; + pointer-events: auto; + transform: none; + box-shadow: none; +} + +.nav-shell-preview-content { + display: flex; + flex-direction: column; + justify-content: center; + gap: $space-3; + min-width: 0; + padding: $space-5; + border-left: $border-width-base solid $border-color-muted; + background: $surface-panel-muted; + + h3 { + margin: 0; + color: $color-text-light; + font-size: $font-size-xl; + text-transform: uppercase; + } + + p { + max-width: 360px; + margin: 0; + color: $color-text-medium; + font-size: $font-size-sm; + line-height: $line-height-relaxed; + } +} + +@include media_down("md") { + .nav-shell-preview-body { + grid-template-columns: 1fr; + } + + .nav-shell-preview-content { + min-height: 180px; + border-top: $border-width-base solid $border-color-muted; + border-left: 0; + } +} diff --git a/src/scss/kit.scss b/src/scss/kit.scss index f09be7e..4932de3 100644 --- a/src/scss/kit.scss +++ b/src/scss/kit.scss @@ -19,6 +19,7 @@ @use "components/timeline"; @use "components/accordion"; @use "components/drawer"; +@use "components/navigation-shell"; @use "components/toasts"; @use "components/cards"; @use "components/modals";