navbar.templ

  1package pages
  2
  3import "fmt"
  4
  5type NavButton struct {
  6	link string
  7	text string
  8	icon string
  9}
 10
 11func navButtons(route string) []*NavButton {
 12	newVideos := &NavButton{"/", "New Videos", "collection-play"}
 13	watched := &NavButton{"/watched", "Watched", "check-circle"}
 14	channels := &NavButton{"/channels", "Channels", "people"}
 15	switch route {
 16	case "channels":
 17		return []*NavButton{newVideos, watched}
 18	case "new":
 19		return []*NavButton{channels, watched}
 20	case "watched":
 21		return []*NavButton{channels, newVideos}
 22	default:
 23		return []*NavButton{channels, newVideos, watched}
 24	}
 25}
 26
 27templ navbar(route string) {
 28	<nav class="navbar navbar-expand-lg bg-body-tertiary">
 29		<div class="container-fluid">
 30			<a class="navbar-brand" href="/">
 31				<img src="/assets/ytrssil.svg" alt="ytrssil" width="32" height="32"/>
 32			</a>
 33			if route != "auth" {
 34				<ul id="nav-buttons" class="navbar-nav me-auto mb-0 flex-row">
 35					<li class="nav-item me-1 me-lg-2 d-lg-none">
 36						<button
 37							type="button"
 38							class="btn btn-primary"
 39							onClick="window.location.reload();"
 40						><i class="bi bi-arrow-clockwise"></i></button>
 41					</li>
 42					<li class="nav-item me-1 me-lg-2">
 43						<button
 44							type="button"
 45							class="btn btn-outline-secondary"
 46							style="--bs-btn-color: var(--bs-body-color);"
 47							data-bs-toggle="modal"
 48							data-bs-target="#add-video-modal"
 49						>
 50							<span class="d-none d-lg-inline">Add Video </span><i class="bi bi-camera-video"></i>
 51						</button>
 52					</li>
 53					<li class="nav-item me-1 me-lg-2">
 54						<button
 55							type="button"
 56							class="btn btn-outline-secondary"
 57							style="--bs-btn-color: var(--bs-body-color);"
 58							data-on:click="@post('/fetch')"
 59						>
 60							<span class="d-none d-lg-inline">Fetch </span><i class="bi bi-cloud-download"></i>
 61						</button>
 62					</li>
 63					<li class="nav-item me-1 me-lg-2">
 64						<button
 65							type="button"
 66							class="btn btn-outline-secondary"
 67							style="--bs-btn-color: var(--bs-body-color);"
 68							data-bs-toggle="modal"
 69							data-bs-target="#subscription-modal"
 70						>
 71							<span class="d-none d-lg-inline">Subscribe </span><i class="bi bi-bookmark-plus"></i>
 72						</button>
 73					</li>
 74					for _, button := range navButtons(route) {
 75						<li class="nav-item me-1 me-lg-2">
 76							<a href={ button.link } class="btn btn-outline-secondary" style="--bs-btn-color: var(--bs-body-color);">
 77								<span class="d-none d-lg-inline">{ button.text }</span> <i class={ fmt.Sprintf("bi bi-%s", button.icon) }></i>
 78							</a>
 79						</li>
 80					}
 81				</ul>
 82				<div class="d-flex" role="search">
 83					<input id="video-search" class="form-control me-2 d-lg-block d-none" type="search" placeholder="Search videos..."/>
 84					<button
 85						type="button"
 86						class="btn btn-outline-secondary d-lg-none"
 87						style="--bs-btn-color: var(--bs-body-color);"
 88						onclick="
 89							const buttons = document.getElementById('nav-buttons');
 90							const search = document.getElementById('video-search');
 91							if (search.classList.contains('d-none')) {
 92								buttons.classList.add('d-none');
 93								search.classList.remove('d-none');
 94								search.focus();
 95							} else {
 96								buttons.classList.remove('d-none');
 97								search.classList.add('d-none');
 98							}
 99						"
100					>
101						<i class="bi bi-search"></i>
102					</button>
103				</div>
104			}
105		</div>
106	</nav>
107}