update list

TODO.md

@@ -16,7 +16,7 @@
    - [ ] Steps
    - [ ] Tabs
  - [ ] Sidebar
-   - [ ] Make configurable
+   - [x] Make configurable
    - [ ] Multi
    - [ ] Closable
    - [ ] Mobile friendly

sidebar.json

@@ -0,0 +1,27 @@
+{
+    "SidebarItems": [
+        {
+            "heading": "Heading"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        }
+    ]
+}

src/components/Sidebar.astro

@@ -0,0 +1,9 @@
+---
+import { SidebarItems } from '../../sidebar.json'
+---
+
+<div class="sidebar">
+    {SidebarItems.map((item) => (
+        item.heading ? <h2>{item.heading}</h2> : <a href={item.link}>{item.text}</a>
+    ))}
+</div>

src/components/global/Header.astro

@@ -13,5 +13,10 @@ import {
         <div class="start">
             <h2><a style="text-decoration: none;" href="/">{SITE_NAME}</a></h2>
         </div>
+        <div class="end">
+            <a href="#">Link</a>
+            <a href="#">Social</a>
+            <a href="#">Status</a>
+        </div>
     </div>
 </header>

src/layouts/Document.astro

@@ -14,7 +14,8 @@ const { Title, Feedback, Feelback } = Astro.props
 // Components
 import Head from '@components/global/Head.astro'
 import Header from '@components/global/Header.astro'
-import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";
+import Sidebar from '@components/Sidebar.astro'
+import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"
 
 // Styles
 import "@styles/index.scss";
@@ -25,23 +26,7 @@ import "@styles/feelback.css";
 <Header/>
 <div class="page">
     <div class="content">
-        <div class="sidebar">
+        <Sidebar/>
-            <h2>Sidebar Header</h2>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <h2>Sidebar Header</h2>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <h2>Sidebar Header</h2>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-            <a href="#">Document Title</a>
-        </div>
         <div class="document">
             <h1>{Title}</h1>
             <slot/>
@@ -78,10 +63,6 @@ import "@styles/feelback.css";
     </div>
 </div>
 
-<!-- Style is temporary here -->
-<style is:global lang="scss">
-</style>
-
 {REVERT_LAYOUT ?
     <style>
         .content {

src/styles/index.scss

@@ -19,12 +19,12 @@ table {
         border: 1px solid #111111;
         padding: 8px;
     }
-    tr:nth-child(even){background-color: #323232;}
+    tr:nth-child(odd){background-color: #333333;}
-    tr:nth-child(even){background-color: #323232;}
+    tr:nth-child(even){background-color: #141414;}
     tr:hover {background-color: #454545;}
     th {
         padding-top: 12px;
-        padding-bottom: 12px;
+        padding-bottom: 12pqx;
         text-align: left;
         background-color: #070707;
         color: white;
@@ -52,6 +52,19 @@ header {
     .header-content {
         max-width: 1200px;
         margin: auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .end {
+            display: flex;
+            gap: 6px;
+            a {
+                text-decoration: none;
+                background: #373737;
+                border-radius: 6px;
+                padding: 8px 16px;
+            }
+        }
     }
 }
 
@@ -76,9 +89,6 @@ header {
             }
         }
         .document {
-            background: #232323;
-            border-radius: 4px;
-            padding: 12px 24px;
             height: max-content;
             img {
                 width: 100%;