danvics/watchyourlan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjusted header.html template to make menu responsive, collapsing on smaller screens

Browse source 
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.
This commit is contained in:
Adam Davidson 2024-01-05 10:41:29 +00:00
parent e8475c1eac
commit 8e535c086e
2 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
internal/web/templates/footer.html
View file

@ -1,4 +1,6 @@
{{ define "footer"}}
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
{{ end }}

35
internal/web/templates/header.html
View file

@ -3,6 +3,7 @@
<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 "" }}
@ -16,9 +17,17 @@
{{ end }}
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container-lg">
<ul class="navbar-nav">
<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>
@ -43,18 +52,16 @@
</li>
{{ end }}
</ul>
<ul class="nav navbar-nav navbar-right">
<form action="/search_hosts/" method="post">
<li class="input-group nav-item">
<input name="search" type="text" class="form-control text-dark" placeholder="Search">
<button type="submit" class="btn btn-primary">Search</button>
</li>
</form>
&nbsp;&nbsp;&nbsp;
<li class="nav-item"><a class="nav-link active" target="_blank" href="https://github.com/aceberg/WatchYourLAN">
<h3><i class="bi bi-github"></i></h3>
</a></li>
</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 }}