@nubitio/admin 0.1.0

package/dist/style.css

@@ -0,0 +1,371 @@
+.nb-admin-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.nb-admin-layout-header {
+  z-index: var(--z-shell-header);
+}
+
+.nb-admin-layout-body {
+  background-color: var(--surface-0);
+}
+
+.nb-admin-shell__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.nb-admin-shell__panel {
+  background-color: var(--side-panel-background);
+  border-right: 1px solid var(--border-color);
+  flex: 0 0 240px;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  transition: flex-basis var(--transition-slow), transform var(--transition-slow), width var(--transition-slow);
+  width: 240px;
+  z-index: var(--z-shell-panel);
+}
+
+.nb-admin-shell__scrim {
+  background: var(--overlay-bg);
+  border: 0;
+  cursor: pointer;
+  inset: 0;
+  padding: 0;
+  position: absolute;
+  z-index: var(--z-shell-scrim);
+}
+
+.nb-admin-shell__body.is-large.is-compact .nb-admin-shell__panel {
+  flex-basis: var(--side-panel-min-width);
+  width: var(--side-panel-min-width);
+}
+
+.nb-admin-shell__body.is-overlay .nb-admin-shell__panel {
+  inset: 0 auto 0 0;
+  position: absolute;
+}
+.nb-admin-shell__body.is-overlay:not(.is-xsmall) .nb-admin-shell__content {
+  margin-left: var(--side-panel-min-width, 48px);
+}
+.nb-admin-shell__body.is-overlay.is-closed:not(.is-xsmall) .nb-admin-shell__panel {
+  width: var(--side-panel-min-width);
+}
+.nb-admin-shell__body.is-overlay.is-closed.is-xsmall .nb-admin-shell__panel {
+  transform: translateX(-100%);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.nb-admin-header-component {
+  background: var(--surface-1);
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: 0 1px 0 var(--border-subtle);
+  flex: 0 0 auto;
+  position: relative;
+  z-index: var(--z-shell-header);
+}
+
+.nb-admin-header-toolbar {
+  align-items: center;
+  display: flex;
+  gap: var(--space-2);
+  min-height: var(--toolbar-height);
+  padding: 0 var(--space-4) 0 0;
+}
+
+.nb-admin-header-toolbar__before,
+.nb-admin-header-toolbar__after {
+  align-items: center;
+  display: flex;
+}
+
+.nb-admin-header-toolbar__before {
+  flex: 1;
+  min-width: 0;
+  gap: var(--space-1);
+}
+
+.nb-admin-header-toolbar__after {
+  flex: 0 0 auto;
+  gap: var(--space-1);
+}
+
+.nb-admin-header-title {
+  color: var(--text-primary);
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.02em;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nb-admin-menu-button {
+  flex: 0 0 var(--side-panel-min-width);
+  width: var(--side-panel-min-width);
+}
+
+.nb-admin-messages {
+  position: relative;
+}
+
+.nb-admin-header-popover {
+  position: relative;
+}
+
+.nb-admin-header-popover__panel {
+  background: var(--surface-1);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--space-2));
+  z-index: var(--z-shell-popover);
+}
+
+.nb-admin-messages > .nb-badge {
+  align-items: center;
+  background: var(--accent-color);
+  border: 2px solid var(--surface-1);
+  border-radius: 10px;
+  color: #fff;
+  display: flex;
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-semibold);
+  justify-content: center;
+  min-width: 18px;
+  padding: 1px 4px;
+  pointer-events: none;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+}
+
+.nb-admin-menu {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100%;
+  width: 240px !important;
+}
+.nb-admin-menu .nb-admin-menu-container {
+  background-color: var(--side-panel-background);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  font-size: var(--font-size-sm);
+  min-height: 0;
+  overflow-y: auto;
+  padding-bottom: var(--footer-height);
+}
+.nb-admin-menu__nav {
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+  width: 100%;
+}
+.nb-admin-menu__section {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.nb-admin-menu__section:last-child {
+  border-bottom: none;
+}
+.nb-admin-menu__item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-left: 3px solid transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  min-height: 36px;
+  padding: 0;
+  text-align: left;
+  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
+  width: 100%;
+}
+.nb-admin-menu__item:hover {
+  background: var(--surface-2);
+  color: var(--text-primary);
+}
+.nb-admin-menu__item.is-selected {
+  background: var(--surface-2);
+  border-left-color: var(--accent-color);
+  color: var(--accent-color);
+  font-weight: var(--font-weight-semibold);
+}
+.nb-admin-menu__item--parent {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+}
+.nb-admin-menu__chevron {
+  border-bottom: 1.5px solid currentcolor;
+  border-right: 1.5px solid currentcolor;
+  display: inline-flex;
+  flex: 0 0 7px;
+  height: 7px;
+  margin-left: auto;
+  margin-right: var(--space-4);
+  opacity: 0.5;
+  transform: rotate(45deg);
+  transition: transform var(--transition-base), opacity var(--transition-base);
+  width: 7px;
+}
+.nb-admin-menu__chevron.is-expanded {
+  opacity: 0.8;
+  transform: rotate(225deg);
+}
+.nb-admin-menu__section.has-selected-child > .nb-admin-menu__item--parent {
+  color: var(--accent-color);
+}
+.nb-admin-menu__icon {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  flex: 0 0 var(--side-panel-min-width);
+  font-size: 1.1rem;
+  justify-content: center;
+  margin: 0 !important;
+  opacity: 0.75;
+  width: var(--side-panel-min-width) !important;
+}
+.is-selected .nb-admin-menu__icon {
+  opacity: 1;
+}
+.nb-admin-menu__text {
+  overflow: hidden;
+  padding-right: var(--space-3);
+  text-overflow: ellipsis;
+}
+.nb-admin-menu__item--child {
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  min-height: 32px;
+}
+.nb-admin-menu__item--child .nb-admin-menu__text {
+  font-weight: var(--font-weight-regular);
+  padding-left: var(--side-panel-min-width);
+}
+.nb-admin-menu__item--child.is-selected {
+  color: var(--accent-color);
+}
+.nb-admin-menu__children {
+  border-top: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--surface-0) 50%, var(--surface-1) 50%);
+  padding: var(--space-1) 0;
+}
+.nb-admin-menu.compact .nb-admin-menu__item {
+  border-left-color: transparent;
+}
+.nb-admin-menu.compact .nb-admin-menu__item.is-selected {
+  border-left-color: var(--accent-color);
+  background: var(--surface-2);
+}
+.nb-admin-menu.compact .nb-admin-menu__text,
+.nb-admin-menu.compact .nb-admin-menu__chevron {
+  opacity: 0;
+  pointer-events: none;
+}
+.nb-admin-menu.compact .nb-admin-menu__icon {
+  opacity: 1;
+}
+
+.nb-admin-footer {
+  background-color: var(--side-panel-background);
+  border-top: 1px solid var(--border-subtle);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity var(--transition-slow);
+}
+.nb-admin-shell__body.is-open .nb-admin-footer {
+  opacity: 1;
+}
+
+.nb-admin-footer-nav {
+  display: flex;
+  flex-direction: column;
+}
+.nb-admin-footer-nav__item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-left: 3px solid transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: var(--font-size-sm);
+  min-height: 36px;
+  padding: 0;
+  text-align: left;
+  transition: background var(--transition-base), color var(--transition-base);
+  width: 100%;
+}
+.nb-admin-footer-nav__item:hover {
+  background: var(--surface-2);
+  color: var(--text-primary);
+}
+.nb-admin-footer-nav__item.is-selected {
+  background: var(--surface-2);
+  border-left-color: var(--accent-color);
+  color: var(--accent-color);
+  font-weight: var(--font-weight-semibold);
+}
+.nb-admin-footer-nav__icon {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  flex: 0 0 var(--side-panel-min-width);
+  font-size: 1.1rem;
+  justify-content: center;
+  margin: 0 !important;
+  opacity: 0.75;
+  width: var(--side-panel-min-width) !important;
+}
+.is-selected .nb-admin-footer-nav__icon {
+  opacity: 1;
+}
+.nb-admin-footer-nav__text {
+  overflow: hidden;
+  padding-right: var(--space-3);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nb-admin-footer-copyright {
+  color: var(--text-tertiary);
+  font-size: var(--font-size-xxs);
+  height: var(--footer-height);
+  display: flex;
+  align-items: center;
+  padding: 0 0 0 var(--footer-left-padding);
+}
+
+.nb-admin-shell__body.is-compact .nb-admin-footer-nav__text {
+  opacity: 0;
+  pointer-events: none;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@nubitio/admin",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "admin",
+    "layout",
+    "sidebar",
+    "shell"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nubitio/nubit-react.git",
+    "directory": "packages/admin"
+  },
+  "bugs": {
+    "url": "https://github.com/nubitio/nubit-react/issues"
+  },
+  "homepage": "https://github.com/nubitio/nubit-react/tree/main/packages/admin#readme",
+  "source": "./public.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.mts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.0.0",
+    "@nubitio/ui": "^0.1.0"
+  }
+}