Add menu to ui

This commit is contained in:
Anders Pitman
2020-10-11 11:13:08 -06:00
parent 1070c53107
commit af539f4d68

View File

@@ -9,6 +9,11 @@
<link rel="icon" href="data:image/gif;base64,R0lGODlhEAAQAAAAACwAAAAAAQABAAACASgAOw==">
<style>
:root {
--hover-color: #ddd;
}
body {
font-family: Helvetica;
display: flex;
@@ -19,6 +24,49 @@
max-width: 900px;
}
#menu-label {
font-size: 18px;
font-weight: bold;
display: block;
width: 100%;
border: 1px solid black;
cursor: pointer;
padding: 5px;
user-select: none;
}
#menu-label:hover {
background: var(--hover-color);
}
.menu {
display: none;
flex-direction: column;
position: absolute;
background: #fff;
border: 1px solid black;
min-width: 256px;
}
.menu-item {
border-bottom: 1px solid black;
padding: 5px;
text-decoration: none;
}
.menu-item:hover {
background: var(--hover-color);
}
.menu-item:visited {
color: #000;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .menu {
display: flex;
}
.button {
background: #ccc;
border: none;
@@ -50,7 +98,7 @@
align-items: center;
}
.tunnel:hover {
background-color: #ddd;
background: var(--hover-color);
}
.tunnel-adder {
@@ -63,6 +111,12 @@
<body>
<main>
<label id='menu-label' for='menu-toggle'>Menu</label>
<input type='checkbox' id='menu-toggle'/>
<div class='menu'>
<a class='menu-item' href='/'>Tunnels</a>
<a class='menu-item' href='/tokens'>Tokens</a>
</div>
<div class='tunnel-list'>
{{range $domain, $tunnel:= .}}
<div class='tunnel'>