added sidebar and related components

7 files changed, 154 insertions, 0 deletions

diff --git a/src/components/LeftSidebarComponent.astro b/src/components/LeftSidebarComponent.astro
new file mode 100644
index 0000000..0580d09
--- /dev/null
+++ b/src/components/LeftSidebarComponent.astro
@@ -0,0 +1,31 @@
+---
+import NavigationComponent from './NavigationComponent.astro';
+import NavigationComponentLink from './NavigationComponentLink.astro';
+---
+
+<aside class="w-1/6">
+    <NavigationComponent title="Navigation">
+        <NavigationComponentLink href="/">Home</NavigationComponentLink>
+        <NavigationComponentLink href="/districts">Districts</NavigationComponentLink>
+        <NavigationComponentLink href="/guides">Guides</NavigationComponentLink>
+        <NavigationComponentLink href="/thoughts">Thoughts</NavigationComponentLink>
+        <NavigationComponentLink href="/faq">FAQ</NavigationComponentLink>
+    </NavigationComponent>
+
+    <img 
+        id="sidebar-image" 
+        src="/images/internal/sidebar/default.gif"
+        alt="Left Sidebar Image" 
+        class="w-full h-auto rounded-xl pointer-events-none select-none" 
+    />
+
+    <NavigationComponent title="Resources" variation="alternate">
+        <NavigationComponentLink href="/resources/avatars">Avatars</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/backgrounds">Tiled Backgrounds</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/blinkies">Blinkies</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/flags">Flags</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/stamps">Stamps</NavigationComponentLink>
+    </NavigationComponent>
+</aside>
+
+<script src="../scripts/sidebarImage.ts"></script>
diff --git a/src/components/NavigationComponent.astro b/src/components/NavigationComponent.astro
new file mode 100644
index 0000000..9987c2f
--- /dev/null
+++ b/src/components/NavigationComponent.astro
@@ -0,0 +1,29 @@
+---
+const { title, variation, bordered = true } = Astro.props;
+---
+
+<section class="saira uppercase my-4">
+    <div class="text-xl flex flex-row gap-2 justify-center items-center">
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapink" : "bg-pagodapurple"
+        }
+        rounded-l-2xl px-4 h-6`}></div>
+        <div>{title}</div>
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapurple" : "bg-pagodapink"
+        } ${
+            bordered ? "rounded-tr-2xl" : "rounded-r-2xl"
+        }
+        flex-grow h-6`}></div>
+    </div>
+    <div class={`
+    ${
+        bordered ? variation === "alternate" ? "border-pagodapurple bg-pagodapurple" : "border-pagodapink bg-pagodapink" : ""
+    }
+    ${
+        bordered ? "border-r-8 border-b-2 border-solid relative bottom-1" : ""
+    }
+    rounded-br ml-8`}>
+        <slot />
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/NavigationComponentLink.astro b/src/components/NavigationComponentLink.astro
new file mode 100644
index 0000000..30fa456
--- /dev/null
+++ b/src/components/NavigationComponentLink.astro
@@ -0,0 +1,8 @@
+---
+const { href } = Astro.props;
+---
+
+<div class="text-pagodagreen group hover:text-pagodagreen-shine bg-black py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300 font-semibold first:rounded-tr-xl">
+    <a href={href}><slot /></a>
+    <span class="text-black group-hover:text-pagodapink-shine">▎</span>
+</div>
\ No newline at end of file
diff --git a/src/components/RightNavigationComponent.astro b/src/components/RightNavigationComponent.astro
new file mode 100644
index 0000000..fcf0c39
--- /dev/null
+++ b/src/components/RightNavigationComponent.astro
@@ -0,0 +1,29 @@
+---
+const { title, variation, bordered = true } = Astro.props;
+---
+
+<section class="saira uppercase my-4">
+    <div class="text-xl flex flex-row gap-2 justify-center items-center">
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapink" : "bg-pagodapurple"
+        }
+        rounded-tl-2xl px-4 h-6`}></div>
+        <div>{title}</div>
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapurple" : "bg-pagodapink"
+        } ${
+            bordered ? "rounded-r-2xl" : "rounded-tr-2xl"
+        }
+        flex-grow h-6`}></div>
+    </div>
+    <div class={`
+    ${
+        bordered ? variation === "alternate" ? "border-pagodapink bg-pagodapink" : "border-pagodapurple bg-pagodapurple" : ""
+    }
+    ${
+        bordered ? "border-l-8 border-b-2 border-solid relative bottom-1" : ""
+    }
+    rounded-bl mr-8`}>
+        <slot />
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/RightNavigationComponentLink.astro b/src/components/RightNavigationComponentLink.astro
new file mode 100644
index 0000000..cda2cb7
--- /dev/null
+++ b/src/components/RightNavigationComponentLink.astro
@@ -0,0 +1,7 @@
+---
+const { href } = Astro.props;
+---
+<div class="text-pagodagreen group hover:text-pagodapurple-shine bg-black p-1 flex flex-row gap-2 justify-start transition-all ease-in-out hover:gap-4 duration-300 font-semibold first:rounded-tl-xl">
+    <span class="text-black group-hover:text-pagodapurple-shine">▎</span>
+    <a href={href}><slot /></a>
+</div>
diff --git a/src/components/RightSidebarComponent.astro b/src/components/RightSidebarComponent.astro
new file mode 100644
index 0000000..1a19686
--- /dev/null
+++ b/src/components/RightSidebarComponent.astro
@@ -0,0 +1,19 @@
+---
+import SearchComponent from './SearchComponent.astro';
+import RightNavigationComponent from './RightNavigationComponent.astro';
+import RightNavigationComponentLink from './RightNavigationComponentLink.astro';
+---
+
+<aside class="w-1/6">
+    <img src="/images/internal/search.webp" alt="Search Image" class="h-32 mt-4 relative ml-20 pointer-events-none select-none" />
+    <SearchComponent />
+    <RightNavigationComponent title="Pagoda Services">
+        <RightNavigationComponentLink href="/services/ad">Advertisement</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/blogs">Blogs</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/comments">Comments</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/counter">Counter</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/guestbook">Guestbook</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/journals">Journals</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/webring">Webring</RightNavigationComponentLink>
+    </RightNavigationComponent>
+</aside>
\ No newline at end of file
diff --git a/src/components/SearchComponent.astro b/src/components/SearchComponent.astro
new file mode 100644
index 0000000..9a269d8
--- /dev/null
+++ b/src/components/SearchComponent.astro
@@ -0,0 +1,31 @@
+<div class="saira uppercase mb-4 relative bottom-1">
+    <div class="text-xl flex flex-row gap-2 justify-center items-center">
+        <div class="flex-grow h-6 bg-pagodapurple rounded-tl-2xl"></div>
+        <div>Site Search</div>
+    </div>
+    <div class="bg-pagodapurple rounded-br-2xl relative bottom-1 pl-2 pr-1 pt-1 pb-1">
+        <form action="/search" method="GET" class="flex flex-col gap-1">
+            <div class="flex flex-row gap-2 items-center">
+                <label for="search" class="text-white w-1/4">Query:</label>
+                <input type="text" id="search" name="q" class="w-3/4 bg-black text-white border-2 border-pagodapurple rounded-lg px-2 py-1 focus:outline-none focus:border-pagodapink" placeholder="Search..." required />
+            </div>
+            <div class="flex flex-row gap-2 items-center">
+                <label for="category" class="text-white w-1/4">In:</label>
+                <select id="category" name="category" class="w-3/4 bg-black text-white border-2 border-pagodapurple rounded-lg px-2 py-1 focus:outline-none focus:border-pagodapink">
+                    <option value="all">All</option>
+                    <option value="avatars">Avatars</option>
+                    <option value="backgrounds">Tiled Backgrounds</option>
+                    <option value="blinkies">Blinkies</option>
+                    <option value="districts">Districts</option>
+                    <option value="flags">Flags</option>
+                    <option value="guides">Guides</option>
+                    <option value="stamps">Stamps</option>
+                    <option value="thoughts">Thoughts</option>
+                </select>
+            </div>
+            <div class="flex flex-row items-center">
+                <button type="submit" class="bg-pagodapink text-white rounded-lg px-4 py-1 hover:bg-pagodagreen font-bold hover:text-black transition duration-300 cursor-pointer">Search</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file