fp/services/bright/lib/bright_web/components/navigation_components.ex

defmodule BrightWeb.NavigationComponents do

  @moduledoc """
  Components for user navigation
  """

  use Phoenix.Component
  use Phoenix.VerifiedRoutes,
    endpoint: BrightWeb.Endpoint,
    router: BrightWeb.Router,
    statics: BrightWeb.static_paths()

  alias Phoenix.LiveView.JS


  @doc """
  Renders a Bulma navbar component.

  ## Examples

      <.navbar brand="MyApp">
        <:start>
          <a class="navbar-item" href="/">Home</a>
          <a class="navbar-item" href="/about">About</a>
        </:start>
        <:end>
          <a class="navbar-item" href="/login">Login</a>
          <a class="navbar-item" href="/signup">Sign Up</a>
        </:end>
      </.navbar>
  """
  attr :rest, :global, doc: "any additional attributes for the navbar element"

  slot :start_slot, doc: "slot for navbar items aligned to the start"
  slot :end_slot, doc: "slot for navbar items aligned to the end"

  def navbar(assigns) do
    ~H"""
    <nav class="navbar" role="navigation" aria-label="main navigation" {@rest}>
      <div class="navbar-brand">
        <.link
          href={~p"/"}
          class="navbar-item"
        >
          <h1 class="title">🔞💦 Futureporn.net</h1>
        </.link>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" phx-click={JS.toggle(to: ".navbar-menu")}>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div class="navbar-menu">
        <div class="navbar-start">

            <.link
              href={~p"/streams"}
              class="navbar-item">
              Streams Archive
            </.link>

            <.link
              href={~p"/vods"}
              class="navbar-item">
              Vods
            </.link>

            <.link
              href={~p"/vtubers"}
              class="navbar-item">
              Vtubers
            </.link>

            <.link
              href={~p"/about"}
              class="navbar-item">
              About
            </.link>


            <.link
              href={~p"/tags"}
              class="navbar-item">
              Tags
            </.link>

            <!--<.link
              href={~p"/patrons"}
              class="navbar-item">
              Patrons
            </.link>

            <.link
              href={~p"/api"}
              class="navbar-item">
              API
            </.link>-->
        </div>

        <!--<div class="navbar-end">
          <.link
            href={~p"/status"}
            class="navbar-item">
            Status
          </.link>

          <.link
            href={~p"/profile"}
            class="navbar-item">
            Profile
          </.link>
        </div>-->
      </div>
    </nav>
    """
  end

end