Sidebar

<div
  id="side-menu"
  class="fixed z-20 lg:static hidden lg:flex w-full h-full lg:col-span-1 justify-between lg:justify-start lg:items-start z-1 lg:z-auto lg:self-stretch bg-black/75 lg:bg-transparent overflow-auto"
>
  <div class="absolute lg:static flex w-full min-h-full">
    <nav class="min-w-20 w-20 bg-gohan">
      <.navbar items={@navitems} />
    </nav>
    <nav class="min-w-56 w-56">
      <.subbar items={@subbaritems} current={@current} />
    </nav>
    <div class="flex grow justify-end items-start pt-6 px-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