{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sidebar-07", "title": "Toolbar Action Sidebar", "type": "registry:block", "description": "App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.", "categories": [ "layout", "sidebar" ], "files": [ { "path": "packages/elements-lit/src/blocks/sidebar-07/sidebar-07.ts", "content": "import { LitElement, css, html } from 'lit'\nimport {\n Bell,\n ChartBar,\n ChevronsUpDown,\n Command,\n CreditCard,\n FileText,\n HelpCircle,\n LineChart,\n Mail,\n Moon,\n Package,\n Plus,\n Search,\n Settings as SettingsIcon,\n ShoppingCart,\n Sun,\n Users,\n} from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/sidebar/sidebar'\nimport type { UipSidebarProvider } from '../../components/sidebar/sidebar'\n\nfunction isDarkActive(): boolean {\n return document.documentElement.classList.contains('dark')\n}\n\nfunction setDark(dark: boolean) {\n document.documentElement.classList.toggle('dark', dark)\n try {\n localStorage.setItem('uipkge-theme', dark ? 'dark' : 'light')\n } catch {\n // ignore\n }\n}\n\n// App sidebar with a bottom action bar. Workspace pill + search at the top,\n// three grouped nav sections, user pill above an icon toolbar (Settings,\n// Help, Notifications, Command palette, theme toggle) anchored at the very\n// bottom. Every row is spelled out inline so you can edit in place.\n\n/**\n * — the registry Sidebar07 block as a web component.\n *\n * Class strings are React's verbatim. The footer toolbar follows the\n * provider's state (React's useSidebar `state`); the block re-renders when\n * the provider's `open-change` fires. The search field is with\n * `prefix`/`suffix` slots (React's SidebarInput prefix/suffix props). The\n * theme toggle writes the `dark` class on documentElement directly (the\n * `next-themes` dependency is not ported). Deviations: the toolbar's last\n * button is React's SidebarTrigger (collapse toggle) — ported as\n * , which carries its own trigger styling on top of\n * React's row classes. No props, no events: edit the markup in place.\n */\nexport class UipSidebar07 extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n isDark: { state: true },\n query: { state: true },\n }\n\n private isDark = false\n private query = ''\n private media?: MediaQueryList\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'sidebar-07')\n this.isDark = isDarkActive()\n // Re-render when the provider opens/closes or the viewport crosses the\n // mobile breakpoint (React's useSidebar re-render).\n this.addEventListener('open-change', this.rerender)\n this.media = window.matchMedia('(max-width: 768px)')\n this.media.addEventListener('change', this.rerender)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('open-change', this.rerender)\n this.media?.removeEventListener('change', this.rerender)\n }\n\n private rerender = () => this.requestUpdate()\n\n private toolbarButton(label: string, iconName: string, iconNode: typeof SettingsIcon, onClick?: () => void) {\n return html`\n onClick?.()}\n >\n ${icon(iconNode, iconName, 'size-4')}\n \n `\n }\n\n render() {\n const expanded = (this.closest('uip-sidebar-provider') as UipSidebarProvider | null)?.state !== 'collapsed'\n return html`\n \n \n \n \n \n
\n \n \n \n \n \n \n
\n
\n uipkge\n uipkge.dev\n
\n \n \n \n\n
\n {\n this.query = (e.target as UipInput).value\n }}\n >\n ${icon(Search, 'search', 'size-3.5')}\n \n ⌘K\n \n \n
\n \n\n \n \n Dashboard\n \n \n \n \n ${icon(ChartBar, 'chart-bar', 'size-4')} Analytics\n \n \n \n \n ${icon(LineChart, 'chart-line', 'size-4')} Performance\n \n \n \n \n \n\n \n Management\n \n \n \n \n ${icon(Package, 'package', 'size-4')} Products\n \n \n \n \n ${icon(ShoppingCart, 'shopping-cart', 'size-4')} Orders\n \n \n \n \n ${icon(Users, 'users', 'size-4')} Subscribers\n \n \n \n \n ${icon(CreditCard, 'credit-card', 'size-4')} Transactions\n \n \n \n \n \n\n \n Content\n \n ${icon(Plus, 'plus', 'size-4')}\n \n \n \n \n \n ${icon(FileText, 'file-text', 'size-4')} Posts\n \n 10\n \n \n \n ${icon(Mail, 'mail', 'size-4')} Pages\n \n \n \n \n \n \n\n \n \n \n \n \n SW\n \n
\n Sarah Wilson\n Admin Account\n
\n ${icon(ChevronsUpDown, 'chevrons-up-down', 'ml-auto size-4 group-data-[collapsible=icon]:hidden')}\n \n \n \n\n ${expanded\n ? html`\n \n
\n ${this.toolbarButton('Settings', 'settings', SettingsIcon)}\n ${this.toolbarButton('Help', 'circle-question-mark', HelpCircle)}\n ${this.toolbarButton('Notifications', 'bell', Bell)}\n ${this.toolbarButton('Command palette', 'command', Command)}\n {\n this.isDark = !this.isDark\n setDark(this.isDark)\n }}\n >\n ${this.isDark ? icon(Sun, 'sun', 'size-4') : icon(Moon, 'moon', 'size-4')}\n \n \n
\n `\n : html`\n
\n \n
\n `}\n \n\n \n \n `\n }\n}\n\ncustomElements.get('uip-sidebar-07') || customElements.define('uip-sidebar-07', UipSidebar07)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-sidebar-07': UipSidebar07\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/sidebar-07/sidebar-07.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/avatar.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/sidebar.json" ] }