From c9c734da1ee4709382f97cab919f33aaf0ca7601 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sun, 23 Jun 2024 22:32:33 -0400
Subject: [PATCH] update

---
 src/components/global/HeaderDropdown.astro | 180 +++++++++++++++++++++
 src/pages/index.astro                      |   2 +-
 src/pages/search-start.astro               |  71 --------
 3 files changed, 181 insertions(+), 72 deletions(-)
 create mode 100644 src/components/global/HeaderDropdown.astro
 delete mode 100644 src/pages/search-start.astro

diff --git a/src/components/global/HeaderDropdown.astro b/src/components/global/HeaderDropdown.astro
new file mode 100644
index 0000000..669e175
--- /dev/null
+++ b/src/components/global/HeaderDropdown.astro
@@ -0,0 +1,180 @@
+---
+// i18n
+import i18next, { t } from "i18next";
+import { Trans, HeadHrefLangs } from "astro-i18next/components";
+
+// Icons
+import {
+    RefreshDouble,
+    Search,
+    Menu,
+    LogIn,
+    Settings,
+    ProfileCircle,
+    CircleSpark,
+    Youtube,
+    OpenNewWindow,
+    ViewGrid,
+    Arcade,
+    InfoCircle,
+    PrivacyPolicy,
+    Code,
+    Language,
+    NavArrowLeft,
+    NavArrowRight,
+    List
+} from '@iconoir/vue'
+
+// Check URL
+if (Astro.url.pathname.startsWith('/watch')) {
+  var WatchPage = true
+} else {
+  var WatchPage = false
+}
+---
+
+<div id="primary" class="header-dropdown">
+    <p>{t('dropdown.Options')}</p>
+    <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> {t('dropdown.Language')}</div> <NavArrowRight/></a>
+    <a href=""><ProfileCircle/> {t('dropdown.Account')}</a>
+    <a href=""><Settings/> {t('dropdown.Settings')}</a>
+    <a href=""><List/> {t('dropdown.Instances')}</a>
+
+    <p>{t('dropdown.Hub')}</p>
+    <a data-astro-prefetch href=""><ViewGrid/> {t('dropdown.Apps')}</a>
+    <a data-astro-prefetch href=""><Arcade/> {t('dropdown.Games')}</a>
+
+    <!-- Only show this if the end-user is watching a video -->
+    {WatchPage ?
+        <p>{t('dropdown.Openin')}</p>
+        <a href=""><CircleSpark/> {t('dropdown.LiteMode')}</a>
+        <a href=""><Youtube/> {t('dropdown.YouTube')}</a>
+        <a href=""><OpenNewWindow/> {t('dropdown.Invidious')}</a>
+        <a href=""><OpenNewWindow/> {t('dropdown.Pipe')}</a>
+        :
+        null
+    }
+
+    <p>{t('dropdown.Other')}</p>
+    <a data-astro-prefetch href="/about/"><InfoCircle/> {t('dropdown.About')}</a>
+    <a data-astro-prefetch href=""><PrivacyPolicy/> {t('dropdown.Privacy')}</a>
+    <a data-astro-prefetch href=""><Code/> {t('dropdown.SourceCode')}</a>
+</div>
+<div id="language" class="header-dropdown">
+    <p>{t('dropdown.Language')}</p>
+    <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> {t("dropdown.GoBack")}</a>
+    <a href="/api/language/en/">English</a>
+    <a href="/api/language/jp/">日本語</a>
+</div>
+
+<!-- Dropdown Scripts -->
+<script is:inline>
+/*    
+@licstart  The following is the entire license notice for the 
+JavaScript code in this page.
+
+Copyright (C) 2024 SudoVanilla
+
+The JavaScript code in this page is free software: you can
+redistribute it and/or modify it under the terms of the GNU
+General Public License (GNU GPL) as published by the Free Software
+Foundation, either version 3 of the License, or (at your option)
+any later version.  The code is distributed WITHOUT ANY WARRANTY;
+without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+
+As additional permission under GNU GPL version 3 section 7, you
+may distribute non-source (e.g., minimized or compacted) forms of
+that code without the copy of the GNU GPL normally required by
+section 4, provided you include this license notice and a URL
+through which recipients can access the Corresponding Source.   
+
+
+@licend  The above is the entire license notice
+for the JavaScript code in this page.
+*/
+
+// Dismiss when the end-user clicks else where
+document.body.addEventListener("click", function (evt) {
+    document.querySelector(".header-dropdown#primary").style.display = "none";
+});
+
+// Toggle Primary Dropdown
+function ToggleHeaderDropdown() {
+  var HeaderDropdown = document.querySelector(".header-dropdown#primary");
+  if (HeaderDropdown.style.display === "flex") {
+    setTimeout(() => {
+        HeaderDropdown.style.display = "none";
+    }, 0o100);
+  } else {
+    setTimeout(() => {
+        HeaderDropdown.style.display = "flex";
+    }, 0o100);
+  }
+}
+
+// Toggle Language Dropdown
+function ToggleHeaderLanguageDropdown() {
+  var HeaderLanguageDropdown = document.querySelector(".header-dropdown#language");
+  if (HeaderLanguageDropdown.style.display === "flex") {
+    HeaderLanguageDropdown.style.display = "none";
+  } else {
+    HeaderLanguageDropdown.style.display = "flex";
+  }
+}
+</script>
+
+<style lang="scss">
+.dropdown-button {
+  color: white;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  aspect-ratio: 1;
+  padding: 4px 6px;
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  svg {
+    width: 18px;
+    pointer-events: none;
+  }
+}
+.header-dropdown {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: 70px;
+  right: 24px;
+  background: transparent;
+  border-radius: 12px;
+  gap: 6px;
+  padding: 12px 6px 8px 6px;
+  backdrop-filter: blur(24px) brightness(0.1) contrast(0.9);
+  z-index: 5;
+  p {
+    margin: 0px 0px 0px 12px;
+    color: gray;
+    font-size: 12px;
+  }
+  a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    text-decoration: none;
+    padding: 6px 12px !important;
+    aspect-ratio: inherit !important;
+    min-width: 200px;
+    border-radius: 6px;
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+    div {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0ca6327..062e688 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -255,7 +255,7 @@ p {
             display: flex;
             align-items: center;
             text-decoration: none;
-            &:hover {
+            &:hover, &:focus {
                 filter: brightness(0.8);
                 text-decoration: nones;
             }
diff --git a/src/pages/search-start.astro b/src/pages/search-start.astro
deleted file mode 100644
index 797f258..0000000
--- a/src/pages/search-start.astro
+++ /dev/null
@@ -1,71 +0,0 @@
----
-// Layout
-import Base from "@layouts/Default.astro";
-
-// i18n
-import i18next, { t } from "i18next";
-import { Trans, HeadHrefLangs } from "astro-i18next/components";
-
-// Fetch Suggestions
-
----
-
-<Base Title="Poke" Description="▶▶ Poke - The privacy app of your dreams!">
-    <input type="search" placeholder="Poke Search..."/>
-    <div class="suggestions">
-        <p style="display: none" id="yt-text">YouTube Suggestions:</p>
-        <div id="suggestions-for-youtube"></div>
-    </div>
-</Base>
-
-<script is:inline>
-/*    
-@licstart  The following is the entire license notice for the 
-JavaScript code in this page.
-
-Copyright (C) 2024 SudoVanilla
-
-The JavaScript code in this page is free software: you can
-redistribute it and/or modify it under the terms of the GNU
-General Public License (GNU GPL) as published by the Free Software
-Foundation, either version 3 of the License, or (at your option)
-any later version.  The code is distributed WITHOUT ANY WARRANTY;
-without even the implied warranty of MERCHANTABILITY or FITNESS
-FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
-
-As additional permission under GNU GPL version 3 section 7, you
-may distribute non-source (e.g., minimized or compacted) forms of
-that code without the copy of the GNU GPL normally required by
-section 4, provided you include this license notice and a URL
-through which recipients can access the Corresponding Source.   
-
-
-@licend  The above is the entire license notice
-for the JavaScript code in this page.
-*/
-
-// When the end-user starts typing, trigget the fetch function
-document.querySelector('input[type="search"]').addEventListener('input', function(e) {
-  if (e.target.value !== '') {
-    document.getElementById('yt-text').style.display = 'inherit'
-    GetResults()
-  }
-  else {null}
-});
-
-// Fetch
-function GetResults() {
-    var SearchValue = document.querySelector('input[type="search"]').value
-    var YouTubeSuggestions = document.getElementById('suggestions-for-youtube')
-    fetch(`https://yt.sudovanilla.org/api/v1/search/suggestions?q=${SearchValue}`)
-    .then(response => response.json())
-    .then(data => {YouTubeSuggestions.innerHTML = ListOfSuggestionsYT(data)})
-}
-
-// Create List
-function ListOfSuggestionsYT(data) {
-    const text = data.suggestions.map(data => `<li><a href="/search?query=${data}">${data}</a></li>`).join("\n")
-    return `<ul class="suggestions">${text}</ul>`
-}
-
-</script>
\ No newline at end of file