{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sidebar-06", "title": "Starred Project Sidebar", "type": "registry:block", "description": "Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.", "categories": [ "layout", "sidebar" ], "files": [ { "path": "packages/elements-lit/src/blocks/sidebar-06/sidebar-06.ts", "content": "import { LitElement, css, html } from 'lit'\nimport {\n Briefcase,\n Calendar,\n ChartLine,\n ChevronsUpDown,\n ClipboardList,\n Folder,\n GraduationCap,\n HeartPulse,\n HelpCircle,\n Inbox,\n LayoutDashboard,\n Monitor,\n Moon,\n Palette,\n Search,\n Send,\n Settings as SettingsIcon,\n Star,\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/dropdown-menu/dropdown-menu'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/sidebar/sidebar'\nimport type { UipSidebarProvider } from '../../components/sidebar/sidebar'\n\ntype ThemeValue = 'light' | 'dark' | 'system'\n\nfunction getTheme(): ThemeValue {\n try {\n const stored = localStorage.getItem('uipkge-theme')\n if (stored === 'light' || stored === 'dark' || stored === 'system') return stored\n } catch {\n // ignore\n }\n return document.documentElement.classList.contains('dark') ? 'dark' : 'light'\n}\n\nfunction setTheme(value: ThemeValue) {\n try {\n localStorage.setItem('uipkge-theme', value)\n } catch {\n // ignore\n }\n const dark = value === 'dark' || (value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)\n document.documentElement.classList.toggle('dark', dark)\n}\n\n// Colorful, customised HRMS-style sidebar -- branded project tiles, badges,\n// status dots, and a user pill footer. Every row is spelled out inline so\n// you can swap colors and labels in place.\n\n/**\n * — the registry Sidebar06 block as a web component.\n *\n * Class strings are React's verbatim. The footer dropdown's `side` follows\n * the provider's isMobile (React's useSidebar); the theme submenu writes\n * the `dark` class on documentElement directly (the `next-themes`\n * dependency is not ported — same visual result, persisted to\n * localStorage). The search field is with `prefix`/`suffix`\n * slots (React's SidebarInput prefix/suffix props). No props, no events:\n * edit the markup in place.\n */\nexport class UipSidebar06 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 theme: { state: true },\n query: { state: true },\n }\n\n private theme: ThemeValue = 'light'\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-06')\n this.theme = getTheme()\n // Re-render when the viewport crosses the mobile breakpoint so the\n // footer dropdown side follows isMobile (React's useSidebar re-render).\n this.media = window.matchMedia('(max-width: 768px)')\n this.media.addEventListener('change', this.rerender)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.media?.removeEventListener('change', this.rerender)\n }\n\n private rerender = () => this.requestUpdate()\n\n render() {\n const isMobile = (this.closest('uip-sidebar-provider') as UipSidebarProvider | null)?.isMobile ?? false\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 ⌘F\n \n \n
\n \n\n \n \n \n \n \n \n ${icon(LayoutDashboard, 'layout-dashboard', 'size-4')} Dashboard\n \n \n \n \n ${icon(Users, 'users', 'size-4')} Employees\n \n \n \n \n ${icon(Briefcase, 'briefcase', 'size-4')} Clients\n \n \n \n \n ${icon(Folder, 'folder', 'size-4')} Projects\n \n \n \n \n \n\n \n\n \n Workforce\n \n \n \n \n ${icon(Calendar, 'calendar', 'size-4')} Calendar\n \n \n \n \n ${icon(ClipboardList, 'clipboard-list', 'size-4')} Attendance\n \n \n \n \n ${icon(Inbox, 'inbox', 'size-4')} Inbox\n \n 6\n \n \n \n ${icon(ChartLine, 'chart-line', 'size-4')} Analytics\n \n \n \n \n \n\n \n\n \n Projects\n \n \n ${[\n { tile: 'bg-chart-1', icon: Folder, iconName: 'folder', name: 'Shift Planner' },\n { tile: 'bg-chart-2', icon: GraduationCap, iconName: 'graduation-cap', name: 'Training Portal' },\n { tile: 'bg-chart-3', icon: HeartPulse, iconName: 'heart-pulse', name: 'Performance Hub' },\n { tile: 'bg-chart-4', icon: ChartLine, iconName: 'chart-line', name: 'Expense Claims' },\n ].map(\n (p) => html`\n \n \n
\n ${icon(p.icon, p.iconName, 'size-3')}\n
\n ${p.name}\n \n \n ${icon(Star, 'star', 'size-3.5 fill-current')}\n \n \n `,\n )}\n \n \n \n\n \n\n \n My team\n \n \n ${[\n { initials: 'OB', tile: 'bg-chart-1/15', name: 'Olivia Bennett', dot: 'bg-destructive' },\n { initials: 'DM', tile: 'bg-chart-2/15', name: 'Daniel Morgan', dot: 'bg-warning' },\n { initials: 'ER', tile: 'bg-chart-3/15', name: 'Ethan Reynolds', dot: 'bg-success' },\n ].map(\n (person) => html`\n \n \n \n ${person.initials}\n \n ${person.name}\n \n \n \n \n \n `,\n )}\n \n \n \n\n \n\n \n Administration\n \n \n \n \n ${icon(SettingsIcon, 'settings', 'size-4')} Settings\n \n \n \n \n ${icon(HelpCircle, 'circle-question-mark', 'size-4')} Help center\n \n \n \n \n \n \n\n \n \n \n \n \n
\n \n JC\n \n \n
\n
\n James Carter\n Admin\n
\n ${icon(ChevronsUpDown, 'chevrons-up-down', 'ml-auto size-4 group-data-[collapsible=icon]:hidden')}\n \n \n James Carter\n \n ${icon(Send, 'send', 'size-4')} Invite teammates\n ${icon(SettingsIcon, 'settings', 'size-4')} Workspace settings\n \n \n \n ${icon(Palette, 'palette', 'size-4')} Theme\n ${this.theme}\n \n \n ) => {\n this.theme = e.detail.value as ThemeValue\n setTheme(this.theme)\n }}\n >\n ${icon(Sun, 'sun', 'size-4')} Light\n ${icon(Moon, 'moon', 'size-4')} Dark\n ${icon(Monitor, 'monitor', 'size-4')} System\n \n \n \n \n \n \n \n \n\n \n \n `\n }\n}\n\ncustomElements.get('uip-sidebar-06') || customElements.define('uip-sidebar-06', UipSidebar06)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-sidebar-06': UipSidebar06\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/sidebar-06/sidebar-06.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/avatar.json", "https://uipkge.dev/r/lit/dropdown-menu.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/sidebar.json" ] }