@robr0/design-system 0.1.0

package/components/AppSidebar/AppSidebar.css

@@ -0,0 +1,434 @@
+/* ============================================
+   APP SIDEBAR — collapsible navigation
+   Collapsed: 64px icon-only rail
+   Expanded: 280px with labels, accordion, profile
+   ============================================ */
+
+/* ============================================
+   WRAPPER
+   ============================================ */
+.ds-app-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+  width: 64px;
+  padding: var(--padding-lg) 0;
+  background-color: var(--color-bg-page-primary);
+  overflow: hidden;
+  transition: width var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar--expanded {
+  width: 280px;
+}
+
+/* ============================================
+   TOP SECTION — logo + nav
+   ============================================ */
+.ds-app-sidebar__top {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xl);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ============================================
+   LOGO ROW
+   ============================================ */
+.ds-app-sidebar__logo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+  padding: 0 var(--padding-lg);
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__logo-inner {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__logo-inner {
+  gap: var(--gap-lg);
+}
+
+.ds-app-sidebar__logo-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__logo-text {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  width: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__logo-text {
+  width: auto;
+  opacity: 1;
+}
+
+.ds-app-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  height: 24px;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  padding: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__toggle {
+  width: 24px;
+  opacity: 1;
+}
+
+.ds-app-sidebar__toggle .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+/* ============================================
+   NAV GROUP
+   ============================================ */
+.ds-app-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__nav {
+  align-items: stretch;
+}
+
+/* Category label — only visible when expanded */
+.ds-app-sidebar__category {
+  padding: 0 var(--padding-lg);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), height var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__category {
+  opacity: 1;
+  height: 20px;
+}
+
+/* ============================================
+   NAV BUTTON
+   ============================================ */
+.ds-app-sidebar__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: var(--padding-sm);
+  border-radius: var(--radius-full);
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), padding var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn {
+  width: 100%;
+  padding: var(--padding-sm) var(--padding-lg);
+  justify-content: space-between;
+}
+
+.ds-app-sidebar__btn:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__btn--active {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__btn-left {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-left {
+  gap: 8px;
+}
+
+.ds-app-sidebar__btn-icon {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar__btn-label {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  width: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-label {
+  width: auto;
+  opacity: 1;
+}
+
+.ds-app-sidebar__btn-chevron {
+  font-size: 24px;
+  color: var(--color-icon-secondary);
+  flex-shrink: 0;
+  width: 0;
+  overflow: hidden;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
+  opacity: 0;
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-chevron {
+  width: auto;
+  opacity: 1;
+}
+
+.ds-app-sidebar__btn-chevron--open {
+  transform: rotate(90deg);
+}
+
+/* ============================================
+   SUB-ITEMS (accordion children)
+   ============================================ */
+.ds-app-sidebar__sub-items {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-app-sidebar__sub-items--open {
+  max-height: 500px;
+}
+
+.ds-app-sidebar__sub-item {
+  display: flex;
+  align-items: flex-start;
+  height: 40px;
+}
+
+.ds-app-sidebar__sub-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 100%;
+  flex-shrink: 0;
+  padding-left: 16px;
+}
+
+.ds-app-sidebar__sub-line::after {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 100%;
+  background-color: var(--color-bg-container-border);
+}
+
+.ds-app-sidebar__sub-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: var(--padding-sm);
+  border-radius: var(--radius-full);
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar__sub-btn:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__sub-btn--active {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-app-sidebar__sub-label {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+/* ============================================
+   PROFILE
+   ============================================ */
+.ds-app-sidebar__profile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__profile {
+  justify-content: space-between;
+  padding: 0 var(--padding-lg);
+}
+
+.ds-app-sidebar__profile-left {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__profile-left {
+  gap: 10px;
+}
+
+.ds-app-sidebar__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-secondary);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.ds-app-sidebar__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ds-app-sidebar__profile-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__profile-info {
+  width: auto;
+  opacity: 1;
+}
+
+.ds-app-sidebar__profile-name {
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-app-sidebar__profile-email {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-app-sidebar__profile-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  width: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__profile-more {
+  width: auto;
+  opacity: 1;
+}
+
+.ds-app-sidebar__profile-more .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+  .ds-app-sidebar {
+    width: 0;
+    padding: 0;
+  }
+
+  .ds-app-sidebar--expanded {
+    width: 280px;
+    padding: var(--padding-lg) 0;
+  }
+}

package/components/AppSidebar/AppSidebar.d.ts

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+export interface AppSidebarSubItem {
+    /** Unique key for this sub-item */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+export interface AppSidebarItem {
+    /** Unique key for this item */
+    key: string;
+    /** Material Symbols icon name */
+    icon: string;
+    /** Display label (shown when expanded) */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Sub-items — turns this into an accordion */
+    children?: AppSidebarSubItem[];
+}
+export interface AppSidebarSection {
+    /** Optional category label above the group */
+    category?: string;
+    /** Nav items in this section */
+    items: AppSidebarItem[];
+}
+export interface AppSidebarProfile {
+    /** User display name */
+    name: string;
+    /** User email */
+    email: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+}
+export interface AppSidebarProps {
+    /** Navigation sections */
+    sections: AppSidebarSection[];
+    /** Profile data for the bottom section */
+    profile?: AppSidebarProfile;
+    /** Key of the currently active item */
+    activeKey?: string;
+    /** Key of the currently active sub-item */
+    activeSubKey?: string;
+    /** Whether sidebar starts expanded */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Callback when expand/collapse changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Callback when profile more button clicked */
+    onProfileMore?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Logo element — defaults to built-in robr0 logo */
+    logo?: React.ReactNode;
+    /** Text shown next to logo when expanded */
+    logoText?: string;
+}
+/**
+ * AppSidebar — a collapsible left-hand navigation rail.
+ *
+ * **Collapsed** (64 px): icon-only buttons, logo mark, avatar.
+ * **Expanded** (280 px): labels, category headings, accordion
+ * sub-items with tree-line connectors, and a profile section.
+ */
+export declare const AppSidebar: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, expanded: controlledExpanded, onExpandedChange, onProfileMore, className, logo, logoText, }: AppSidebarProps) => React.JSX.Element;