diff --git a/webui/package-lock.json b/webui/package-lock.json
index 6d43e20..0b80eda 100644
--- a/webui/package-lock.json
+++ b/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",
diff --git a/webui/package.json b/webui/package.json
index d107e61..bca54bc 100644
--- a/webui/package.json
+++ b/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"
+ }
}
diff --git a/webui/src/css/style.css b/webui/src/css/style.css
index ff68cb3..77f8f07 100644
--- a/webui/src/css/style.css
+++ b/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 {
- 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;
}
}
diff --git a/webui/src/lib/Header.svelte b/webui/src/lib/Header.svelte
index 56096a7..b06cc15 100644
--- a/webui/src/lib/Header.svelte
+++ b/webui/src/lib/Header.svelte
@@ -1,22 +1,27 @@
+
+
diff --git a/webui/src/routes/bicycle/+page.svelte b/webui/src/routes/bicycle/+page.svelte
index 1d98e89..57549e3 100644
--- a/webui/src/routes/bicycle/+page.svelte
+++ b/webui/src/routes/bicycle/+page.svelte
@@ -2,8 +2,8 @@
import { onMount } from "../../../node_modules/svelte/internal";
import icon from "$lib/images/wheels.svg"
- let backend_url = "https://home.blackfinn.de/api/bicycle";
- // let backend_url = "http://localhost:5000/api/bicycle";
+ // let backend_url = "https://home.blackfinn.de/api/bicycle";
+ let backend_url = "http://localhost:5000/api/bicycle";
let year = "2024";
let total_distance_value = 0.0;