Improve mobile support

src/components/Search.astro

@@ -10,6 +10,19 @@ const { id, className, query, uiOptions = {} } = Astro.props;
 const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 ---
 
+<button class="mobile-s" onclick="MobileCloseSearch()" id="search-close">Close</button>
+
+<script is:inline>
+function MobileOpenSearch() {
+  document.querySelector('.pagefind-ui__form').style.display = 'inherit'
+  document.querySelector('#search-close').style.display = 'inherit'
+}
+function MobileCloseSearch() {
+  document.querySelector('.pagefind-ui__form').style.display = 'none'
+  document.querySelector('#search-close').style.display = 'none'
+}
+</script>
+
 <div
   id={id}
   class:list={[className, "pagefind-init"]}

src/components/Sidebar.astro

@@ -4,12 +4,23 @@ import { SiteSettings, SidebarItems } from '@config'
 ---
 
 <div class="sidebar">
-    {SidebarItems.map((item) => (
+    <div class="desktop-s">
-        item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
+        {SidebarItems.map((item) => (
-    ))}
+            item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
+        ))}    
+    </div>
+
+    <details class="mobile-s">
+        <summary>Menu</summary>
+        {SidebarItems.map((item) => (
+            item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
+        ))}    
+    </details>
 </div>
 
+
 <script is:inline define:vars={{SiteSettings}}>
 var CurrentURLPath = window.location.pathname
-document.querySelector('.sidebar > a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232' 
+document.querySelector('.sidebar a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232' 
+document.querySelector('.sidebar .mobile-s a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232' 
 </script>

src/components/global/Header.astro

@@ -2,6 +2,12 @@
 // Settings
 import { SiteSettings, HeaderItems } from '@config'
 import Search from '@components/Search.astro'
+
+// Icons
+import {
+    Menu,
+    InputSearch
+} from "@iconoir/vue"
 ---
 
 <header>
@@ -14,6 +20,9 @@ import Search from '@components/Search.astro'
             {HeaderItems.map((item) => (
                 <a href={item.link}>{item.text}</a>
             ))}
+            <div class="mobile-s">
+                <button onclick="MobileOpenSearch()"><InputSearch/></button>
+            </div>
         </div>
     </div>
 </header>

src/styles/index.scss

@@ -87,7 +87,7 @@ header {
     position: absolute;
     top: 0px;
     left: 0px;
-    z-index: 1;
+    z-index: 10;
 
     .header-content {
         max-width: 1200px;
@@ -108,6 +108,7 @@ header {
                 border-radius: 6px;
                 padding: 8px 12px;
                 font-size: 14px;
+                // @media screen and (max-width: 775px) {display: none}
 
                 &:focus {
                     outline: none;
@@ -149,20 +150,6 @@ header {
             .pagefind-ui__hidden {
                 display: none !important;
             }
-
-            @media screen and (max-width: 916px) {
-                .pagefind-ui__drawer {
-                    left: 12px;
-                    width: 100%;
-                    max-width: calc(100% - 74px);
-                }
-            }
-
-            @media screen and (max-width: 650px) {
-                .pagefind-ui__drawer {
-                    top: 122px !important;
-                }
-            }
         }
 
         .header-end {
@@ -171,15 +158,69 @@ header {
 
             a {
                 text-decoration: none;
+                @media screen and (max-width: 775px) {display: none}
 
                 &:hover {
                     text-decoration: underline;
                 }
             }
+
+            .mobile-s {
+                display: none;
+                @media screen and (max-width: 775px) {
+                    display: flex;
+                    gap: 6px;
+                }
+                button {
+                    background: transparent;
+                    color: white;
+                    border: 1px white solid;
+                    border-radius: 6px;
+                    padding: 4px 6px 2px 6px;
+                    cursor: pointer;
+                }
+            }
         }
     }
 }
 
+
+@media screen and (max-width: 775px) {
+    .pagefind-ui__form {
+        display: none;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        padding: 24px;
+        width: calc(100% - 48px);
+        background: transparent;
+        height: 100%;
+        backdrop-filter: blur(10px) contrast(0.8) brightness(0.6);
+    }
+    .pagefind-ui__search-input {
+        width: calc(100% - 32px);
+    }
+    .pagefind-ui__drawer {
+        left: 24px !important;
+        max-width: calc(100% - 114px) !important;
+    }
+    .pagefind-ui__drawer {
+        top: 70px !important;
+    }
+}
+#search-close {
+    display: none;
+    z-index: 10;
+    position: fixed;
+    top: 28px;
+    right: 46px;
+    background: #0a0a0a;
+    border-radius: 4px;
+    padding: 4px 12px;
+    border: 1px gray solid;
+    color: #bbb;
+}
+
 .page {
     position: relative;
     min-height: 100vh;
@@ -197,6 +238,29 @@ header {
             flex-direction: column;
             gap: 6px;
 
+            .desktop-s {
+                min-width: 250px;
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+                @media screen and (max-width: 775px) {
+                    display: none;
+                }
+            }
+
+            .mobile-s {
+                display: none;
+                @media screen and (max-width: 775px) {
+                    display: flex;
+                    gap: 6px;
+                    summary {
+                        border-radius: 6px;
+                        border: 1px #2d2d2d solid;
+                        padding: 12px 24px;
+                    }
+                }
+            }
+
             h2 {
                 margin: 12px 0px 12px 12px;
             }
@@ -309,16 +373,6 @@ header {
 }
 
 @media screen and (max-width: 650px) {
-    .header-content {
-        flex-direction: column;
-        padding-bottom: 24px;
-    }
-
-    .page article {
-        padding-top: 114px !important;
-        margin-top: 48px;
-    }
-
     .footer {
         flex-direction: column !important;
         align-items: center;