UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Floating Inset Sidebar

blocklayout
Boilerplate repo

Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant="floating" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.

Installation

$npx uipkge-ng@latest add sidebar-04
Manifest:https://uipkge.dev/r/angular/sidebar-04.jsonInstalls to:src/app/components/blocks/sidebar-04/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

NavChild
type NavChild { title: string; url: string; isActive?: boolean }
type NavItem = { title: string; url: string; isActive?: boolean; items: NavChild[] }

// This is sample data.
const data: { navMain: NavItem[] } = {
  navMain: [
    {
      title: 'Getting Started',
      url: '#',
      items: [
        { title: 'Installation', url: '#' },
        { title: 'Project Structure', url: '#' },
      ],
    },
    {
      title: 'Building Your Application',
      url: '#',
      items: [
        { title: 'Routing', url: '#' },
        { title: 'Data Fetching', url: '#', isActive: true },
        { title: 'Rendering', url: '#' },
        { title: 'Caching', url: '#' },
        { title: 'Styling', url: '#' },
        { title: 'Optimizing', url: '#' },
        { title: 'Configuring', url: '#' },
        { title: 'Testing', url: '#' },
        { title: 'Authentication', url: '#' },
        { title: 'Deploying', url: '#' },
        { title: 'Upgrading', url: '#' },
        { title: 'Examples', url: '#' },
      ],
    },
    {
      title: 'API Reference',
      url: '#',
      items: [
        { title: 'Components', url: '#' },
        { title: 'File Conventions', url: '#' },
        { title: 'Functions', url: '#' },
        { title: 'next.config.js Options', url: '#' },
        { title: 'CLI', url: '#' },
        { title: 'Edge Runtime', url: '#' },
      ],
    },
    {
      title: 'Architecture',
      url: '#',
      items: [
        { title: 'Accessibility', url: '#' },
        { title: 'Fast Refresh', url: '#' },
        { title: 'Next.js Compiler', url: '#' },
        { title: 'Supported Browsers', url: '#' },
        { title: 'Turbopack', url: '#' },
      ],
    },
    {
      title: 'Community',
      url: '#',
      items: [{ title: 'Contribution Guide', url: '#' }],
    },
  ],
}

Includes

sidebar

Files installed (2)

  • src/app/components/blocks/sidebar-04/sidebar-04.component.ts5.3 kB
    // Floating sidebar variant: rounded corners and inset margins via variant="floating",
// SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component } from '@angular/core'
import {
  UiSidebarComponent,
  UiSidebarContentComponent,
  UiSidebarGroupComponent,
  UiSidebarHeaderComponent,
  UiSidebarMenuButtonComponent,
  UiSidebarMenuComponent,
  UiSidebarMenuItemComponent,
  UiSidebarMenuSubButtonComponent,
  UiSidebarMenuSubComponent,
  UiSidebarMenuSubItemComponent,
} from '@/ui/sidebar/sidebar.component'

type NavChild = { title: string; url: string; isActive?: boolean }
type NavItem = { title: string; url: string; isActive?: boolean; items: NavChild[] }

// This is sample data.
const data: { navMain: NavItem[] } = {
  navMain: [
    {
      title: 'Getting Started',
      url: '#',
      items: [
        { title: 'Installation', url: '#' },
        { title: 'Project Structure', url: '#' },
      ],
    },
    {
      title: 'Building Your Application',
      url: '#',
      items: [
        { title: 'Routing', url: '#' },
        { title: 'Data Fetching', url: '#', isActive: true },
        { title: 'Rendering', url: '#' },
        { title: 'Caching', url: '#' },
        { title: 'Styling', url: '#' },
        { title: 'Optimizing', url: '#' },
        { title: 'Configuring', url: '#' },
        { title: 'Testing', url: '#' },
        { title: 'Authentication', url: '#' },
        { title: 'Deploying', url: '#' },
        { title: 'Upgrading', url: '#' },
        { title: 'Examples', url: '#' },
      ],
    },
    {
      title: 'API Reference',
      url: '#',
      items: [
        { title: 'Components', url: '#' },
        { title: 'File Conventions', url: '#' },
        { title: 'Functions', url: '#' },
        { title: 'next.config.js Options', url: '#' },
        { title: 'CLI', url: '#' },
        { title: 'Edge Runtime', url: '#' },
      ],
    },
    {
      title: 'Architecture',
      url: '#',
      items: [
        { title: 'Accessibility', url: '#' },
        { title: 'Fast Refresh', url: '#' },
        { title: 'Next.js Compiler', url: '#' },
        { title: 'Supported Browsers', url: '#' },
        { title: 'Turbopack', url: '#' },
      ],
    },
    {
      title: 'Community',
      url: '#',
      items: [{ title: 'Contribution Guide', url: '#' }],
    },
  ],
}

/**
 * Sidebar04 -- the React block, 1:1: a `variant="floating"` Sidebar with a brand row
 * and nested submenu routes. It reads the surrounding <ui-sidebar-provider> (pair
 * with <ui-sidebar-inset> + <ui-sidebar-trigger>). Edit `data` to change routes.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-sidebar-04, [ui-sidebar-04]',
  standalone: true,
  // React renders <Sidebar> itself: keep this wrapper out of the provider's flex layout.
  host: { class: 'contents' },
  imports: [
    UiSidebarComponent,
    UiSidebarHeaderComponent,
    UiSidebarContentComponent,
    UiSidebarGroupComponent,
    UiSidebarMenuComponent,
    UiSidebarMenuItemComponent,
    UiSidebarMenuButtonComponent,
    UiSidebarMenuSubComponent,
    UiSidebarMenuSubItemComponent,
    UiSidebarMenuSubButtonComponent,
  ],
  template: `
    <ui-sidebar variant="floating">
      <ui-sidebar-header>
        <ul ui-sidebar-menu>
          <li ui-sidebar-menu-item>
            <a ui-sidebar-menu-button size="lg" href="#">
              <div
                class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
              >
                <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true">
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div class="flex flex-col gap-0.5 leading-none">
                <span class="font-medium">uipkge</span>
                <span class="">v1.0.0</span>
              </div>
            </a>
          </li>
        </ul>
      </ui-sidebar-header>
      <ui-sidebar-content>
        <ui-sidebar-group>
          <ul ui-sidebar-menu class="gap-2">
            @for (item of data.navMain; track item.title) {
              <li ui-sidebar-menu-item>
                <a ui-sidebar-menu-button [href]="item.url" [isActive]="!!item.isActive" class="font-medium">
                  <span>{{ item.title }}</span>
                </a>
                @if (item.items.length) {
                  <ul ui-sidebar-menu-sub class="ml-0 border-l-0 px-1.5">
                    @for (childItem of item.items; track childItem.title) {
                      <li ui-sidebar-menu-sub-item>
                        <a ui-sidebar-menu-sub-button [href]="childItem.url" [isActive]="!!childItem.isActive">
                          <span>{{ childItem.title }}</span>
                        </a>
                      </li>
                    }
                  </ul>
                }
              </li>
            }
          </ul>
        </ui-sidebar-group>
      </ui-sidebar-content>
    </ui-sidebar>
  `,
})
export class UiSidebar04Component {
  readonly data = data
}
  • src/app/components/blocks/sidebar-04/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/sidebar-04.json