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>
<body>
<button id="button-mobile" class="button-mobile">22</button>
<div id="navbar-mobile">
</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 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");
sidebar_top_status.textContent = data.status;
@@ -232,6 +246,8 @@ async function loadData() {
});
restoreScroll();
setupObserver();
navbar_mobile.classList.add("inactive");
}
loadData();
@@ -299,10 +315,10 @@ function create_navbar_entry(navbar, navar_mobile, title, id, j) {
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");
navbar_item.className = "navbar-item-mobile";
navar_mobile.appendChild(navbar_item);
navbar_mobile.appendChild(navbar_item);
const navbar_link = document.createElement("a");
navbar_link.className = "nav-link-mobile";
styles/mobile_bar_style.css
+56 -1
View File
@@ -13,12 +13,67 @@
background: var(--bg);
}
#navbar-mobile.inactive {
display: none;
}
@media (min-width: 1001px) {
#navbar-mobile {
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 {
width: 100%;
height: 80px;
@@ -26,7 +81,6 @@
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.navbar-item-mobile:hover {
@@ -41,4 +95,5 @@
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
styles/projects_style.css
+4 -2
View File
@@ -1,17 +1,19 @@
.main-content {
margin-left: var(--nav-w);
--margin-main-content: 100px;
--margin-top: 100px;
}
@media (max-width: 1000px) {
.main-content {
margin-left: var(--nav-mobile-w);
margin-left: 0;
--margin-main-content: 10px;
--margin-top: 30px;
}
}
#introduction {
padding-top: 100px;
padding-top: var(--margin-top);
margin-left: var(--margin-main-content);
margin-bottom: 60px;
margin-right: var(--margin-main-content);