feat(website): Switch navigation to Sidebar + CSS overhaul

Nodsoft · Aug 13, 2023 · 0df71ab · 0df71ab
1 parent cc8a927
commit 0df71ab
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 128 deletions.
diff --git a/nodsoft_moltenobsidian_web/src/components/NavLink.astro b/nodsoft_moltenobsidian_web/src/components/NavLink.astro
@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import "./NavLink.astro.scss";
 
 type Props = HTMLAttributes<'a'>;
 
@@ -9,16 +10,6 @@ const { pathname } = Astro.url;
 const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 ---
 
-<a href={href} class:list={[className, { active: isActive }]} {...props}>
-	<slot />
-</a>
-<style>
-	a {
-		display: inline-block;
-		text-decoration: none;
-	}
-	a.active {
-		font-weight: bolder;
-		text-decoration: underline;
-	}
-</style>
+<a href={href} class:list={[className, { active: isActive }]} {...props}><slot /></a>
+
+
diff --git a/nodsoft_moltenobsidian_web/src/components/NavLink.astro.scss b/nodsoft_moltenobsidian_web/src/components/NavLink.astro.scss
@@ -0,0 +1,36 @@
+@use "../styles/variables" as *;
+
+aside > nav {
+  font-size: 0.9rem;
+  padding-bottom: 0.2rem;
+
+  a {
+    color: #d7d7d7;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.3s;
+
+    padding: 0.3rem 1rem 0.3rem 1rem;
+
+    &:active {
+      background-color: rgba(255, 255, 255, 0.25);
+      color: white !important;
+    }
+
+    &:hover, &:focus {
+      background-color: rgba(255, 255, 255, 0.21);
+      color: white !important;
+    }
+
+    .vault-folder-title {
+      // set bold font
+      font-weight: 600;
+    }
+
+    .vault-item-title {
+      // set color as primary
+      color: var($accent-light) !important;
+    }
+  }
+}
diff --git a/nodsoft_moltenobsidian_web/src/components/Navbar.astro b/nodsoft_moltenobsidian_web/src/components/Navbar.astro
diff --git a/nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss b/nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss
diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro
@@ -0,0 +1,18 @@
+---
+import "./Sidebar.astro.scss"
+import NavLink from './NavLink.astro';
+import { SITE_TITLE } from '../consts';
+---
+
+<aside>
+	<h2 class="navbar-brand">
+		<a href="/">{SITE_TITLE}</a>
+	</h2>
+
+	<nav>
+			<div class="internal-links">
+				<NavLink href="/">Home</NavLink>
+				<NavLink href="/vault">Vault</NavLink>
+			</div>
+	</nav>
+</aside>
diff --git a/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss b/nodsoft_moltenobsidian_web/src/components/Sidebar.astro.scss
@@ -0,0 +1,60 @@
+@use "../styles/variables" as *;
+
+header {
+  margin: 0;
+  padding: 0 1em;
+}
+
+aside {
+  @media (min-width: 720px) {
+    margin: 0;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    width: 20rem;
+    overflow: auto;
+  }
+
+  @media (max-width: 720px) {
+    display: none;
+  }
+
+  .navbar-brand > a {
+    text-decoration: none;
+    color: white;
+    padding-left: 2rem;
+  }
+
+  nav {
+    display: flex;
+    flex-direction: column;
+
+    a {
+      padding: 0.5rem;
+      //color: var(--black);
+      border-bottom: 4px solid transparent;
+      text-decoration: none;
+
+      border-radius: 8px;
+      color: white;
+      opacity: 0.8;
+
+      &.active {
+        text-decoration: none;
+        //border-bottom-color: var(--accent);
+      }
+    }
+  }
+}
+
+
+.navbar-brand {
+  font-size: 1.5rem;
+}
+
+.internal-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
diff --git a/nodsoft_moltenobsidian_web/src/layouts/Layout.astro b/nodsoft_moltenobsidian_web/src/layouts/Layout.astro
@@ -1,10 +1,9 @@
 ---
 import "../styles/_global.scss"
 import BaseHead from "../components/BaseHead.astro";
-import Header from "../components/Navbar.astro";
+import Sidebar from "../components/Sidebar.astro";
 import { SITE_TITLE } from "../consts";
 
-
 interface Props {
 	title: string;
 	description: string;
@@ -28,7 +27,7 @@ const baseHeadTitle = title ? `${title} - ${SITE_TITLE}` : SITE_TITLE;
 	</head>
 
 	<body>
-		<Header />
+		<Sidebar />
 
 		<main>
 			<slot />

diff --git a/nodsoft_moltenobsidian_web/src/pages/[...path].astro b/nodsoft_moltenobsidian_web/src/pages/[...path].astro
@@ -1,16 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { toRelativeVaultPath } from '../vault-utils';
 import { VaultManifestClient } from 'moltenobsidian-ssg-client/manifest-client';
-import { VaultManifest, VaultFile } from "moltenobsidian-ssg-client/vault-manifest";
+import { VaultManifest, VaultFile } from 'moltenobsidian-ssg-client/vault-manifest';
 import manifest from '../assets/vault/moltenobsidian.manifest.json';
 import fs from 'node:fs/promises';
 
 
 export const manifestClient = VaultManifestClient.fromManifest(manifest as VaultManifest);
 
-export function toRelativeVaultPath(path) {
-    return `../assets/vault/${path}`;
-}
+
 
 export async function getStaticPaths() {
     const paths = [];

diff --git a/nodsoft_moltenobsidian_web/src/styles/_global.scss b/nodsoft_moltenobsidian_web/src/styles/_global.scss
@@ -3,10 +3,43 @@
 
 @import url("//fonts.googleapis.com/css2?family=Nunito");
 
+:root {
+  background: $background radial-gradient(ellipse farthest-corner at 0 140%, $accent 0%, transparent 70%) no-repeat fixed left top;
+  background-size: 20%, 100%;
+}
+
+::-webkit-scrollbar {
+  width: 1rem;
+
+  @mixin scrollbar-common {
+    border-radius: 0.8rem;
+    transition: background-color 0.3s;
+  }
+
+  &-track {
+    @include scrollbar-common;
+    background: rgba(black, 0.2)
+  }
+
+  &-thumb {
+    @include scrollbar-common;
+    background-color: $accent-dark;
+
+    &:hover {
+      background-color: $accent;
+    }
+  }
+}
+
 html, .html {
   font-family: Nunito, system-ui, sans-serif;
-  background: #13151A;
-  background-size: 224px;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  display: flex;
 }
 
 code, .code {
@@ -15,13 +48,13 @@ code, .code {
 }
 
 main, .main {
-  margin: auto;
+  flex: 1;
   padding: 1rem;
-  width: 800px;
   max-width: calc(100% - 2rem);
   color: white;
   font-size: 20px;
   line-height: 1.6;
+  overflow-y: auto;
 }
 
 .astro-a {
@@ -68,32 +101,4 @@ h6 {
   -webkit-text-fill-color: transparent;
   background-size: 400%;
   background-position: 0%;
-}
-
-.instructions {
-  margin-bottom: 2rem;
-  border: 1px solid rgba($accent-light, 0.25);
-  background: linear-gradient(rgba($accent-dark, 0.66), rgba($accent-dark, 0.33));
-  padding: 1.5rem;
-  border-radius: 8px;
-
-  & code {
-    font-size: 0.8em;
-    font-weight: bold;
-    background: rgba($accent-light, 0.12);
-    color: $accent-light;
-    border-radius: 4px;
-    padding: 0.3em 0.4em;
-  }
-
-  & strong {
-    color: $accent-light
-  }
-}
-
-.link-card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-  gap: 2rem;
-  padding: 0;
 }
diff --git a/nodsoft_moltenobsidian_web/src/styles/_variables.scss b/nodsoft_moltenobsidian_web/src/styles/_variables.scss
@@ -1,4 +1,13 @@
 $accent: #883AEB;
 $accent-light: #E0CCFA;
 $accent-dark: #310A65;
-$accent-gradient: linear-gradient(45deg, $accent, $accent-light 30%, white 60%);
+$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);
+}
diff --git a/nodsoft_moltenobsidian_web/src/vault-utils.ts b/nodsoft_moltenobsidian_web/src/vault-utils.ts
@@ -0,0 +1,10 @@
+
+export function toRelativeVaultPath(path: string) {
+  return `../assets/vault/${path}`;
+}
+
+export class VaultNote {
+  constructor(public readonly path: string) {
+
+  }
+}