8e535c086e
Header.html template adjusted to make the navigation menu collapse behind a button on small screens. There should be no change when viewing these on tablets and larger screens. Changes include: - Making the navigation menu collapse on small screens, to be replaced by a "hamburger" icon that then expands to show the menu when clicked. - Ensuring GitHub icon takes same colour/style as the navigation items - Added the Bootstrap js script to the footer (in order to make the collapsing menu work). This code will have to be amedned to make the "local only" version work properly.
67 lines
3.1 KiB
HTML
67 lines
3.1 KiB
HTML
{{ define "header"}}
|
|
<html lang="en" data-bs-theme="{{ .Config.Color }}">
|
|
<head>
|
|
<title>Watch Your LAN</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!--Favicon-->
|
|
<link href="data:image/x-icon;base64,{{ .Config.Icon }}" rel="icon" type="image/x-icon" />
|
|
{{ if eq .Config.NodePath "" }}
|
|
<!-- Bootstrap and theme -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.0/dist/{{ .Config.Theme }}/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font for icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
|
{{ else }}
|
|
<link rel="stylesheet" href="{{ .Config.NodePath }}/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link href="{{ .Config.NodePath }}/node_modules/bootswatch/dist/{{ .Config.Theme }}/bootstrap.min.css" rel="stylesheet">
|
|
{{ end }}
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
|
|
<div class="container-lg">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<button class="btn navbar-toggler nav-link active fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div class="collapse navbar-collapse" id="navbarContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/line?state=on">Online</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/line?state=off">Offline</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/history/">History</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/config/">Config</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/auth_conf/">Auth</a>
|
|
</li>
|
|
{{ if .Config.Auth }}
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/login/?logout=yes">Log Out</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
<form action="/search_hosts/" method="post" class="d-flex mb-2 mb-md-0">
|
|
<input name="search" type="text" class="form-control text-dark me-2" placeholder="Search">
|
|
<button type="submit" class="btn btn-primary">Search</button>
|
|
</form>
|
|
</div>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active fs-3 ms-md-2" target="_blank" href="https://github.com/aceberg/WatchYourLAN"><i class="bi bi-github"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
{{ end }}
|