feat: restructure and add new event button to header

app/src/components/shared/Header.svelte

@@ -3,10 +3,9 @@
   import logoDark from "$lib/assets/logo-dark.webp";
   import logoDarkSm from "$lib/assets/logo-dark-sm.webp";
   import logoLightSm from "$lib/assets/logo-light-sm.webp";
-  import SignInOrOut from "$components/shared/SignInOrOut.svelte";
   import { page } from "$app/stores";
-  import { DarkMode } from "flowbite-svelte";
   import { isSafariOrIOS } from "$lib/utils/device.util";
+  import HeaderActions from "$components/shared/HeaderActions.svelte";
 
   export let auth;
   $: isRoot = $page.url.pathname === "/";
@@ -35,7 +34,6 @@
   </a>
 
   <div class="flex flex-row items-center justify-end gap-2">
-    <SignInOrOut {auth} />
-    <DarkMode />
+    <HeaderActions {auth} />
   </div>
 </header>

app/src/components/shared/HeaderActions.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { PUBLIC_SANITY_STUDIO_URL } from "$env/static/public";
+  import { signIn, signOut } from "@auth/sveltekit/client";
+  import SignedOutMenu from "./SignedOutMenu.svelte";
+  import SignedInDesktopMenu from "./SignedInDesktopMenu.svelte";
+  import SignedInMobileMenu from "./SignedInMobileMenu.svelte";
+
+  export let auth;
+  let isSigningOut = false;
+  let isSigningIn = false;
+
+  const openSanityStudio = () => {
+    window.open(PUBLIC_SANITY_STUDIO_URL, "_blank");
+  };
+
+  const signOutHandler = async () => {
+    isSigningOut = true;
+    await signOut({ callbackUrl: "/" });
+  };
+
+  const signInHandler = async () => {
+    isSigningIn = true;
+    await signIn("google");
+  };
+</script>
+
+{#if auth}
+  <SignedInDesktopMenu {auth} {isSigningOut} {openSanityStudio} {signOutHandler} />
+  <SignedInMobileMenu {auth} {isSigningOut} {openSanityStudio} {signOutHandler} />
+{:else}
+  <SignedOutMenu {isSigningIn} {signInHandler} />
+{/if}

app/src/components/shared/SignedInDesktopMenu.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { Button } from "flowbite-svelte";
+  import { LogOutIcon, PlusIcon } from "svelte-feather-icons";
+  import DarkMode from "./DarkMode.svelte";
+
+  export let auth;
+  export let isSigningOut;
+  export let openSanityStudio;
+  export let signOutHandler;
+</script>
+
+<div class="hidden flex-row items-center gap-3 md:flex">
+  <span class="text-sm font-semibold">{auth.user.name}</span>
+  <img class="h-8 rounded-2xl" alt="Profilbilde" src={auth.user.image} />
+
+  <Button color="dark" class="h-9" pill on:click={openSanityStudio}>
+    <span class="mr-1.5">Opprett</span>
+    <PlusIcon strokeWidth={1.5} class="w-[16px]" />
+  </Button>
+
+  <Button
+    color="alternative"
+    class="h-9 border-[#999]"
+    pill
+    on:click={signOutHandler}
+    disabled={isSigningOut}
+  >
+    <span class="mr-1.5">Logg ut</span>
+    <LogOutIcon strokeWidth={1.5} class="w-[16px]" />
+  </Button>
+  <DarkMode size="sm" btnClass="h-9 border-[#999] rounded-2xl p-2.5" />
+</div>

app/src/components/shared/SignedInMobileMenu.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { Button } from "flowbite-svelte";
+  import { LogOutIcon, PlusIcon } from "svelte-feather-icons";
+  import DarkMode from "./DarkMode.svelte";
+
+  export let auth;
+  export let openSanityStudio;
+  export let isSigningOut;
+  export let signOutHandler;
+
+  let isMenuOpen = false;
+
+  const toggleMenu = () => {
+    isMenuOpen = !isMenuOpen;
+  };
+</script>
+
+<div class="flex items-center gap-3 md:hidden">
+  <Button color="alternative" class="border-[#CCC] px-2 py-1 text-black" pill on:click={toggleMenu}>
+    <span class="mr-1.5 max-w-[150px] truncate text-sm font-semibold" title={auth.user.name}
+      >{auth.user.name}</span
+    >
+    <img class="h-8 rounded-2xl" alt="Profilbilde" src={auth.user.image} />
+  </Button>
+
+  {#if isMenuOpen}
+    <div
+      class="absolute right-4 top-20 flex w-40 flex-col items-center gap-3 rounded-md border bg-white p-4 shadow-lg dark:border-[#4B5563] dark:bg-black"
+    >
+      <Button color="dark" class="w-32 px-4 py-2 text-left" pill on:click={openSanityStudio}>
+        <span class="mr-1.5">Opprett</span>
+        <PlusIcon strokeWidth={1.5} class="w-[16px]" />
+      </Button>
+
+      <Button
+        color="alternative"
+        class="h-9 w-32 border-[#999]"
+        pill
+        on:click={signOutHandler}
+        disabled={isSigningOut}
+      >
+        <span class="mr-1.5">Logg ut</span>
+        <LogOutIcon strokeWidth={1.5} class="w-[16px]" />
+      </Button>
+      <DarkMode size="sm" value="Modus" btnClass="h-9 border-[#999] w-32 rounded-2xl" />
+    </div>
+  {/if}
+</div>

app/src/components/shared/SignedOutMenu.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { Button } from "flowbite-svelte";
+  import { LogInIcon } from "svelte-feather-icons";
+  import DarkMode from "./DarkMode.svelte";
+
+  export let signInHandler;
+  export let isSigningIn;
+</script>
+
+<div class="flex items-center gap-3">
+  <Button
+    color="alternative"
+    class="h-9 border-[#999]"
+    pill
+    on:click={signInHandler}
+    disabled={isSigningIn}
+  >
+    <span class="mr-1.5">Logg inn</span>
+    <LogInIcon strokeWidth={1.5} class="w-[16px]" />
+  </Button>
+  <DarkMode size="sm" btnClass="h-9 border-[#999] rounded-2xl p-2.5" />
+</div>