Change menu
This commit is contained in:
Thomas Klaehn
parent
0a2b75f4b5
commit
149a6ddefe
13
webui/package-lock.json
generated
13
webui/package-lock.json
generated
@ -7,6 +7,9 @@
|
||||
"": {
|
||||
"name": "home",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"hamburger-menu-svelte": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.10",
|
||||
"@neoconfetti/svelte": "^1.0.0",
|
||||
@ -1661,6 +1664,11 @@
|
||||
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/hamburger-menu-svelte": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/hamburger-menu-svelte/-/hamburger-menu-svelte-2.2.0.tgz",
|
||||
"integrity": "sha512-KCdOh8WgM6loONskHKD32YsYMjS5k5npoV5Stn3YxTK6iAVtgIxazq5n1cb1OkqOMcz2Gog6HrrHV7JHV/5ulQ=="
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
@ -4118,6 +4126,11 @@
|
||||
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
||||
"dev": true
|
||||
},
|
||||
"hamburger-menu-svelte": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/hamburger-menu-svelte/-/hamburger-menu-svelte-2.2.0.tgz",
|
||||
"integrity": "sha512-KCdOh8WgM6loONskHKD32YsYMjS5k5npoV5Stn3YxTK6iAVtgIxazq5n1cb1OkqOMcz2Gog6HrrHV7JHV/5ulQ=="
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
|
||||
@ -32,5 +32,8 @@
|
||||
"vite": "^4.0.4",
|
||||
"vitest": "^0.25.3"
|
||||
},
|
||||
"type": "module"
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"hamburger-menu-svelte": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,175 +141,20 @@ textarea {
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: #282929;
|
||||
}
|
||||
|
||||
|
||||
/*logo placement*/
|
||||
|
||||
header figure {
|
||||
float: left;
|
||||
color: #b6b6b6;
|
||||
}
|
||||
|
||||
header figure.logo {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
|
||||
/*Navigation*/
|
||||
|
||||
.header {
|
||||
background-color: #282929;
|
||||
/*position: fixed;*/
|
||||
width: 100%;
|
||||
z-index: 510;
|
||||
header {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:10px 20px;
|
||||
}
|
||||
|
||||
.header ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
/* background-color: #282929; */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.header li a {
|
||||
display: block;
|
||||
padding: 30px 5px 10px 5px;
|
||||
font-size: 1.5rem;
|
||||
border-right: 1px solid #282929;
|
||||
text-decoration: none;
|
||||
/* background: rgba(255, 255, 255, 0.9) */
|
||||
background-color: #282929;
|
||||
}
|
||||
|
||||
.header li a:hover,
|
||||
.header .menu-btn:hover {
|
||||
background-color: #282929;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 2em;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* menu */
|
||||
|
||||
.header .menu {
|
||||
clear: both;
|
||||
max-height: 0;
|
||||
transition: max-height .2s ease-out;
|
||||
}
|
||||
|
||||
|
||||
/* menu icon */
|
||||
|
||||
.header .menu-icon {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin: 2%;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header .menu-icon .nav-icon {
|
||||
background: #000;
|
||||
display: block;
|
||||
height: 5px;
|
||||
position: relative;
|
||||
transition: background .2s ease-out;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.header .menu-icon .nav-icon:before,
|
||||
.header .menu-icon .nav-icon:after {
|
||||
background: #000;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: all .2s ease-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header .menu-icon .nav-icon:before {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.header .menu-icon .nav-icon:after {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* menu btn */
|
||||
|
||||
.header .menu-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu {
|
||||
max-height: 1200px;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu-icon .nav-icon {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu-icon .nav-icon:before {
|
||||
transform: rotate(-45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked~.menu-icon .nav-icon:after {
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* menu content - larger screen*/
|
||||
|
||||
@media (min-width: 1132px) {
|
||||
.header li {
|
||||
float: left;
|
||||
}
|
||||
.header li a {
|
||||
padding: 20px 15px 5px 0px;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
}
|
||||
.header .menu {
|
||||
clear: none;
|
||||
float: right;
|
||||
max-height: none;
|
||||
}
|
||||
.header .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* smaller screen*/
|
||||
|
||||
@media (max-width: 924px) {
|
||||
.header li {
|
||||
padding: 30px 5px 10px 5px;
|
||||
}
|
||||
.header li a {
|
||||
font-size: 1.2rem;
|
||||
@media (min-width: 768px) {
|
||||
header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,27 @@
|
||||
<script>
|
||||
import favicon from '$lib/images/haus.svg'
|
||||
import Hamburger from "hamburger-menu-svelte";
|
||||
const menu_list = [
|
||||
{ name: "Home", url: "/" },
|
||||
{ name: "Bicycle", url: "/bicycle" },
|
||||
{ name: "Sauna", url: "/sauna" }
|
||||
];
|
||||
</script>
|
||||
|
||||
<header class="header">
|
||||
<!-- <a href="https://www.perinet.io" target="_blank" class="logo">
|
||||
<img src={perinetLogo} alt="Perinet Logo" width="180">
|
||||
</a> -->
|
||||
|
||||
<link rel="shortcut icon" type="image/svg" href={favicon} />
|
||||
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
|
||||
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
|
||||
|
||||
<ul class="menu">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/bicycle">Bicycle</a></li>
|
||||
<!-- <li><a href="/chicken">Chicken</a></li> -->
|
||||
<li><a href="/sauna">Sauna</a></li>
|
||||
</ul>
|
||||
<Hamburger {menu_list}/>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
/* header {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:10px 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user