feat: create side navigation component (#102)

Author: Valerioageno

package.json

@@ -21,7 +21,7 @@
     "react": "19.0.0",
     "react-aria-components": "1.8.0",
     "react-dom": "19.0.0",
-    "remark-gfm": "4.0.0",
+    "remark-gfm": "4.0.1",
     "tuono": "0.19.6"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -2,6 +2,7 @@
 
 .container {
   padding-inline: 20px;
+  height: fit-content;
 
   @include up-to-xs {
     padding-inline: 8px;

src/components/App/App.module.scss

@@ -1,7 +1,7 @@
 import type { JSX } from 'react'
 import type { TuonoLayoutProps } from 'tuono'
 
-import { ThemeSwitch } from '@/components/ThemeSwitch'
+import { Navbar } from '@/components/Navbar'
 
 import MdxProvider from '@/components/MdxProvider'
 
@@ -10,7 +10,7 @@ import styles from './App.module.scss'
 export default function App({ children }: TuonoLayoutProps): JSX.Element {
   return (
     <div className={styles.container}>
-      <ThemeSwitch />
+      <Navbar />
       <MdxProvider>{children}</MdxProvider>
     </div>
   )

src/components/App/App.tsx

@@ -5,9 +5,7 @@ interface MdxProviderProps {
   children: ReactNode
 }
 
-export default function MdxProvider({
-  children,
-}: MdxProviderProps): JSX.Element {
+export function MdxProvider({ children }: MdxProviderProps): JSX.Element {
   return (
     <MDXProvider
       components={{

src/components/MdxProvider/MdxProvider.tsx

@@ -1,3 +1,3 @@
-import MdxProvider from './MdxProvider'
+import { MdxProvider } from './MdxProvider'
 
 export default MdxProvider

src/components/MdxProvider/index.ts

@@ -0,0 +1,34 @@
+@use '@/styles/variables' as *;
+
+.navbar {
+  width: 100%;
+  position: fixed;
+  height: $navbar-height;
+  backdrop-filter: blur(15px);
+  left: 0;
+  top: 0;
+  z-index: 10;
+
+  .background {
+    background-color: var(--background-primary);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+    z-index: 2;
+  }
+
+  .content {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    margin-top: -$navbar-height;
+  }
+}
+
+.navbar-spacing {
+  position: relative;
+  width: 100%;
+  height: $navbar-height;
+}

src/components/Navbar/Navbar.module.scss

@@ -0,0 +1,19 @@
+import type { JSX } from 'react'
+
+import { ThemeSwitch } from '@/components/ThemeSwitch'
+
+import styles from './Navbar.module.scss'
+
+export function Navbar(): JSX.Element {
+  return (
+    <>
+      <nav className={styles.navbar}>
+        <div className={styles.background} />
+        <div className={styles.content}>
+          <ThemeSwitch />
+        </div>
+      </nav>
+      <div className={styles['navbar-spacing']} />
+    </>
+  )
+}

src/components/Navbar/Navbar.tsx

@@ -0,0 +1 @@
+export { Navbar } from './Navbar'

src/components/Navbar/index.ts

@@ -1,23 +1,34 @@
 @use '@/styles/media-queries' as *;
+@use '@/styles/variables' as *;
 
 .layout {
   display: flex;
   width: 100%;
   justify-content: space-between;
-  height: 100vh;
+  height: fit-content;
   max-width: 1180px;
+  position: relative;
   margin: 0 auto;
   gap: 20px;
+  bottom: 100px;
 
   @include up-to-xl {
     justify-content: left;
   }
+
+  .body {
+    position: relative;
+    top: 0;
+    margin-top: calc($navbar-height * 2);
+  }
 }
 
 @mixin sidecontent {
+  position: sticky;
   min-width: 220px;
-  background-color: lightgray;
   height: 100%;
+  min-height: 200px;
+  top: calc($navbar-height + 16px);
 
   @include up-to-xs {
     display: none;
@@ -31,6 +42,10 @@
 .tableOfContents {
   @include sidecontent;
 
+  & {
+    background-color: lightgray;
+  }
+
   @include up-to-xl {
     display: none;
   }