From f78b29b7fd381f28377382caf16c1316f6347ecb Mon Sep 17 00:00:00 2001
From: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>
Date: Sun, 2 Feb 2025 10:09:25 +1030
Subject: [PATCH] feat(news) Added news page/sidebar

---
 pages/news.vue | 156 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 pages/news.vue

diff --git a/pages/news.vue b/pages/news.vue
new file mode 100644
index 0000000..8f00aa7
--- /dev/null
+++ b/pages/news.vue
@@ -0,0 +1,156 @@
+<template>
+    <div class="flex flex-col lg:flex-row grow">
+      <TransitionRoot as="template" :show="sidebarOpen">
+        <Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
+          <TransitionChild
+            as="template"
+            enter="transition-opacity ease-linear duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <div class="fixed inset-0 bg-zinc-900/80" />
+          </TransitionChild>
+  
+          <div class="fixed inset-0 flex">
+            <TransitionChild
+              as="template"
+              enter="transition ease-in-out duration-300 transform"
+              enter-from="-translate-x-full"
+              enter-to="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leave-from="translate-x-0"
+              leave-to="-translate-x-full"
+            >
+              <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
+                <TransitionChild
+                  as="template"
+                  enter="ease-in-out duration-300"
+                  enter-from="opacity-0"
+                  enter-to="opacity-100"
+                  leave="ease-in-out duration-300"
+                  leave-from="opacity-100"
+                  leave-to="opacity-0"
+                >
+                  <div
+                    class="absolute top-0 left-full flex w-16 justify-center pt-5"
+                  >
+                    <button
+                      type="button"
+                      class="-m-2.5 p-2.5"
+                      @click="sidebarOpen = false"
+                    >
+                      <span class="sr-only">Close sidebar</span>
+                      <XMarkIcon class="size-6 text-white" aria-hidden="true" />
+                    </button>
+                  </div>
+                </TransitionChild>
+                <div class="bg-zinc-900">
+                  <NewsDirectory ref="newsDirectory" />
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </Dialog>
+      </TransitionRoot>
+  
+      <!-- Static sidebar for desktop -->
+      <div
+        class="hidden lg:block lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col lg:border-r-2 lg:border-zinc-800"
+      >
+        <NewsDirectory ref="newsDirectory" />
+      </div>
+  
+      <div
+        class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
+      >
+        <button
+          type="button"
+          class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
+          @click="sidebarOpen = true"
+        >
+          <span class="sr-only">Open sidebar</span>
+          <Bars3Icon class="size-6" aria-hidden="true" />
+        </button>
+        <div
+          class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
+        >
+          News
+        </div>
+      </div>
+  
+      <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 grow">
+        <NuxtPage />
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from "vue";
+  import {
+    Dialog,
+    DialogPanel,
+    TransitionChild,
+    TransitionRoot,
+  } from "@headlessui/vue";
+  import {
+    Bars3Icon,
+    CalendarIcon,
+    ChartPieIcon,
+    DocumentDuplicateIcon,
+    FolderIcon,
+    HomeIcon,
+    UsersIcon,
+    XMarkIcon,
+  } from "@heroicons/vue/24/outline";
+  
+  const router = useRouter();
+  const sidebarOpen = ref(false);
+  
+  router.afterEach(() => {
+    sidebarOpen.value = false;
+  });
+  
+  useHead({
+    title: "News",
+  });
+  </script>
+  
+  <style scoped>
+  
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  
+  .hover-lift {
+    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  
+  .hover-lift:hover {
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.2);
+  }
+  
+  /* Springy list animations */
+  .list-enter-active {
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  
+  .list-leave-active {
+    transition: all 0.3s ease;
+  }
+  
+  .list-move {
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  </style>
+