From f7e6c347227bd092fd56d4f3e790ee73706ff0a7 Mon Sep 17 00:00:00 2001
From: partisan <none@noone.no>
Date: Tue, 29 Oct 2024 23:01:48 +0100
Subject: [PATCH] enhanced the look and feel of the side menu on the landing
 page and adjusted elements for smaller devices

---
 static/css/style-search.css | 61 ++++++++++++++++++++++++++++++++-----
 static/css/style.css        |  2 +-
 templates/search.html       |  8 ++---
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/static/css/style-search.css b/static/css/style-search.css
index ad3df4f..c66cab6 100644
--- a/static/css/style-search.css
+++ b/static/css/style-search.css
@@ -101,6 +101,7 @@ body.menu-open {
     border: 1px solid var(--search-bg-input-border);
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
 }
 
 .wrapper input {
@@ -112,6 +113,8 @@ body.menu-open {
     background: none;
     border: none;
     outline: none;
+    box-sizing: border-box;
+    height: 100%;
 }
 
 .wrapper input::placeholder {
@@ -241,18 +244,19 @@ body.menu-open {
 /* Menu Button */
 .settings-icon-link-search {
     position: fixed;
-    top: 20px;
+    top: 25px;
     right: 20px;
-    background: none;
+    font-size: 25px;
+    background-color: inherit;
     border: none;
     color: var(--fg);
     cursor: pointer;
-    font-size: 36px;
-    z-index: 999;
+    z-index: 99;
 }
 
 .settings-icon-link-search:hover {
-    color: var(--highlight);
+    color: var(--blue);
+    transition: color 0.3s ease;
 }
 
 /* Style for Close Button in Menu */
@@ -265,6 +269,10 @@ body.menu-open {
     position: absolute;
     top: 20px;
     right: 20px;
+    z-index: 999;
+    width: 50px;
+    height: 50px;
+    font-size: 36px; /* Not working */
 }
 
 .side-nav .closebtn:hover {
@@ -281,9 +289,17 @@ body.menu-open {
     right: 0;
     background-color: var(--html-bg);
     overflow-x: hidden;
-    transition: 0.5s;
+    transition: width 0.4s ease-in-out; /* Does this even change anything? cant really tell */
     z-index: 1000;
     box-shadow: -2px 0 5px rgba(0,0,0,0.5);
+    padding-top: 70px;
+    overflow-x: hidden; /* Prevents horizontal overflow */
+}
+
+.side-nav:hover .closebtn:hover {
+    color: var(--blue);
+    transition: color 0.3s ease;
+    background: none;
 }
 
 /* Menu Content */
@@ -308,6 +324,7 @@ body.menu-open {
     background-color: var(--search-select);
     color: var(--blue);
     cursor: pointer;
+    text-decoration: none;
 }
 
 /* Style for buttons in the menu */
@@ -340,6 +357,12 @@ body.menu-open::before {
 }
 
 /* Responsive Design */
+@media only screen and (max-width: 650px) {
+    .wrapper {
+        max-width: 95%;
+    }
+}
+
 @media only screen and (max-width: 450px) {
     .wrapper {
         width: 90%;
@@ -349,8 +372,20 @@ body.menu-open::before {
         max-width: 90%;
         min-width: 25%;
     }
+    .side-nav {
+        max-width: 90%;
+    }
 }
 
+@media only screen and (max-height: 300px) {
+    .logo-container svg {
+        width: 25%;
+        max-width: 90%;
+        min-width: 25%;
+    }
+}
+
+
 /* Additional Global Styles */
 a {
     text-decoration: none;
@@ -377,6 +412,18 @@ input, button {
     outline: none;
 }
 
+body.menu-open {
+    overflow: hidden;
+}
+
+/* Prevent horizontal scrolling on the page */
+html, body {
+    overflow-x: hidden;  /* Disables horizontal scrollbar */
+    margin: 0;
+    padding: 0;
+    max-width: 100vw;  /* Limits content to viewport width */
+}
+
 /* 
  Remove default focus outline and add custom focus style 
 .wrapper input[type="text"]:focus {
@@ -384,5 +431,3 @@ input, button {
     border: 1px solid var(--blue);
     box-shadow: none;
 } */
-
-
diff --git a/static/css/style.css b/static/css/style.css
index 7115352..9fe92a3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -81,7 +81,7 @@
     border: none;
     color: var(--fg);
     position: absolute;
-    top: 7px;
+    top: 9px;
     right: 10px;
     cursor: pointer;
 }
diff --git a/templates/search.html b/templates/search.html
index 08c9db7..b9c02f7 100755
--- a/templates/search.html
+++ b/templates/search.html
@@ -20,12 +20,13 @@
     <!-- Menu Button -->
     <button class="material-icons-round settings-icon-link-search" onclick="openNav()">menu</button>
 
+
     <!-- Side Navigation Menu -->
     <div id="mySidenav" class="side-nav">
-        <button class="closebtn material-icons-round" onclick="closeNav()">close</button>
+        <button class="material-icons-round closebtn" onclick="closeNav()">close</button>
         <a href="/settings">{{ translate "all_settings" }}</a>
-        <button onclick="setTheme('dark')">{{ translate "dark_theme" }}</button>
-        <button onclick="setTheme('light')">{{ translate "light_theme" }}</button>
+        <button onclick="setTheme('dark')">{{ translate "theme_dark" }}</button>
+        <button onclick="setTheme('light')">{{ translate "theme_light" }}</button>
         <select class="lang" name="site_lang" id="siteLanguageSelect" onchange="updateLanguage(this.value)">
             {{range .LanguageOptions}}
             <option value="{{.Code}}" {{if eq .Code $.CurrentLang}}selected{{end}}>{{.Name}}</option>
@@ -170,7 +171,6 @@
                     <button id="sub-search-wrapper-ico-file" class="material-icons-round clickable" name="t" value="file">share</button>
                     <p>{{ translate "torrents" }}</p>
                 </div>
-                
             </div>
         </div>
     </form>