marvin/MarvinKrausser.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mobile bar button

Browse Source
This commit is contained in:
marvin
2026-05-08 01:06:05 +02:00
parent 6e79fff69a
commit 274a77107f
4 changed files with 79 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -12,6 +12,7 @@
</head> </head>
<body> <body>
<button id="button-mobile" class="button-mobile">22</button>
<div id="navbar-mobile"> <div id="navbar-mobile">
</div> </div>
scripts/main_page.js
+18 -2
View File
@@ -86,6 +86,20 @@ async function loadData() {
const sidebar_top = document.getElementById("sidebar-top-content"); const sidebar_top = document.getElementById("sidebar-top-content");
const navbar_mobile = document.getElementById("navbar-mobile"); const navbar_mobile = document.getElementById("navbar-mobile");
const button_navbar_mobile = document.createElement("button");
const button_mobile = document.getElementById("button-mobile");
button_navbar_mobile.textContent = "";
button_mobile.textContent = "";
button_navbar_mobile.classList = "button-mobile";
navbar_mobile.appendChild(button_navbar_mobile);
button_navbar_mobile.addEventListener("click", () => {
navbar_mobile.classList.toggle("inactive");
button_mobile.classList.toggle("inactive");
});
button_mobile.addEventListener("click", () => {
navbar_mobile.classList.toggle("inactive");
button_mobile.classList.toggle("inactive");
});
const sidebar_top_status = document.createElement("p"); const sidebar_top_status = document.createElement("p");
sidebar_top_status.textContent = data.status; sidebar_top_status.textContent = data.status;
@@ -232,6 +246,8 @@ async function loadData() {
}); });
restoreScroll(); restoreScroll();
setupObserver(); setupObserver();
navbar_mobile.classList.add("inactive");
} }
loadData(); loadData();
@@ -299,10 +315,10 @@ function create_navbar_entry(navbar, navar_mobile, title, id, j) {
create_navbar_entry_mobile(navar_mobile, title, id) create_navbar_entry_mobile(navar_mobile, title, id)
} }
function create_navbar_entry_mobile(navar_mobile, title, id) { function create_navbar_entry_mobile(navbar_mobile, title, id) {
const navbar_item = document.createElement("li"); const navbar_item = document.createElement("li");
navbar_item.className = "navbar-item-mobile"; navbar_item.className = "navbar-item-mobile";
navar_mobile.appendChild(navbar_item); navbar_mobile.appendChild(navbar_item);
const navbar_link = document.createElement("a"); const navbar_link = document.createElement("a");
navbar_link.className = "nav-link-mobile"; navbar_link.className = "nav-link-mobile";
styles/mobile_bar_style.css
+56 -1
View File
@@ -13,12 +13,67 @@
background: var(--bg); background: var(--bg);
} }
#navbar-mobile.inactive {
display: none;
}
@media (min-width: 1001px) { @media (min-width: 1001px) {
#navbar-mobile { #navbar-mobile {
display: none; display: none;
} }
} }
.button-mobile {
position: relative;
width: 40px;
height: 40px;
background: var(--surface);
border: none;
margin-top: 10px;
cursor: pointer;
}
.button-mobile::before {
content: "";
position: absolute;
left: 50%;
top: 30%;
background: var(--text);
height: 2px;
width: 60%;
transform: translateX(-50%);
}
.button-mobile::after {
content: "";
position: absolute;
left: 50%;
top: 65%;
background: var(--text);
height: 2px;
width: 60%;
transform: translateX(-50%);
}
.button-mobile:hover {
width: 40px;
height: 40px;
background: var(--bg2);
border: none;
margin-top: 10px;
}
#button-mobile {
position: fixed;
top: 5px;
left: 5px;
margin-top: 0;
}
#button-mobile.inactive {
display: none;
}
.navbar-item-mobile { .navbar-item-mobile {
width: 100%; width: 100%;
height: 80px; height: 80px;
@@ -26,7 +81,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px;
} }
.navbar-item-mobile:hover { .navbar-item-mobile:hover {
@@ -41,4 +95,5 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px;
} }
styles/projects_style.css
+4 -2
View File
@@ -1,17 +1,19 @@
.main-content { .main-content {
margin-left: var(--nav-w); margin-left: var(--nav-w);
--margin-main-content: 100px; --margin-main-content: 100px;
--margin-top: 100px;
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.main-content { .main-content {
margin-left: var(--nav-mobile-w); margin-left: 0;
--margin-main-content: 10px; --margin-main-content: 10px;
--margin-top: 30px;
} }
} }
#introduction { #introduction {
padding-top: 100px; padding-top: var(--margin-top);
margin-left: var(--margin-main-content); margin-left: var(--margin-main-content);
margin-bottom: 60px; margin-bottom: 60px;
margin-right: var(--margin-main-content); margin-right: var(--margin-main-content);