Change menu

webui/package-lock.json

@@ -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",

webui/package.json

@@ -32,5 +32,8 @@
 		"vite": "^4.0.4",
 		"vitest": "^0.25.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"hamburger-menu-svelte": "^2.2.0"
+	}
 }

webui/src/css/style.css

@@ -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 {
+header {
-    background-color: #282929;
+    height: 40px;
-    /*position: fixed;*/
+    display: flex;
-    width: 100%;
+    align-items: center;
-    z-index: 510;
+    padding:10px 20px;
 }
 
-.header ul {
+@media (min-width: 768px) {
-    margin: 0;
+    header {
-    padding: 0;
+        justify-content: space-between;
-    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;
     }
 }
 

webui/src/lib/Header.svelte

@@ -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">
+    <Hamburger {menu_list}/>
-        <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>
 </header>
+
+<style>
+	/* header {
+		height: 40px;
+		display: flex;
+		align-items: center;
+		padding:10px 20px;
+	}
+
+	@media (min-width: 768px) {
+		header {
+			justify-content: space-between;
+		}
+	} */
+</style>