diff --git a/index.html b/index.html
index 11078e3..8baaa22 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
+
diff --git a/scripts/main_page.js b/scripts/main_page.js
index e5b719d..91170b0 100644
--- a/scripts/main_page.js
+++ b/scripts/main_page.js
@@ -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";
diff --git a/styles/mobile_bar_style.css b/styles/mobile_bar_style.css
index e4f5fbd..78ea9fd 100644
--- a/styles/mobile_bar_style.css
+++ b/styles/mobile_bar_style.css
@@ -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;
}
\ No newline at end of file
diff --git a/styles/projects_style.css b/styles/projects_style.css
index fd2525e..2f2b734 100644
--- a/styles/projects_style.css
+++ b/styles/projects_style.css
@@ -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);