Sidebar

<div
  id="side-menu"
  class="z-1 fixed z-20 hidden h-full w-full justify-between overflow-auto bg-black/75 lg:static lg:z-auto lg:col-span-1 lg:flex lg:items-start lg:justify-start lg:self-stretch lg:bg-transparent"
>
  <div class="absolute flex min-h-full w-full lg:static">
    <nav class="bg-gohan w-20 min-w-20"><.navbar items={@navitems} /></nav>
    <nav class="w-56 min-w-56">
      <.subbar items={@subbaritems} current={@current} />
    </nav>
    <div class="flex grow items-start justify-end px-6 pt-6 lg:hidden">
      <.burger_close_button id="burger_close_button-small"
      click="close_burger_menu" icon="close" class="sticky top-6 right-6 flex
      justify-center items-center w-8 h-8 !rounded-full z-1 text-white text-xs
      !bg-black/50" />
    </div>
  </div>
</div>

defp navbar_set() do
  [
    %{name: "Sports", path: "/", icon: "sportsbet", active: true},
    %{name: "Item 2", path: "/resource_2", icon: "user"},
    %{name: "Item 3", path: "/resource_3", icon: "bank"},
    %{name: "Item 4", path: "/resource_4", icon: "trophy"},
    %{name: "Item 5", path: "/resource_5", icon: "gift"}
  ]
end

defp subbar_data() do
  [
    %{
      name: "Coinsports New",
      items: [
        %{id: :home, name: "Custom Events", path: "/"},
        %{id: :section_02, name: "Events", path: "/section_2"},
        %{id: :section_03, name: "Trading", path: "/section_3"},
        %{id: :section_04, name: "Customers", path: "/section_4"},
        ...
      ]
    },
    %{
      name: "Section name",
      items: [
        %{id: :section_05, name: "Inactive menu item", path: "/section_05"},
        %{id: :section_06, name: "Inactive menu item", path: "/section_06"},
        ...
      ]
    }
  ]
end