Merge branch 'test'

scripts/main_page.js

@@ -66,6 +66,15 @@ async function loadData() {
     const sidebar_top = document.getElementById("sidebar-top-content");
 
     const navbar_mobile = document.getElementById("navbar-mobile");
+    const button_mobile2 = document.getElementById("button-mobile");
+
+    document.addEventListener("click", (e) => {
+        if (!e.target.closest("#navbar-mobile") && !e.target.closest("#button-mobile") && !navbar_mobile.classList.contains("inactive")) {
+            navbar_mobile.classList.add("inactive");
+            button_mobile2.classList.remove("inactive");
+        }
+    });
+
     const navbar_mobile_links = document.getElementById("navbar-mobile-links");
     const button_navbar_mobile = document.createElement("button");
     const button_mobile = document.getElementById("button-mobile");

styles/main_style.css

@@ -8,7 +8,7 @@
     --serif: Georgia, serif;
     --sans: system-ui, sans-serif;
     --nav-w: 230px;
-    --nav-mobile-w: 100px;
+    --nav-mobile-w: 200px;
     --font-size: 1rem;
 }
 

styles/mobile_bar_style.css

@@ -11,10 +11,14 @@
     border-right: 1px solid var(--border);
     gap: 10px;
     background: var(--bg);
+    transition: left 0.3s;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 #navbar-mobile.inactive {
-    display: none;
+    left: calc(var(--nav-mobile-w) * (-1))
 }
 
 @media (min-width: 1001px) {

styles/projects_style.css

@@ -7,7 +7,7 @@
 @media (max-width: 1000px) {
     .main-content {
         margin-left: 0;
-        --margin-main-content: 10px;
+        --margin-main-content: 20px;
         --margin-top: 30px;
     }
 }

styles/sidebar_style.css

@@ -75,6 +75,9 @@
     position: relative;
     font-weight: normal;
     margin: 5px 0px 5px 0px;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .nav-link {
@@ -200,6 +203,9 @@ input:checked+.slider:before {
     align-items: center;
     border: none;
     background: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .lang-dropdown.show-border {