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

added mobile bar

Browse Source
This commit is contained in:
marvin
2026-05-08 00:29:52 +02:00
parent f90936553e
commit 6e79fff69a
6 changed files with 82 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+5 -3
View File
@@ -7,10 +7,14 @@
<title id="website_title"></title> <title id="website_title"></title>
<link rel="stylesheet" href="styles/main_style.css"> <link rel="stylesheet" href="styles/main_style.css">
<link rel="stylesheet" href="styles/sidebar_style.css"> <link rel="stylesheet" href="styles/sidebar_style.css">
<link rel="stylesheet" href="styles/mobile_bar_style.css">
<link rel="stylesheet" href="styles/projects_style.css"> <link rel="stylesheet" href="styles/projects_style.css">
</head> </head>
<body> <body>
<div id="navbar-mobile">
</div>
<aside class="sidebar"> <aside class="sidebar">
<div id="sidebar-top"> <div id="sidebar-top">
@@ -54,9 +58,7 @@
<div id="projects-section"></div> <div id="projects-section"></div>
</div> </div>
<script src="scripts/main_page.js"> <script src="scripts/main_page.js"></script>
</script>
</body> </body>
scripts/main_page.js
+19 -3
View File
@@ -85,6 +85,8 @@ async function loadData() {
const navbar = document.getElementById("navbar"); const navbar = document.getElementById("navbar");
const sidebar_top = document.getElementById("sidebar-top-content"); const sidebar_top = document.getElementById("sidebar-top-content");
const navbar_mobile = document.getElementById("navbar-mobile");
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;
sidebar_top.appendChild(sidebar_top_status); sidebar_top.appendChild(sidebar_top_status);
@@ -113,7 +115,7 @@ async function loadData() {
github_link_introduction.rel = "noopener noreferrer"; github_link_introduction.rel = "noopener noreferrer";
introduction.appendChild(github_link_introduction); introduction.appendChild(github_link_introduction);
create_navbar_entry(navbar, data.title_introduction, "introduction", 0); create_navbar_entry(navbar, navbar_mobile, data.title_introduction, "introduction", 0);
const navbar_group = document.createElement("li"); const navbar_group = document.createElement("li");
navbar_group.className = "navbar-group"; navbar_group.className = "navbar-group";
@@ -128,7 +130,7 @@ async function loadData() {
project.setAttribute("data-nav", item.id); project.setAttribute("data-nav", item.id);
container.appendChild(project); container.appendChild(project);
create_navbar_entry(navbar, item.title, item.id, j + 1); create_navbar_entry(navbar, navbar_mobile, item.title, item.id, j + 1);
const header = document.createElement("div"); const header = document.createElement("div");
header.className = "section-header"; header.className = "section-header";
@@ -275,7 +277,7 @@ document.addEventListener("click", (e) => {
} }
}); });
function create_navbar_entry(navbar, title, id, j) { function create_navbar_entry(navbar, navar_mobile, title, id, j) {
const navbar_item = document.createElement("li"); const navbar_item = document.createElement("li");
navbar_item.className = "navbar-item"; navbar_item.className = "navbar-item";
navbar.appendChild(navbar_item); navbar.appendChild(navbar_item);
@@ -293,6 +295,20 @@ function create_navbar_entry(navbar, title, id, j) {
navbar_link.appendChild(text); navbar_link.appendChild(text);
navbar_link.dataset.target = id; navbar_link.dataset.target = id;
navbar_item.appendChild(navbar_link); navbar_item.appendChild(navbar_link);
create_navbar_entry_mobile(navar_mobile, title, id)
}
function create_navbar_entry_mobile(navar_mobile, title, id) {
const navbar_item = document.createElement("li");
navbar_item.className = "navbar-item-mobile";
navar_mobile.appendChild(navbar_item);
const navbar_link = document.createElement("a");
navbar_link.className = "nav-link-mobile";
navbar_link.href = `#${id}`;
navbar_link.textContent = title;
navbar_item.appendChild(navbar_link);
} }
function setCookie(name, value, maxAge) { function setCookie(name, value, maxAge) {
styles/main_style.css
+1
View File
@@ -8,6 +8,7 @@
--serif: Georgia, serif; --serif: Georgia, serif;
--sans: system-ui, sans-serif; --sans: system-ui, sans-serif;
--nav-w: 230px; --nav-w: 230px;
--nav-mobile-w: 100px;
--font-size: 1rem; --font-size: 1rem;
} }
styles/mobile_bar_style.css
+44
View File
@@ -0,0 +1,44 @@
#navbar-mobile {
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: var(--nav-mobile-w);
height: 100vh;
justify-content: flex-start;
align-items: center;
border-right: 1px solid var(--border);
gap: 10px;
background: var(--bg);
}
@media (min-width: 1001px) {
#navbar-mobile {
display: none;
}
}
.navbar-item-mobile {
width: 100%;
height: 80px;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.navbar-item-mobile:hover {
background: var(--surface);
}
.nav-link-mobile {
text-align: center;
font-size: calc(var(--font-size) - 0.2rem);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
styles/projects_style.css
+7
View File
@@ -3,6 +3,13 @@
--margin-main-content: 100px; --margin-main-content: 100px;
} }
@media (max-width: 1000px) {
.main-content {
margin-left: var(--nav-mobile-w);
--margin-main-content: 10px;
}
}
#introduction { #introduction {
padding-top: 100px; padding-top: 100px;
margin-left: var(--margin-main-content); margin-left: var(--margin-main-content);
styles/sidebar_style.css
+6
View File
@@ -14,6 +14,12 @@
--padding: 30px; --padding: 30px;
} }
@media (max-width: 1000px) {
.sidebar {
display: none;
}
}
/* Sidebar Top */ /* Sidebar Top */
#sidebar-top { #sidebar-top {