Added site button for homepage for navigation

osori-db · Oct 22, 2023 · 7d86c88 · 7d86c88
1 parent f5d60b2
commit 7d86c88
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/_includes/homepage_header.html b/_includes/homepage_header.html
@@ -1,11 +1,6 @@
 <div class="homepage-header-container">
     <div class="homepage-header-brand" role="banner">
         <a href="#"><img src="../assets/images/ic_logo_osori.png" alt="OSORI" class="homepage-header-logo"></a>
-        <button id="home-menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
-            <svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
-                <use xlink:href="#svg-menu"></use>
-            </svg>
-        </button>
     </div>
     <nav class="homepage-header-links" aria-label="Main">
         <a href="{% tl about %}" class="fs-4">{% t title.about %}</a>
@@ -23,7 +18,7 @@
                     {{ site.languageNames.en }}
                     {% endif %}
                 </button>
-                <i id="chevron-icon" class="change-language-btn fa-solid fa-chevron-down pl-3" onclick="showLanguageOptions()"></i>
+                <i class="change-language-btn fa-solid fa-chevron-down pl-3" onclick="showLanguageOptions()"></i>
             </div>
             <div class="homepage-dropdown-content" id="language-dropdown">
                 {% if site.lang == site.languages[0] %}
@@ -42,18 +37,18 @@
         window.onclick = function (e) {
             if (!e.target.matches('.change-language-btn')) {
                 var languageDropdown = document.getElementById("language-dropdown");
-                var chevronIcon = document.getElementById("chevron-icon");
-                console.log(chevronIcon)
-
                 if (languageDropdown.classList.contains('show')) {
                     languageDropdown.classList.remove('show');
-                    chevronIcon.classList.remove('fa-chevron-down');
-                    chevronIcon.classList.add('fa-chevron-up');
-                } else {
-                    chevronIcon.classList.remove('fa-chevron-up');
-                    chevronIcon.classList.add('fa-chevron-down');
                 }
             }
         }
     </script>
+
+    <div class="homepage-mobile-section">
+        <button id="home-menu-button" class="home-site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
+            <svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
+                <use xlink:href="#svg-menu"></use>
+            </svg>
+        </button>
+    </div>
 </div>
diff --git a/_sass/color_schemes/dark_theme.scss b/_sass/color_schemes/dark_theme.scss
@@ -147,4 +147,8 @@ a {
 
 .main-header {
     background-color: $body-background-color !important;
+}
+
+.site-button > .icon {
+    color: #00efff !important;
 }
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -271,6 +271,10 @@ main+hr {
     margin-bottom: -3px;
 }
 
+.home-site-button {
+    display: none;
+}
+
 @media (min-width: 1065px) {
     .side-bar {
         max-width: 23.75rem;
@@ -322,8 +326,8 @@ main+hr {
     padding-left: 0.6rem !important;
 }
 
-#home-menu-button {
-    display: none;
+.breadcrumb-nav {
+    margin-top: 0.625rem;
 }
 
 @media (min-width: 1065px) and (max-width: 75rem) {
@@ -414,6 +418,7 @@ main+hr {
 }
 
 @media (min-width: 66.5rem) and (max-width: 75rem) {
+
     .homepage-header-links,
     .homepage-header-links>a {
         padding-left: 1rem;
@@ -441,9 +446,16 @@ main+hr {
 }
 
 @media (max-width: 1134px) {
-    .homepage-header-links > a {
+    .homepage-header-links {
         display: none;
     }
+
+    .home-site-button {
+        display: flex;
+        height: 100%;
+        padding: $gutter-spacing-sm;
+        align-items: center;
+    }
 }
 
 @media (min-width: 36rem) and (max-width: 50rem) {
@@ -471,4 +483,4 @@ main+hr {
     .open-source-count {
         font-size: 1.875rem !important;
     }
-}
+}