From 64e05d875f2268e32e9968b4aaf929b115c041d7 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Thu, 22 Aug 2024 03:42:29 -0400
Subject: [PATCH] Add Sidebar

---
 src/Sidebar.astro | 148 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 src/Sidebar.astro

diff --git a/src/Sidebar.astro b/src/Sidebar.astro
new file mode 100644
index 0000000..d710b48
--- /dev/null
+++ b/src/Sidebar.astro
@@ -0,0 +1,148 @@
+---
+// Properties
+const { ShowHeader, LogoPath, ShowVersion, FooterLinks, Size } = Astro.props;
+
+// Components
+import { Image } from "astro:assets";
+---
+
+<div class="fl-sidebar">
+    <div class="fl-sidebar-top">
+        {
+            ShowHeader ? (
+                <div class="fl-sidebar-header">
+                    <Image
+                        src={LogoPath}
+                        alt="Logo"
+                        inferSize={true}
+                        format="webp"
+                    />
+                    <div>
+                        <slot name="header-items" />
+                    </div>
+                </div>
+            ) : null
+        }
+        <div class="fl-sidebar-items">
+            <slot name="top-items" />
+        </div>
+    </div>
+    <div class="fl-sidebar-bottom">
+        <div class="fl-sidebar-items">
+            <slot name="bottom-items" />
+        </div>
+        <div class="fl-sidebar-footer">
+            {ShowVersion ? <p id="fl-your-version">v2025.05.16</p> : null}
+            {
+                FooterLinks ? (
+                    <div>
+                        <slot name="footer-items" />
+                    </div>
+                ) : null
+            }
+        </div>
+    </div>
+</div>
+
+<style lang="scss" is:global>
+    .fl-sidebar {
+        background: #121212;
+        color: white;
+        max-width: 240px;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0px 12px;
+        .fl-sidebar-items {
+            display: grid;
+            gap: 6px;
+            h2 {
+                font-size: 16px;
+                color: gray;
+                font-weight: normal;
+                padding-left: 12px;
+                pointer-events: none;
+            }
+            hr {
+                width: calc(100% - 24px);
+                border: none;
+                background: #363636;
+                height: 3px;
+                border-radius: 1rem;
+                margin: 6px 0px;
+            }
+            a {
+                color: white;
+                text-decoration: none;
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                border-radius: 6px;
+                padding: 6px 12px;
+                cursor: pointer;
+                font-size: 14px;
+                border: 1px transparent solid;
+                &:hover {
+                    background: #3c3c3c;
+                    border: 1px #5c5c5c solid;
+                }
+            }
+        }
+        .fl-sidebar-top {
+            .fl-sidebar-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0px 12px;
+                img {
+                    width: 64px;
+                    height: 64px;
+                    pointer-events: none;
+                }
+                a {
+                    color: white;
+                    text-decoration: none;
+                    border-radius: 6px;
+                    cursor: pointer;
+                    border: 1px transparent solid;
+                    padding: 8px;
+                    svg {
+                        transform: translate(0px, 6px);
+                    }
+                    &:hover {
+                        background: #3c3c3c;
+                        border: 1px #5c5c5c solid;
+                    }
+                }
+            }
+        }
+        .fl-sidebar-footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 24px 12px;
+            * {margin: 0px}
+            a {
+                color: white;
+                text-decoration: none;
+                border-radius: 6px;
+                cursor: pointer;
+                border: 1px transparent solid;
+                padding: 8px 6px;
+                aspect-ratio: 1;
+                svg {
+                    transform: translate(0px, 6px);
+                }
+                &:hover {
+                    background: #3c3c3c;
+                    border: 1px #5c5c5c solid;
+                }
+            }
+        }
+    }
+</style>