From 755dc683012f7a8e5bac4e61bc5430ce26dec8e9 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 5 May 2024 19:45:49 +0000
Subject: [PATCH] New navbar setup

---
 src/lib/components/Navbar copy.svelte | 169 ++++++++++++++++++++++++++
 src/lib/components/Navbar.svelte      | 107 +++++++++-------
 src/lib/components/UserAvatar.svelte  |  12 ++
 3 files changed, 245 insertions(+), 43 deletions(-)
 create mode 100644 src/lib/components/Navbar copy.svelte

diff --git a/src/lib/components/Navbar copy.svelte b/src/lib/components/Navbar copy.svelte
new file mode 100644
index 00000000..7efe33f0
--- /dev/null
+++ b/src/lib/components/Navbar copy.svelte	
@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import { visitCount } from "$lib/utils/stores/visitCountStore";
+  import { goto } from "$app/navigation";
+  import type { DatabaseUser } from "$lib/server/auth";
+  export let user: any;
+  import UserAvatar from "./UserAvatar.svelte";
+  import { onMount } from "svelte";
+  import InfoModal from "./InfoModal.svelte";
+  import infoIcon from "$lib/assets/info.svg";
+  import type { SubmitFunction } from "@sveltejs/kit";
+  async function goHome() {
+    goto("/");
+  }
+  async function goToLog() {
+    goto("/log");
+  }
+  async function goToFeatured() {
+    goto("/featured");
+  }
+  async function toToLogin() {
+    goto("/login");
+  }
+  async function goToSignup() {
+    goto("/signup");
+  }
+  async function goToWorldTravel() {
+    goto("/worldtravel");
+  }
+
+  const submitUpdateTheme: SubmitFunction = ({ action }) => {
+    const theme = action.searchParams.get("theme");
+    if (theme) {
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+  };
+
+  let count = 0;
+
+  let infoModalOpen = false;
+
+  function showModal() {
+    infoModalOpen = true;
+  }
+
+  function closeModal() {
+    infoModalOpen = false;
+  }
+
+  // get value from fetch /api/visitcount
+
+  $: if (user) {
+    onMount(async () => {
+      const res = await fetch("/api/visitcount");
+      const data = await res.json();
+      visitCount.set(data.visitCount);
+    });
+  }
+
+  visitCount.subscribe((value) => {
+    count = value;
+  });
+
+  // Set the visit count to the number of adventures stored in local storage
+  const isBrowser = typeof window !== "undefined";
+  if (isBrowser) {
+    const storedAdventures = localStorage.getItem("adventures");
+  }
+</script>
+
+<div class="navbar bg-base-100 flex flex-col md:flex-row">
+  <div class="navbar-start flex justify-around md:justify-start">
+    <button
+      class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2"
+      on:click={goHome}>Home</button
+    >
+    {#if user}
+      <button class="btn btn-primary my-2 md:my-0 md:mr-4" on:click={goToLog}
+        >My Log</button
+      >
+      <button
+        class="btn btn-primary my-2 md:my-0 md:mr-4"
+        on:click={() => goto("/planner")}>Planner</button
+      >
+
+      <!-- <button
+        class="btn btn-primary my-2 md:my-0 md:mr-4"
+        on:click={() => goto("/planner")}>Planner</button
+      > -->
+    {/if}
+    <button
+      class="btn btn-primary my-2 md:my-0 md:mr-4"
+      on:click={goToWorldTravel}>World Tavel Log</button
+    >
+    <button class="btn btn-primary my-2 md:my-0" on:click={goToFeatured}
+      >Featured</button
+    >
+  </div>
+  <div class="navbar-center flex justify-center md:justify-center">
+    <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
+  </div>
+
+  {#if infoModalOpen}
+    <InfoModal on:close={closeModal} />
+  {/if}
+  <div class="navbar-end flex justify-around md:justify-end mr-4">
+    {#if !user}
+      <button class="btn btn-primary ml-4" on:click={toToLogin}>Login</button>
+      <button class="btn btn-primary ml-4" on:click={goToSignup}>Signup</button>
+    {/if}
+
+    {#if user}
+      <p class="font-bold">Adventures: {count}</p>
+      <UserAvatar {user} />
+    {/if}
+    <button class="btn btn-neutral ml-4 btn-circle" on:click={showModal}
+      ><iconify-icon icon="mdi:information" class="text-xl"
+      ></iconify-icon></button
+    >
+    <div class="dropdown dropdown-bottom dropdown-end">
+      <div tabindex="0" role="button" class="btn m-1 ml-4">
+        <iconify-icon icon="mdi:theme-light-dark" class="text-xl"
+        ></iconify-icon>
+      </div>
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <ul
+        tabindex="0"
+        class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+      >
+        <form method="POST" use:enhance={submitUpdateTheme}>
+          <li>
+            <button formaction="/?/setTheme&theme=light"
+              >Light<iconify-icon icon="mdi:weather-sunny" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
+          <li>
+            <button formaction="/?/setTheme&theme=dark"
+              >Dark<iconify-icon icon="mdi:weather-night" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
+          <li>
+            <button formaction="/?/setTheme&theme=night"
+              >Night<iconify-icon icon="mdi:weather-night" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
+          <!-- <li><button formaction="/?/setTheme&theme=nord">Nord</button></li> -->
+          <!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> -->
+          <li>
+            <button formaction="/?/setTheme&theme=forest"
+              >Forest<iconify-icon icon="mdi:forest" class="text-xl"
+              ></iconify-icon></button
+            >
+            <button formaction="/?/setTheme&theme=garden"
+              >Garden<iconify-icon icon="mdi:flower" class="text-xl"
+              ></iconify-icon></button
+            >
+            <button formaction="/?/setTheme&theme=aqua"
+              >Aqua<iconify-icon icon="mdi:water" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
+        </form>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 7efe33f0..2b325dc3 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -68,55 +68,76 @@
   }
 </script>
 
-<div class="navbar bg-base-100 flex flex-col md:flex-row">
-  <div class="navbar-start flex justify-around md:justify-start">
-    <button
-      class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2"
-      on:click={goHome}>Home</button
-    >
-    {#if user}
-      <button class="btn btn-primary my-2 md:my-0 md:mr-4" on:click={goToLog}
-        >My Log</button
+<div class="navbar bg-base-100">
+  <div class="navbar-start">
+    <div class="dropdown">
+      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          ><path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h8m-8 6h16"
+          /></svg
+        >
+      </div>
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <ul
+        tabindex="0"
+        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
       >
-      <button
-        class="btn btn-primary my-2 md:my-0 md:mr-4"
-        on:click={() => goto("/planner")}>Planner</button
-      >
-
-      <!-- <button
-        class="btn btn-primary my-2 md:my-0 md:mr-4"
-        on:click={() => goto("/planner")}>Planner</button
-      > -->
-    {/if}
-    <button
-      class="btn btn-primary my-2 md:my-0 md:mr-4"
-      on:click={goToWorldTravel}>World Tavel Log</button
-    >
-    <button class="btn btn-primary my-2 md:my-0" on:click={goToFeatured}
-      >Featured</button
-    >
-  </div>
-  <div class="navbar-center flex justify-center md:justify-center">
+        <li>
+          <button on:click={() => goto("/log")}>My Log</button>
+        </li>
+        <li>
+          <button on:click={() => goto("/planner")}>Planner</button>
+        </li>
+        <li>
+          <button on:click={() => goto("/worldtravel")}>World Travel</button>
+        </li>
+        <li>
+          <button on:click={() => goto("/featured")}>Featured</button>
+        </li>
+      </ul>
+    </div>
     <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
   </div>
-
-  {#if infoModalOpen}
-    <InfoModal on:close={closeModal} />
-  {/if}
-  <div class="navbar-end flex justify-around md:justify-end mr-4">
-    {#if !user}
-      <button class="btn btn-primary ml-4" on:click={toToLogin}>Login</button>
-      <button class="btn btn-primary ml-4" on:click={goToSignup}>Signup</button>
-    {/if}
-
+  <div class="navbar-center hidden lg:flex">
+    <ul class="menu menu-horizontal px-1 gap-2">
+      <li>
+        <button class="btn btn-neutral" on:click={() => goto("/log")}
+          >My Log</button
+        >
+      </li>
+      <li>
+        <button class="btn btn-neutral" on:click={() => goto("/planner")}
+          >Planner</button
+        >
+      </li>
+      <li>
+        <button class="btn btn-neutral" on:click={() => goto("/worldtravel")}
+          >World Travel</button
+        >
+      </li>
+      <li>
+        <button class="btn btn-neutral" on:click={() => goto("/featured")}
+          >Featured</button
+        >
+      </li>
+    </ul>
+  </div>
+  <div class="navbar-end">
     {#if user}
-      <p class="font-bold">Adventures: {count}</p>
       <UserAvatar {user} />
+    {:else}
+      <button class="btn btn-primary mr-2" on:click={toToLogin}>Login</button>
+      <button class="btn btn-primary" on:click={goToSignup}>Signup</button>
     {/if}
-    <button class="btn btn-neutral ml-4 btn-circle" on:click={showModal}
-      ><iconify-icon icon="mdi:information" class="text-xl"
-      ></iconify-icon></button
-    >
     <div class="dropdown dropdown-bottom dropdown-end">
       <div tabindex="0" role="button" class="btn m-1 ml-4">
         <iconify-icon icon="mdi:theme-light-dark" class="text-xl"
diff --git a/src/lib/components/UserAvatar.svelte b/src/lib/components/UserAvatar.svelte
index b6db2cf7..24616f52 100644
--- a/src/lib/components/UserAvatar.svelte
+++ b/src/lib/components/UserAvatar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
+  import InfoModal from "./InfoModal.svelte";
   export let user: any;
 
   let icon: string = "";
@@ -17,6 +18,8 @@
   async function navToLog() {
     goto("/log");
   }
+
+  let isInfoModalOpen: boolean = false;
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
@@ -42,8 +45,17 @@
         <button on:click={() => goto("/settings/admin")}>Admin Settings</button>
       </li>
     {/if}
+    <li>
+      <button on:click={() => (isInfoModalOpen = true)}
+        >About AdventureLog</button
+      >
+    </li>
     <form method="post">
       <li><button formaction="/?/logout">Logout</button></li>
     </form>
   </ul>
 </div>
+
+{#if isInfoModalOpen}
+  <InfoModal on:close={() => (isInfoModalOpen = false)} />
+{/if}