Add missing files, update style

internal/web/templates/layout.html

@@ -3,17 +3,36 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark">
 <title>{{template "title" .}} · pcap tools</title>
+<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
 <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-<header>
-  <nav>
-    <a href="/" class="brand">pcap tools</a>
-    {{range .Tools}}<a href="{{.Path}}"{{if eq .Path $.Active}} class="active"{{end}}>{{.Name}}</a>{{end}}
-  </nav>
+<input type="checkbox" id="nav-toggle" class="nav-toggle visually-hidden" aria-label="Toggle navigation">
+<header class="topbar">
+  <label for="nav-toggle" class="burger" title="Menu">
+    <svg viewBox="0 0 60 50" aria-hidden="true"><rect y="41.8" width="60" height="8.2"/><rect y="20.9" width="60" height="8.2"/><rect width="60" height="8.2"/></svg>
+  </label>
+  <a href="/" class="app-title">pcap tools</a>
+  <a href="/" class="logo-symbol" aria-label="Home">
+    <svg viewBox="0 0 25 25" aria-hidden="true"><path d="m15.3 18.8 1.9 4.2h2.1l-2.5-6.4zM9.9 19.8 7.5 19l.7 4h2z"/><path d="m18.7 8.1-1.2.8L15 7.1l-1.2 1.3L11 7.3l-.5 2.9 2.1 2.3-6.8 1.1.1-2.6-2.1.9.7 1.8-1 9.3h2.1l1.2-5.2 4.8 1.6 2.5 3.6h2.1l-2-4.3 4.4-6.7-.7-1.6.8-.4 1.4 3 1.4-2.8-2.8-2.1zm-3.8 2.2-.8-.5.9-1.4.8.5-.9 1.4zM9.195 2.368l1.042-.354 1.286 3.788-1.042.353zM5.072 3.737l.747-.808 3.892 3.597-.746.808z"/><path d="m4.483 8.179.274-1.065 3.777.97L8.26 9.15z"/></svg>
+  </a>
 </header>
-<main>
+<nav class="sidebar" aria-label="Tools">
+  <div class="nav-section">Tools</div>
+  {{range .Tools}}<a href="{{.Path}}" class="nav-item{{if eq .Path $.Active}} active{{end}}"{{if eq .Path $.Active}} aria-current="page"{{end}}>{{.Name}}</a>
+  {{end}}
+</nav>
+<main class="content">
+  <div class="toolbar">
+    <div class="breadcrumb">
+      {{- if ne .Active "/"}}<a href="/" class="toolbar-link">pcap tools</a><span class="title-separator">/</span>{{end -}}
+      <span class="toolbar-title">{{template "title" .}}</span>
+    </div>
+    {{block "toolbar-info" .}}{{end}}
+  </div>
 {{template "content" .}}
 </main>
 </body>