115 lines
2.6 KiB
Elixir
115 lines
2.6 KiB
Elixir
|
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"/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
|