Navlist

<.navlist>
  <.navlink navigate="/customers">Customers</.navlink>
  <.navlink navigate="/subscriptions">Subscriptions</.navlink>
  <.navlink navigate="/products">Products</.navlink>
  <.navlink navigate="/coupons">Coupons</.navlink>
</.navlist>

<.navlist heading="Main">
  <.navlink navigate={~p"/dashboard"} active>
    Dashboard
  </.navlink>
  <.navlink navigate={~p"/projects"}>
    Projects
  </.navlink>
  <.navlink navigate={~p"/analytics"}>
    Analytics
  </.navlink>
</.navlist>

<.navlist>
  <.navlink navigate={~p"/dashboard"} active>
    <.icon name="hero-home" class="size-5" /> Dashboard
  </.navlink>
  <.navlink navigate={~p"/projects"}>
    <.icon name="hero-folder" class="size-5" /> Projects
  </.navlink>
  <.navlink navigate={~p"/team"}>
    <.icon name="hero-users" class="size-5" /> Team
  </.navlink>
  <.navlink navigate={~p"/settings"}>
    <.icon name="hero-cog-6-tooth" class="size-5" /> Settings
  </.navlink>
</.navlist>

<.navlist class="w-min">
  <.tooltip value="Customers" placement="right">
  <.navlink href="#">
    <.icon name="hero-users" class="size-5" />
  </.navlink>
  </.tooltip>
  <.tooltip value="Subscriptions" placement="right">
  <.navlink href="#">
    <.icon name="hero-shopping-bag" class="size-5" />
  </.navlink>
  </.tooltip>
  <.tooltip value="Products" placement="right">
  <.navlink href="#">
    <.icon name="hero-cube" class="size-5" />
  </.navlink>
  </.tooltip>
  <.tooltip value="Coupons" placement="right">
  <.navlink href="#">
    <.icon name="hero-tag" class="size-5" />
  </.navlink>
  </.tooltip>
</.navlist>

<.navlist heading="Main">
  <.navlink navigate={~p"/dashboard"} active>
    <.icon name="hero-home" class="size-5" /> Dashboard
  </.navlink>
  <.navlink navigate={~p"/projects"}>
    <.icon name="hero-folder" class="size-5" /> Projects
  </.navlink>
  <.navlink navigate={~p"/analytics"}>
    <.icon name="hero-chart-bar" class="size-5" /> Analytics
  </.navlink>
</.navlist>

<.navlist heading="Settings">
  <.navlink navigate={~p"/profile"}>
    <.icon name="hero-user" class="size-5" /> Profile
  </.navlink>
  <.navlink navigate={~p"/preferences"}>
    <.icon name="hero-cog-6-tooth" class="size-5" /> Preferences
  </.navlink>
  <.navlink navigate={~p"/billing"}>
    <.icon name="hero-credit-card" class="size-5" /> Billing
  </.navlink>
</.navlist>

<.navlist heading="Support">
  <.navlink navigate={~p"/help"}>
    <.icon name="hero-question-mark-circle" class="size-5" /> Help Center
  </.navlink>
  <.navlink navigate={~p"/contact"}>
    <.icon name="hero-envelope" class="size-5" /> Contact Us
  </.navlink>
</.navlist>

<.navlist>
  <.navlink href="/inbox/unread" active>
    <.icon name="hero-envelope" class="size-5" /> Unread
    <.badge color="danger" class="ml-auto rounded-full">23</.badge>
  </.navlink>
  <.navlink href="/inbox/starred">
    <.icon name="hero-star" class="size-5" /> Starred
    <.badge color="danger" class="ml-auto rounded-full">5</.badge>
  </.navlink>
  <.navlink href="/inbox/archive">
    <.icon name="hero-archive-box" class="size-5" /> Archive
  </.navlink>
  <.navlink href="/inbox/trash">
    <.icon name="hero-trash" class="size-5" /> Trash
  </.navlink>
</.navlist>

<.navlist>
  <.navlink navigate={~p"/projects/active"}>
    <.icon name="hero-play" class="size-5" /> Active Projects
    <.badge color="success" class="ml-auto">12</.badge>
  </.navlink>
  <.navlink navigate={~p"/projects/pending"}>
    <.icon name="hero-clock" class="size-5" /> Pending
    <.badge color="warning" class="ml-auto">3</.badge>
  </.navlink>
  <.navlink navigate={~p"/projects/completed"}>
    <.icon name="hero-check-circle" class="size-5" /> Completed
    <.badge color="surface" class="ml-auto">87</.badge>
  </.navlink>
</.navlist>

<.navlist>
  <.navlink navigate={~p"/notifications"}>
    <.icon name="hero-bell" class="size-5" /> Notifications
    <.badge variant="dot" color="danger" class="ml-auto"></.badge>
  </.navlink>
  <.navlink navigate={~p"/messages"}>
    <.icon name="hero-chat-bubble-left" class="size-5" /> Messages
    <.badge variant="pill" color="blue" class="ml-auto">New</.badge>
  </.navlink>
  <.navlink navigate={~p"/updates"}>
    <.icon name="hero-arrow-path" class="size-5" /> Updates
    <.badge variant="solid" color="green" class="ml-auto">Ready</.badge>
  </.navlink>
</.navlist>

<.navlist>
  <.navlink phx-click={JS.toggle_attribute({"data-expanded", ""})}>
    <.icon name="hero-users" class="size-5" /> Customers
    <.icon
      name="hero-chevron-right"
      class="size-3 ml-auto text-zinc-500 in-data-expanded:rotate-90 transition-transform duration-200"
    />
  </.navlink>
  <div class="grid grid-rows-[0fr] [[data-expanded]~&]:grid-rows-[1fr] transition-all duration-200">
    <div class="overflow-hidden px-4 -mr-4 border-l ml-3">
      <.navlist>
        <.navlink navigate="/customers/active">Active</.navlink>
        <.navlink navigate="/customers/leads">Leads</.navlink>
        <.navlink navigate="/customers/inactive">Inactive</.navlink>
      </.navlist>
    </div>
  </div>

  <.navlink navigate="/subscriptions">
    <.icon name="hero-arrow-path" class="size-5" /> Subscriptions
  </.navlink>
</.navlist>

<.navlist>
  <.navlink phx-click={JS.toggle_attribute({"data-expanded", ""})}>
    <.icon name="hero-building-office" class="size-5" /> Organization
    <.icon
      name="hero-chevron-right"
      class="size-3 ml-auto text-zinc-500 in-data-expanded:rotate-90 transition-transform duration-200"
    />
  </.navlink>
  <div class="grid grid-rows-[0fr] [[data-expanded]~&]:grid-rows-[1fr] transition-all duration-200">
    <div class="overflow-hidden px-4 -mr-4 border-l ml-3">
      <.navlist>
        <.navlink navigate="/org/departments">Departments</.navlink>

        <.navlink phx-click={JS.toggle_attribute({"data-expanded", ""})}>
          Teams
          <.icon
            name="hero-chevron-right"
            class="size-3 ml-auto text-zinc-500 in-data-expanded:rotate-90 transition-transform duration-200"
          />
        </.navlink>
        <div class="grid grid-rows-[0fr] [[data-expanded]+&]:grid-rows-[1fr] transition-all duration-200">
          <div class="overflow-hidden px-4 border-l ml-3">
            <.navlist>
              <.navlink navigate="/teams/development">Development</.navlink>
              <.navlink navigate="/teams/design">Design</.navlink>
              <.navlink navigate="/teams/marketing">Marketing</.navlink>
            </.navlist>
          </div>
        </div>

        <.navlink navigate="/org/roles">Roles</.navlink>
      </.navlist>
    </div>
  </div>
</.navlist>