From 750daa74e61a644d937ce9f7584d07354434ef26 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Tue, 24 Dec 2024 05:12:45 -0500
Subject: [PATCH] Add Header componet, optimize mobile support

---
 index.ts         |   3 +-
 package.json     |   2 +-
 src/Header.astro | 172 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 175 insertions(+), 2 deletions(-)
 create mode 100644 src/Header.astro

diff --git a/index.ts b/index.ts
index f002f21..e4aed42 100644
--- a/index.ts
+++ b/index.ts
@@ -5,7 +5,8 @@ import Hero from "./src/blocks/Hero.astro"
 // Components
 import Banner from "./src/Banner.astro"
 import BlogPost from "./src/BlogPost.astro";
+import Header from "./src/Header.astro";
 import Image from "./src/Image.astro";
 
 // Export
-export {Banner, BlogPost, CallToAction, Image, Hero}
\ No newline at end of file
+export {Banner, BlogPost, CallToAction, Image, Header, Hero}
\ No newline at end of file
diff --git a/package.json b/package.json
index da2cf64..e76c8c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sudovanilla/pandora",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "author": "SudoVanilla",
   "displayName": "Pandora",
   "description": "Astro component library built for SudoVanilla related websites and projects.",
diff --git a/src/Header.astro b/src/Header.astro
new file mode 100644
index 0000000..b012ac3
--- /dev/null
+++ b/src/Header.astro
@@ -0,0 +1,172 @@
+---
+// Properties
+const {
+    Title,
+    Logo,
+    MobilePosition = "Top"
+} = Astro.props
+
+// Components
+import Image from './Image.astro'
+---
+
+<header class="pd-header pd-desktop-view">
+    <div class="pd-header-start">
+        {Logo ? 
+            <Image class:list={'pd-header-logo'} Source={Logo}/>
+            :
+            null
+        }
+        {Title ? 
+            <a style="text-decoration: none;" href="/" class="pd-header-title"><strong>{Title}</strong></a>
+            :
+            null
+        }
+        <slot name="header-start"></slot>
+    </div>
+    <div class="pd-header-center">
+        <slot name="header-center"></slot>
+    </div>
+    <div class="pd-header-end">
+        <slot name="header-end"></slot>
+    </div>
+</header>
+
+<header class="pd-header pd-mobile-view">
+    <div class="pd-header-start">
+        {Logo ? 
+            <Image class:list={'pd-header-logo'} Source={Logo}/>
+            :
+            null
+        }
+        {Title ? 
+            <a style="text-decoration: none;" href="/" class="pd-header-title"><strong>{Title}</strong></a>
+            :
+            null
+        }
+        <slot name="header-start"></slot>
+    </div>
+    <div class="pd-header-end">
+        <details>
+            <summary>Menu</summary>
+                <div class="pd-header-mobile-dropdown">
+                    <slot name="header-center"></slot>
+                    <hr/>
+                    <slot name="header-end"></slot>
+                </div>
+        </details>
+    </div>
+</header>
+
+{ 
+    ()=> {
+      if (MobilePosition === "Top") {
+        return <style>
+                .pd-header.pd-mobile-view {
+                    position: sticky;
+                    top: 12px;
+                    margin-bottom: 26px;
+                    .pd-header-end {
+                        details[open=""] {
+                            top: -2px;
+                        }
+                    }
+                }
+            </style>
+      } else if (MobilePosition === "Bottom") {
+        return <style>
+                .pd-header.pd-mobile-view {
+                    position: fixed;
+                    bottom: 24px;
+                    top: inherit;
+                    width: calc(100% - 100px);
+                    .pd-header-end {
+                        details[open=""] {
+                            bottom: -2px;
+                        }
+                    }
+                }
+            </style>
+      }
+    }
+}
+
+<style lang="scss" is:global>
+// Media Adaption
+@media screen and (max-width: 800px) {.pd-desktop-view {display: none !important}}
+@media screen and (min-width: 800px) {.pd-mobile-view {display: none !important}}
+
+// Mobile View
+.pd-header.pd-mobile-view {
+    border: 2px #373737 solid;
+    border-radius: 12px;
+    padding: 16px 24px;
+    font-size: 24px;
+    z-index: 24;
+    backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
+    .pd-header-end {
+        details {
+            &[open=""] {
+                position: absolute;
+                left: -2px;
+                width: calc(100% - 32px);
+                display: grid;
+                backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
+                border: 2px #373737 solid;
+                border-radius: 12px;
+                gap: 6px;
+                padding: 16px;
+                summary {
+                    margin-bottom: 12px;
+                }
+            }
+            hr {
+                border: none;
+                background: #373737;
+                height: 2px;
+                width: 100%;
+                border-radius: 3rem;
+                opacity: 0.25;
+                margin: 0px;
+            }
+            summary {
+                background: #373737;
+                color: white;
+                border-radius: 6px;
+                padding: 8px 24px;
+            }
+            .pd-header-mobile-dropdown {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                font-size: 26px;
+            }
+        }
+    }
+}
+
+// Desktop View
+.pd-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 18px;
+    padding: 24px 0px;
+    h2, p, a {
+        margin: 0px;
+    }
+    .pd-header-start,
+    .pd-header-center,
+    .pd-header-end {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+    .pd-header-start {
+        img {
+            width: 32px;
+            height: 30px;
+        }
+    }
+}
+</style>
\ No newline at end of file