Skip to content

Commit

Permalink
feat(Sidebar): Add collapsible functionality to sidebar + Responsiveness
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
SakuraIsayeki committed Aug 14, 2023
1 parent 8861aa8 commit 8dfb5a6
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 22 deletions.
20 changes: 17 additions & 3 deletions nodsoft_moltenobsidian_web/src/components/Sidebar.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
81 changes: 71 additions & 10 deletions nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -41,6 +66,7 @@ aside {
display: flex;
flex-direction: column;
overflow-y: auto;
flex: 1;

a {
padding: 0.5rem;
Expand Down Expand Up @@ -85,7 +111,6 @@ aside {
footer {
margin-left: 1rem;
margin-right: 1rem;
margin-top: auto;
flex-shrink: 0;

color: white;
Expand All @@ -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");
}
2 changes: 1 addition & 1 deletion nodsoft_moltenobsidian_web/src/layouts/Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 6 additions & 0 deletions nodsoft_moltenobsidian_web/src/styles/_global.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@use "variables" as *;
@use "mixins" as *;

@import "./responsive";

@import url("//fonts.googleapis.com/css2?family=Nunito");

:root {
Expand Down Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions nodsoft_moltenobsidian_web/src/styles/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
15 changes: 15 additions & 0 deletions nodsoft_moltenobsidian_web/src/styles/_responsive.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
20 changes: 12 additions & 8 deletions nodsoft_moltenobsidian_web/src/styles/_variables.scss
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 8dfb5a6

Please sign in to comment.