@nubitio/admin 1.1.1 → 1.2.0

package/dist/style.css

@@ -314,6 +314,169 @@ html[data-density=comfortable] {
 .nb-feature-hub--compact .nb-feature-hub__content {
   padding-top: var(--space-3);
 }
+.nb-admin-header-content {
+  flex: 0 1 320px;
+  min-width: 0;
+}
+.nb-admin-header-content > * {
+  max-width: 100%;
+}
+
+.nb-admin-menu__brand {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  min-height: var(--admin-header-height, 64px);
+  padding: var(--space-3) var(--space-6);
+}
+
+.nb-admin-menu__context {
+  flex: 0 0 auto;
+  padding: var(--space-3);
+}
+
+.nb-admin-shell--workspace .nb-admin-menu-container {
+  padding-bottom: 0;
+}
+.nb-admin-shell--workspace .nb-admin-footer {
+  flex: 0 0 auto;
+  position: static;
+}
+.nb-admin-shell--workspace .nb-admin-shell__content {
+  min-width: 0;
+}
+
+.nb-admin-shell.is-workspace-desktop {
+  display: grid;
+  grid-template-columns: var(--admin-sidebar-width, 248px) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-layout-header {
+  grid-column: 2;
+  grid-row: 1;
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-shell__body {
+  display: contents;
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-shell__body > .nb-admin-shell__panel {
+  grid-column: 1;
+  grid-row: 1/-1;
+  height: auto;
+  width: 100%;
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-shell__body > .nb-admin-shell__content {
+  grid-column: 2;
+  grid-row: 2;
+}
+.nb-admin-shell.is-workspace-desktop.is-workspace-compact {
+  grid-template-columns: var(--side-panel-min-width) minmax(0, 1fr);
+}
+
+.nb-admin-shell__bottom-navigation {
+  background: var(--surface-1);
+  flex: 0 0 auto;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  z-index: var(--z-shell-panel);
+}
+
+.nb-admin-bottom-nav {
+  background: var(--surface-1);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  padding: var(--space-2);
+}
+.nb-admin-bottom-nav__item {
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: var(--space-1);
+  justify-content: center;
+  min-height: 64px;
+  min-width: 0;
+  padding: var(--space-2) var(--space-1);
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+}
+.nb-admin-bottom-nav__item[aria-current=page] {
+  background: var(--accent-subtle);
+  color: var(--accent-on-subtle);
+}
+.nb-admin-bottom-nav__item:hover {
+  background: var(--surface-2);
+}
+.nb-admin-bottom-nav__item:focus-visible {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: -2px;
+}
+.nb-admin-bottom-nav__icon {
+  font-size: 24px;
+}
+.nb-admin-bottom-nav__label {
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+.nb-admin-bottom-nav__badge {
+  background: var(--accent-color);
+  border-radius: var(--radius-pill);
+  color: var(--on-accent-color);
+  font-size: var(--font-size-xxs);
+  padding: 0 var(--space-1);
+  position: absolute;
+  right: var(--space-1);
+  top: 0;
+}
+
+html[data-visual-style=nubit] .nb-admin-header-toolbar {
+  gap: var(--space-4);
+  min-height: calc(var(--admin-header-height) - 1px);
+  padding-right: var(--space-7);
+}
+html[data-visual-style=nubit] .nb-admin-header-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+}
+html[data-visual-style=nubit] .nb-admin-menu__nav {
+  gap: var(--space-1);
+  padding: var(--space-3);
+}
+html[data-visual-style=nubit] .nb-admin-menu__section {
+  border: 0;
+}
+html[data-visual-style=nubit] .nb-admin-menu__item {
+  border-left: 0;
+  border-radius: var(--radius-sm);
+  min-height: 40px;
+}
+html[data-visual-style=nubit] .nb-admin-menu__item.is-selected {
+  background: var(--accent-subtle);
+  color: var(--accent-on-subtle);
+}
+html[data-visual-style=nubit] .nb-admin-menu__item--parent {
+  color: var(--text-secondary);
+}
+html[data-visual-style=nubit] .nb-admin-menu.compact .nb-admin-menu__nav {
+  padding-inline: 0;
+}
+
+@media (max-width: 575.98px) {
+  .nb-admin-header-toolbar:has(.nb-admin-header-content) .nb-admin-header-title {
+    display: none;
+  }
+  .nb-admin-header-toolbar:has(.nb-admin-header-content) .nb-admin-header-toolbar__before {
+    flex: 0 0 auto;
+  }
+  .nb-admin-header-content {
+    flex: 1 1 0;
+  }
+  html[data-visual-style=nubit] .nb-admin-header-toolbar {
+    gap: var(--space-1);
+    padding-right: var(--space-2);
+  }
+}
 .nb-admin-shell {
   display: flex;
   flex-direction: column;
@@ -340,12 +503,12 @@ html[data-density=comfortable] {
 .nb-admin-shell__panel {
   background-color: var(--side-panel-background);
   border-right: 1px solid var(--border-color);
-  flex: 0 0 240px;
+  flex: 0 0 var(--admin-sidebar-width, 240px);
   height: 100%;
   overflow: hidden;
   position: relative;
   transition: flex-basis var(--transition-slow), transform var(--transition-slow), width var(--transition-slow);
-  width: 240px;
+  width: var(--admin-sidebar-width, 240px);
   z-index: var(--z-shell-panel);
 }
 
@@ -399,7 +562,7 @@ html[data-density=comfortable] {
   align-items: center;
   display: flex;
   gap: var(--space-2);
-  min-height: var(--toolbar-height);
+  min-height: var(--admin-header-height, var(--toolbar-height));
   padding: 0 var(--space-4) 0 0;
 }
 
@@ -480,7 +643,7 @@ html[data-density=comfortable] {
   flex-direction: column;
   height: 100%;
   min-height: 100%;
-  width: 240px !important;
+  width: var(--admin-sidebar-width, 240px) !important;
 }
 .nb-admin-menu .nb-admin-menu-container {
   background-color: var(--side-panel-background);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/admin",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
   "license": "MIT",
@@ -53,9 +53,12 @@
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@nubitio/core": "^1.1.1",
-    "@nubitio/crud": "^1.1.1",
-    "@nubitio/ui": "^1.1.1",
-    "@nubitio/hydra": "^1.1.1"
+    "@nubitio/core": "^1.2.0",
+    "@nubitio/hydra": "^1.2.0",
+    "@nubitio/crud": "^1.2.0",
+    "@nubitio/ui": "^1.2.0"
+  },
+  "devDependencies": {
+    "react-router-dom": "^6.30.6"
   }
 }