Sidebar

import {
  Sidebar, SidebarHeader, SidebarContent,
  SidebarSection, SidebarItem, SidebarFooter,
} from "@grassroot/ui-react";
 
<Sidebar>
  <SidebarHeader>Northwind</SidebarHeader>
  <SidebarContent>
    <SidebarSection title="Platform">
      <SidebarItem icon={<div>GridIcon</div>} active count={38}>Services</SidebarItem>
      <SidebarItem icon={<div>DeployIcon</div>}>Deploys</SidebarItem>
    </SidebarSection>
  </SidebarContent>
  <SidebarFooter>Alex Mercer</SidebarFooter>
</Sidebar>

import { SidebarFooter, SidebarItem, SidebarSection, SidebarContent, SidebarHeader, Sidebar } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Sidebar
 
      >
        <SidebarHeader>Northwind</SidebarHeader>
        <SidebarContent
 
      >
          <SidebarSection
        title="Platform"
      >
            <SidebarItem icon={<div>GridIcon</div>} active count={38}>Services</SidebarItem>
            <SidebarItem icon={<div>DeployIcon</div>}>Deploys</SidebarItem>
          </SidebarSection>
        </SidebarContent>
        <SidebarFooter>Alex Mercer</SidebarFooter>
      </Sidebar>
    </>
  );
}