Merge pull request #14 from garritfra/responsive-navbar

Navbar: responsive actions

Gemfile

@@ -7,3 +7,5 @@ source "https://rubygems.org"
 gem "jekyll", "~> 4.0"
 gem "jekyll-paginate"
 gem "jekyll-feed"
+
+gem "webrick", "~> 1.7"

Gemfile.lock

@@ -59,6 +59,7 @@ GEM
     terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     unicode-display_width (1.8.0)
+    webrick (1.7.0)
 
 PLATFORMS
   ruby
@@ -67,6 +68,7 @@ DEPENDENCIES
   jekyll (~> 4.0)
   jekyll-feed
   jekyll-paginate
+  webrick (~> 1.7)
 
 BUNDLED WITH
-   2.1.2
+   2.3.11

_includes/head.html

@@ -43,9 +43,6 @@
 	  display: inline-block;
 	  width: 60px;
 	  height: 34px;
-	  margin-top: 12px;
-	  right: 90px;
-	  float: right;
 	}
 
 	.switch input { 

_includes/header-custom.html

@@ -1,17 +1,17 @@
 <header id="header">
-	<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
-	
+	<div class="action-container">
 		<!-- Dark Mode Button -->
 		<label class="switch">
 			<input type="checkbox">
 			<span class="slider round"></span>
 		</label>
+		<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
+	</div>
 	
-	<div>
 	<a href="{{ site.baseurl }}">
 		<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
 	</a>
-    </div>
+
     <div class="revuo-classes">
         <a href="{{ site.baseurl }}" class="wk">Weekly</a>
         <a href="/periodicals/" class="pd">Periodical</a>

_includes/menu.html

@@ -1,5 +1,13 @@
 <nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
 	<div id="nav-list">
+		<div class="nav-actions">
+			<!-- Dark Mode Button -->
+			<label class="switch">
+				<input type="checkbox">
+				<span class="slider round"></span>
+			</label>
+			<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
+		</div>
 		<a href="{{ site.baseurl }}">Revuo Weekly</a>
 
 		<!-- Nav pages -->

_sass/layout.scss

@@ -45,15 +45,33 @@ html, body {
   @include open(14rem);
 }
 
-/* Separator after menu */
+#nav-list {
 
-#nav-list:after {
+  .nav-actions {
+    /* Will turn to flex on mobile */
+    display: none;
+    gap: 12px;
+    justify-content: center;
+    
+    .rss {
+      padding: 0;
+
+      .rss-icon {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  
+  /* Separator after menu */
+  &:after {
     display: block;
     content: '';
     width: 5rem;
     height: 1px;
     margin: 23px auto;
     background-color: $background-color;
+  }
 }
 
 /* Icon menu */

_sass/responsive.scss

@@ -0,0 +1,13 @@
+@media (max-width: 700px) {
+  #header {
+    .action-container {
+      display: none !important;
+    }
+  }
+
+  #nav-list {
+    .nav-actions {
+      display: flex;
+    }
+  }
+}

css/main.scss

@@ -3,7 +3,7 @@
 ---
 
 //Import
-@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss";
+@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss", "responsive.scss";
 
 
 
@@ -108,17 +108,18 @@ time.by-line {
 	background-color: var(--menu-color);
 }
 
-#header img.logo {
-	margin-left: 122px;
-}
-
-#header img.rss-icon {
-	float: right;
+#header .action-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  height: 36px;
+  position: absolute;
   right: 80px;
-	top: 13px;
-	position: relative;
+  top: 35px;
 }
 
 #header a.rss {
 	display: block;
+  padding-bottom: 0;
 }

js/main.js

@@ -4,14 +4,16 @@ var reverse = document.getElementById("nav-menu-left");
 var icon = normal !== null ? normal : reverse;
 
 
-const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');
+const toggleSwitches = document.querySelectorAll('.switch input[type="checkbox"]');
 const currentTheme = localStorage.getItem('theme');
 
 if (currentTheme) {
 	document.documentElement.setAttribute('data-theme', currentTheme);
  
 	if (currentTheme === 'dark') {
-		toggleSwitch.checked = true;
+		toggleSwitches.forEach(s => s.checked = true);
+	} else {
+		toggleSwitches.forEach(s => s.checked = false);
 	}
 }
 
@@ -19,13 +21,15 @@ function switchTheme(e) {
 	if (e.target.checked) {
 		document.documentElement.setAttribute('data-theme', 'dark');
 		localStorage.setItem('theme', 'dark');
+		toggleSwitches.forEach(s => s.checked = true);
 	} else {
 		document.documentElement.setAttribute('data-theme', 'light');
 		localStorage.setItem('theme', 'light');
+		toggleSwitches.forEach(s => s.checked = false);
 	}
 }
 
-toggleSwitch.addEventListener('change', switchTheme, false);
+toggleSwitches.forEach((s) => s.addEventListener('change', switchTheme, false));