feat(Sidebar): Add collapsible functionality to sidebar + Responsiveness

This commit adds the ability to collapse and expand the sidebar in the Sidebar component. The "toggleSidebar" function is implemented to toggle the "collapsed" class on the aside element when the sidebar toggler button is clicked. Additionally, a click event listener is registered for the sidebar toggler button. The Sidebar component's styling is also updated to include a new class "collapsed" that adjusts its height and hides certain elements when collapsed. The styling for the sidebar toggler button and its icon is added as well. A new responsive mixin file "_responsive.scss" is introduced, which defines flex-direction changes based on different breakpoints. This allows for a responsive layout where the Sidebar component switches between column and row direction depending on screen size. The global styles file "_global.scss" imports "_responsive.scss", ensuring that responsive styles are applied throughout the application. The variables file "_variables.scss" now includes a map of responsive breakpoints, defining values for different screen sizes.
Nodsoft · Aug 14, 2023 · 8dfb5a6 · 8dfb5a6
1 parent 8861aa8
commit 8dfb5a6
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 22 deletions.
diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro
@@ -13,10 +13,14 @@ export const manifestClient = VaultManifestClient.fromManifest(manifest as Vault
 
 ---
 
-<aside>
+<aside class="collapsed">
 	<h2 class="navbar-brand">
 		<img src="/android-chrome-192x192.png" alt="MoltenObsidian Logo" />
-		<a href="/">{SITE_TITLE}</a>
+		<a style="flex-grow: 1;" href="/">{SITE_TITLE}</a>
+		<button class="sidebar-toggler" onclick="toggleSidebar">
+			<span class="sidebar-toggler-icon"></span>
+		</button>
+
 	</h2>
 
 	<nav>
@@ -47,4 +51,14 @@ export const manifestClient = VaultManifestClient.fromManifest(manifest as Vault
 			© 2022-2023 Nodsoft Systems, MIT License
 		</small>
 	</footer>
-</aside>
+</aside>
+
+<script>
+	// Sidebar toggler
+	function toggleSidebar() {
+		document.querySelector('aside').classList.toggle('collapsed');
+	}
+
+	// register button click handler
+	document.querySelector('.sidebar-toggler').addEventListener('click', toggleSidebar);
+</script>
diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
@@ -1,25 +1,50 @@
 @use "../styles/variables" as *;
+@use "../styles/mixins" as *;
 
 header {
   margin: 0;
   padding: 0 1em;
 }
 
 aside {
-  @media (min-width: 720px) {
-    margin: 0;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 1rem;
+  overflow: auto;
+
+  @media (min-width: map-get($breakpoints, 'lg')) {
     position: sticky;
     width: 20rem;
-    overflow: auto;
   }
 
-  @media (max-width: 720px) {
-    display: none;
+  @media (max-width: map-get($breakpoints, 'lg')) {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    z-index: 100;
+    @include bg-acrylic($background);
+    transition: visibility 0s, opacity 0.5s linear;
+    visibility: visible;
+
+    &.collapsed {
+      height: initial;
+
+      .navbar-brand {
+        margin-bottom: 0;
+      }
+
+      nav, footer {
+        display: none;
+        visibility: hidden;
+      }
+    }
   }
-
+
+  :first-child {
+    margin-top: 0;
+  }
+
   .navbar-brand {
     display: flex;
     flex-direction: row;
@@ -41,6 +66,7 @@ aside {
     display: flex;
     flex-direction: column;
     overflow-y: auto;
+    flex: 1;
 
     a {
       padding: 0.5rem;
@@ -85,7 +111,6 @@ aside {
 footer {
   margin-left: 1rem;
   margin-right: 1rem;
-  margin-top: auto;
   flex-shrink: 0;
 
   color: white;
@@ -106,4 +131,40 @@ footer {
       padding: 0;
     }
   }
+}
+
+.sidebar-toggler {
+  @media (min-width: map-get($breakpoints, 'lg')) {
+    display: none;
+  }
+
+  color: rgba(white, .6);
+  padding: 0.25rem 0.75rem;
+  margin-right: 2.5rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid;
+  border-color: rgba(white, .1);
+  border-radius: 0.25rem;
+  transition: box-shadow .2s ease-in-out;
+
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+        color: white;
+        background-color: rgba(white, .1);
+    }
+}
+
+.sidebar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
diff --git a/nodsoft_moltenobsidian_web/src/layouts/Layout.astro b/nodsoft_moltenobsidian_web/src/layouts/Layout.astro
@@ -26,7 +26,7 @@ const baseHeadTitle = title ? `${title} - ${SITE_TITLE}` : SITE_TITLE;
 		<meta name="generator" content={Astro.generator} />
 	</head>
 
-	<body>
+	<body class="flex-row-lg">
 		<Sidebar />
 
 		<main>

diff --git a/nodsoft_moltenobsidian_web/src/styles/_global.scss b/nodsoft_moltenobsidian_web/src/styles/_global.scss
@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "mixins" as *;
 
+@import "./responsive";
+
 @import url("//fonts.googleapis.com/css2?family=Nunito");
 
 :root {
@@ -106,6 +108,10 @@ h6 {
   background-position: 0;
 }
 
+.bg-dark-acrylic {
+  @include bg-acrylic($background);
+}
+
 .badge {
   padding: 0.2rem 0.5rem 0.2rem 0.5rem;
   border-radius: 4px;

diff --git a/nodsoft_moltenobsidian_web/src/styles/_mixins.scss b/nodsoft_moltenobsidian_web/src/styles/_mixins.scss
@@ -4,3 +4,10 @@
   line-height: $line-height;
   margin-bottom: $margin-bottom;
 }
+
+@mixin bg-acrylic($background) {
+  background-color: rgba($background, .6);
+
+  -webkit-backdrop-filter: blur(50px);
+  backdrop-filter: blur(50px);
+}
diff --git a/nodsoft_moltenobsidian_web/src/styles/_responsive.scss b/nodsoft_moltenobsidian_web/src/styles/_responsive.scss
@@ -0,0 +1,15 @@
+@use "variables" as *;
+
+@each $breakpoint, $value in $breakpoints {
+  .flex-row-#{$breakpoint} {
+    @media (max-width: $value) {
+      display: flex;
+      flex-direction: column;
+    }
+
+    @media (min-width: $value) {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+}
diff --git a/nodsoft_moltenobsidian_web/src/styles/_variables.scss b/nodsoft_moltenobsidian_web/src/styles/_variables.scss
@@ -1,13 +1,17 @@
+// Responsive breakpoints
+$breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px
+);
+
+
 $accent: #883AEB;
 $accent-light: #E0CCFA;
 $accent-dark: #310A65;
 $accent-gradient: linear-gradient(45deg, $accent, $accent-light 30%, white 60%);
 
-$background: #13151A;
-
-.bg-dark-acrylic {
-  background-color: rgba($background, .6);
-
-  -webkit-backdrop-filter: blur(50px);
-  backdrop-filter: blur(50px);
-}
+$background: #13151A;