From 9ef1bfd517859ce94f4d67cc7744904fa6b17a77 Mon Sep 17 00:00:00 2001
From: Garrit Franke <garrit@slashdev.space>
Date: Mon, 11 Apr 2022 17:09:33 +0200
Subject: [PATCH] feat(navbar): responsive actions

---
 Gemfile                      |  2 ++
 Gemfile.lock                 |  4 +++-
 _includes/head.html          |  3 ---
 _includes/header-custom.html | 24 ++++++++++++------------
 _includes/menu.html          |  8 ++++++++
 _sass/layout.scss            | 34 ++++++++++++++++++++++++++--------
 _sass/responsive.scss        | 13 +++++++++++++
 css/main.scss                | 21 +++++++++++----------
 js/main.js                   | 10 +++++++---
 9 files changed, 82 insertions(+), 37 deletions(-)
 create mode 100644 _sass/responsive.scss

diff --git a/Gemfile b/Gemfile
index 2c43034..415e843 100644
--- a/Gemfile
+++ b/Gemfile
@@ -7,3 +7,5 @@ source "https://rubygems.org"
 gem "jekyll", "~> 4.0"
 gem "jekyll-paginate"
 gem "jekyll-feed"
+
+gem "webrick", "~> 1.7"
diff --git a/Gemfile.lock b/Gemfile.lock
index 8d2aa40..48ac909 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/_includes/head.html b/_includes/head.html
index 6edffb6..d433ae7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -43,9 +43,6 @@
 	  display: inline-block;
 	  width: 60px;
 	  height: 34px;
-	  margin-top: 12px;
-	  right: 90px;
-	  float: right;
 	}
 
 	.switch input { 
diff --git a/_includes/header-custom.html b/_includes/header-custom.html
index f387035..18fef9f 100644
--- a/_includes/header-custom.html
+++ b/_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>
 	
-	<!-- Dark Mode Button -->
-	<label class="switch">
-		<input type="checkbox">
-		<span class="slider round"></span>
-	</label>
-	
-	<div>
-        <a href="{{ site.baseurl }}">
-		  <img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
-	    </a>
-    </div>
+	<a href="{{ site.baseurl }}">
+		<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
+	</a>
+
     <div class="revuo-classes">
         <a href="{{ site.baseurl }}" class="wk">Weekly</a>
         <a href="/periodicals/" class="pd">Periodical</a>
diff --git a/_includes/menu.html b/_includes/menu.html
index 6842169..c65c810 100644
--- a/_includes/menu.html
+++ b/_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 -->
diff --git a/_sass/layout.scss b/_sass/layout.scss
index c35419f..e3fdf16 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -45,15 +45,33 @@ html, body {
   @include open(14rem);
 }
 
-/* Separator after menu */
+#nav-list {
 
-#nav-list:after {
-  display: block;
-  content: '';
-  width: 5rem;
-  height: 1px;
-  margin: 23px auto;
-  background-color: $background-color;
+  .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 */
diff --git a/_sass/responsive.scss b/_sass/responsive.scss
new file mode 100644
index 0000000..15b36e3
--- /dev/null
+++ b/_sass/responsive.scss
@@ -0,0 +1,13 @@
+@media (max-width: 700px) {
+  #header {
+    .action-container {
+      display: none !important;
+    }
+  }
+
+  #nav-list {
+    .nav-actions {
+      display: flex;
+    }
+  }
+}
diff --git a/css/main.scss b/css/main.scss
index a6cf214..58d60ab 100644
--- a/css/main.scss
+++ b/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;
-	right: 80px;
-	top: 13px;
-	position: relative;
+#header .action-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  height: 36px;
+  position: absolute;
+  right: 80px;
+  top: 35px;
 }
 
 #header a.rss {
 	display: block;
+  padding-bottom: 0;
 }
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index f2be28d..f673a07 100644
--- a/js/main.js
+++ b/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));