feat: moved theme toggle next to search bar

Author: vinayak19th

.devcontainer/devcontainer.json

@@ -26,4 +26,4 @@
       ]
     }
   }
-}
+}

_includes/sidebar.html

@@ -41,16 +41,6 @@
   </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
-    {% unless site.theme_mode %}
-      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
-        <i class="fas fa-adjust"></i>
-      </button>
-
-      {% if site.data.contact.size > 0 %}
-        <span class="icon-border"></span>
-      {% endif %}
-    {% endunless %}
-
     {% for entry in site.data.contact %}
       {% case entry.type %}
         {% when 'github', 'twitter' %}

_includes/topbar.html

@@ -54,24 +54,55 @@
         {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
+    {% comment %} Container for buttons {% endcomment %}
+    <div class="d-flex">
+      {% unless site.theme_mode %}
+        <button
+          type="button"
+          class="btn btn-link nav-link"
+          aria-label="Switch Mode"
+          id="mode-toggle"
+          onClick="iconSwap()"
+        >
+          {% comment %} <i class="fas fa-adjust"></i> {% endcomment %}
+          <i class="bi bi-brightness-high-fill"></i>
+        </button>
+      {% endunless %}
+      <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
+        <i class="fas fa-search fa-fw"></i>
+      </button>
 
-    <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
-      <i class="fas fa-search fa-fw"></i>
-    </button>
-
-    <search id="search" class="align-items-center ms-3 ms-lg-0">
-      <i class="fas fa-search fa-fw"></i>
-      <input
-        class="form-control"
-        id="search-input"
-        type="search"
-        aria-label="search"
-        autocomplete="off"
-        placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
-      >
-    </search>
-    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
-      {{- site.data.locales[include.lang].search.cancel -}}
-    </button>
+      <search id="search" class="align-items-center">
+        <i class="fas fa-search fa-fw"></i>
+        <input
+          class="form-control"
+          id="search-input"
+          type="search"
+          aria-label="search"
+          autocomplete="off"
+          placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
+        >
+      </search>
+      <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+        {{- site.data.locales[include.lang].search.cancel -}}
+      </button>
+      {% comment %} Theme button {% endcomment %}
+    </div>
   </div>
 </header>
+
+<script>
+  $toggle = document.getElementById('mode-toggle');
+  if (Theme.visualState == 'dark') {
+    $toggle.innerHTML = '<i class="bi bi-brightness-high-fill"></i>';
+  } else if (Theme.visualState == 'light') {
+    $toggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
+  }
+  function iconSwap() {
+    if (Theme.visualState == 'dark') {
+      $toggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
+    } else if (Theme.visualState == 'light') {
+      $toggle.innerHTML = '<i class="bi bi-brightness-high-fill"></i>';
+    }
+  }
+</script>

_javascript/modules/components/mode-toggle.js

@@ -2,9 +2,9 @@
  * Add listener for theme mode toggle
  */
 
-const $toggle = document.getElementById('mode-toggle');
-
 export function modeWatcher() {
+  const $toggle = document.getElementById('mode-toggle');
+  console.log('Mode watcher initialized');
   if (!$toggle) {
     return;
   }

_sass/base/_base.scss

@@ -4,6 +4,7 @@
 @use '../abstracts/placeholders';
 @use '../themes/light';
 @use '../themes/dark';
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
 
 :root {
   font-size: 16px;

_sass/layout/_sidebar.scss

@@ -225,11 +225,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       line-height: $btn-size;
     }
 
-    #mode-toggle {
-      @extend %button;
-      @extend %sidebar-links;
-      @extend %sidebar-link-hover;
-    }
+
 
     .icon-border {
       @extend %no-cursor;

_sass/layout/_topbar.scss

@@ -14,6 +14,10 @@
   }
 }
 
+#mode-toggle {
+      margin-right: 1.5rem;
+    }
+
 #topbar {
   @extend %btn-color;