VerticalGlobalNav

import { VerticalGlobalNav, Panel } from "density-base-ui";
import { Blocks, Files, GitBranch, Search, Terminal } from "lucide-react";

const items = [
  {
    id: "files",
    label: "Files",
    icon: <Files aria-hidden="true" size={18} strokeWidth={1.75} />,
  },
  {
    id: "search",
    label: "Search",
    icon: <Search aria-hidden="true" size={18} strokeWidth={1.75} />,
  },
  {
    id: "source-control",
    label: "Source control",
    icon: <GitBranch aria-hidden="true" size={18} strokeWidth={1.75} />,
  },
  {
    id: "terminal",
    label: "Terminal",
    icon: <Terminal aria-hidden="true" size={18} strokeWidth={1.75} />,
  },
  {
    id: "extensions",
    label: "Extensions",
    icon: <Blocks aria-hidden="true" size={18} strokeWidth={1.75} />,
  },
];

export default function VerticalGlobalNavExample() {
  return (
    <Panel>
      <VerticalGlobalNav
        aria-label="Workspace views"
        activeId="files"
        items={items}
      />
      <section style={styles.content}>Files</section>
    </Panel>
  );
}

const styles = {
  content: {
    display: "grid",
    placeItems: "center",
  },
} as const;