From 12706426f4cb61e35b6e99ca12fe676cb6977d2c Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Thu, 15 Aug 2024 15:45:28 -0400
Subject: [PATCH] moved search and user dropdown functionality out of header

---
 frontend/src/Header.svelte | 127 ++++++++++++++++++-------------------
 1 file changed, 61 insertions(+), 66 deletions(-)

diff --git a/frontend/src/Header.svelte b/frontend/src/Header.svelte
index 398272d..de8ecda 100644
--- a/frontend/src/Header.svelte
+++ b/frontend/src/Header.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
     import logo from "./assets/images/AniTrackLogo.svg"
     import Search from "./Search.svelte"
-    import UserDialogue from "./UserHeaderDialogue.svelte";
     import {
         aniListLoggedIn,
-        simklLoggedIn,
-        malLoggedIn,
-        loginToSimkl,
+        aniListUser,
         loginToAniList,
         loginToMAL,
-        aniListUser,
-        simklUser,
-        malUser
+        loginToSimkl,
+        malLoggedIn,
+        malUser,
+        simklLoggedIn,
+        simklUser
     } from "./GlobalVariablesAndHelperFunctions.svelte"
     import type {AniListUser} from "./anilist/types/AniListTypes";
     import type {SimklUser} from "./simkl/types/simklTypes";
     import type {MyAnimeListUser} from "./mal/types/MALTypes";
+    import AvatarMenu from "./AvatarMenu.svelte";
 
     let isAniListLoggedIn: boolean
     let isSimklLoggedIn: boolean
@@ -30,74 +30,69 @@
     aniListUser.subscribe((value) => currentAniListUser = value)
     simklUser.subscribe((value) => currentSimklUser = value)
     malUser.subscribe((value) => currentMALUser = value)
-
-
 </script>
 
 <header class="mb-2">
     <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
         <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
-            <a href="#" class="flex items-center">
-                <img src={logo} class="mr-3 h-6 sm:h-9" alt="AniTrack Logo" />
-            </a>
+            <img src={logo} class="mr-3 h-6 sm:h-9" alt="AniTrack Logo"/>
 
-            <div class="flex space-x-2 items-center">
-                <div>
-                    {#if isAniListLoggedIn}
-                        <span class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-800 dark:text-green-200 cursor-default">AniList: {currentAniListUser.data.Viewer.name}</span>
-                    {:else}
-                        <button on:click={loginToAniList} class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">AniList</button>
-                    {/if}
-                </div>
-                <div>
-                    {#if isMALLoggedIn}
-                        <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-800 dark:text-blue-200 cursor-default">MAL: {currentMALUser.name}</span>
-                    {:else}
-                        <button on:click={loginToMAL} class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">MAL</button>
-                    {/if}
-                </div>
-                <div>
-                    {#if isSimklLoggedIn}
-                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-800 dark:text-indigo-200 cursor-default">Simkl: {currentSimklUser.user.name}</span>
-                    {:else}
-                        <button on:click={loginToSimkl} class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">Simkl</button>
-                    {/if}
-                </div>
-            </div>
+            <div class="flex space-x-4 items-center">
 
-            <div class="flex space-x-4 items-center lg:order-2">
-
-                <Search />
-
-                <UserDialogue />
-                <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
+                <button data-collapse-toggle="mobile-menu-2" type="button"
+                        class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                        aria-controls="mobile-menu-2" aria-expanded="false">
                     <span class="sr-only">Open main menu</span>
-                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
-                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                              clip-rule="evenodd"></path>
+                    </svg>
+                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                              clip-rule="evenodd"></path>
+                    </svg>
                 </button>
-            </div>
-            <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
-                <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
-<!--                    <li>-->
-<!--                        <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-blue-700 lg:bg-transparent lg:text-blue-700 lg:p-0 dark:text-white" aria-current="page">Home</a>-->
-<!--                    </li>-->
-<!--                    <li>-->
-<!--                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>-->
-<!--                    </li>-->
-<!--                    <li>-->
-<!--                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>-->
-<!--                    </li>-->
-<!--                    <li>-->
-<!--                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>-->
-<!--                    </li>-->
-<!--                    <li>-->
-<!--                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>-->
-<!--                    </li>-->
-<!--                    <li>-->
-<!--                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>-->
-<!--                    </li>-->
-                </ul>
+                <div class="hidden justify-between lg:space-x-44 items-center w-full lg:flex lg:flex-wrap lg:mx-auto lg:max-w-screen-lg"
+                     id="mobile-menu-2">
+                    <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-2 lg:mt-0">
+                        <li>
+                            {#if isAniListLoggedIn}
+                                <span class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-800 dark:text-green-200 cursor-default">AniList: {currentAniListUser.data.Viewer.name}</span>
+                            {:else}
+                                <button on:click={loginToAniList}
+                                        class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">
+                                    AniList
+                                </button>
+                            {/if}
+                        </li>
+                        <li>
+                            {#if isMALLoggedIn}
+                                <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-800 dark:text-blue-200 cursor-default">MAL: {currentMALUser.name}</span>
+                            {:else}
+                                <button on:click={loginToMAL}
+                                        class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">
+                                    MAL
+                                </button>
+                            {/if}
+                        </li>
+                        <li>
+                            {#if isSimklLoggedIn}
+                                <span class="bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-800 dark:text-indigo-200 cursor-default">Simkl: {currentSimklUser.user.name}</span>
+                            {:else}
+                                <button on:click={loginToSimkl}
+                                        class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">
+                                    Simkl
+                                </button>
+                            {/if}
+                        </li>
+                    </ul>
+                    <Search/>
+                </div>
+                <AvatarMenu />
             </div>
         </div>
     </nav>
-</header>
\ No newline at end of file
+</header>