Fix navigation drawer (#926)

Use an ugly workaround in which the nav buttons are wrapped in
Drawer.Close conditionally to avoid having to programmatically control
open. Programmatically controlling open causes issues:

- the drawer close animation doesn't play; it just disappears instantly
- the drawer close momentarily resets scroll on iOS/safari

Also add meta tags for discord embed, and remove second image tag

Website/src/app.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:title" content="Dawnshard" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="Dawnshard server emulator for Dragalia Lost" />
+    <meta property="og:image" content="%sveltekit.assets%/favicon.ico" />
     <title>Dawnshard</title>
     %sveltekit.head%
   </head>

Website/src/routes/(main)/+layout.server.ts

@@ -2,10 +2,11 @@ import Cookies from '$lib/auth/cookies.ts';
 
 import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = ({ locals, depends }) => {
+export const load: LayoutServerLoad = ({ locals, depends, url }) => {
   depends(`cookie:${Cookies.IdToken}`);
 
   return {
-    hasValidJwt: locals.hasValidJwt
+    hasValidJwt: locals.hasValidJwt,
+    urlOrigin: url.origin
   };
 };

Website/src/routes/(main)/+layout.svelte

@@ -8,6 +8,10 @@
   export let data: LayoutData;
 </script>
 
+<svelte:head>
+  <meta property="og:url" content={data.urlOrigin} />
+</svelte:head>
+
 <ModeWatcher />
 <Header hasValidJwt={data.hasValidJwt} />
 <SideNav hasValidJwt={data.hasValidJwt} />

Website/src/routes/(main)/header.svelte

@@ -4,13 +4,13 @@
   import { onMount } from 'svelte';
 
   import Routes from '$main/routes.svelte';
-  import { Button } from '$shadcn/components/ui/button';
+  import { Button, buttonVariants } from '$shadcn/components/ui/button';
   import * as Drawer from '$shadcn/components/ui/drawer';
+  import { cn } from '$shadcn/utils.js.ts';
 
   import HeaderContents from './headerContents.svelte';
 
   let enhance = false;
-  let drawerOpen = false;
 
   export let hasValidJwt: boolean;
 
@@ -20,33 +20,32 @@
 </script>
 
 {#if enhance}
-  <Drawer.Root direction="left" bind:open={drawerOpen}>
-    <header id="header" class="top-0 z-50 gap-1 bg-background px-1 md:gap-2 md:px-3">
-      <Button
-        variant="ghost"
-        class="md:hidden"
-        aria-label="Open navigation"
-        on:click={() => (drawerOpen = true)}>
+  <Drawer.Root direction="left">
+    <header id="header" class="top-0 z-50 gap-1 bg-background px-2 md:gap-2 md:px-3">
+      <Drawer.Trigger
+        class={cn(buttonVariants({ variant: 'ghost', size: 'sm', className: 'md:hidden' }))}
+        aria-label="Open navigation">
         <Menu class="size-6" />
-      </Button>
+      </Drawer.Trigger>
       <HeaderContents {hasValidJwt} />
-
       <Drawer.Portal class="md:hidden">
         <Drawer.Content
           id="drawer-content"
-          class="fixed bottom-0 left-0 top-0 mt-0 w-[75%] bg-background pl-6 pr-2 pt-2">
-          <div id="my-content" class="flex flex-col">
-            <Button variant="ghost" class="w-[7rem] self-end" on:click={() => (drawerOpen = false)}>
-              Close <Close class="ml-2 mt-0.5 h-5 w-5" />
-            </Button>
-            <Routes {hasValidJwt} on:navigate={() => (drawerOpen = false)} />
+          class="fixed bottom-0 left-0 top-0 mt-0 w-[75%] bg-background pl-4 pr-2 pt-2">
+          <div id="my-content">
+            <Drawer.Close class="flex w-full flex-col pl-0">
+              <Button variant="ghost" class="w-[7rem] self-end">
+                Close <Close class="ml-2 mt-0.5 h-5 w-5" />
+              </Button>
+            </Drawer.Close>
+            <Routes {hasValidJwt} drawer={true} />
           </div>
         </Drawer.Content>
       </Drawer.Portal>
     </header>
   </Drawer.Root>
 {:else}
-  <header id="header" class="z-50 gap-1 bg-background px-1 md:gap-2 md:px-3">
+  <header id="header" class="z-50 gap-1 bg-background px-2 md:gap-2 md:px-3">
     <Button variant="ghost" class="md:hidden" href="/navigation">
       <Menu />
     </Button>
@@ -71,4 +70,8 @@
   :global(#drawer-content > :not(#my-content)) {
     display: none;
   }
+
+  #my-content {
+    width: 100%;
+  }
 </style>

Website/src/routes/(main)/news/item.svelte

@@ -15,8 +15,7 @@
 <Card class="flex flex-col overflow-hidden lg:flex-row">
   <div class="flex shrink-0 grow-0 basis-52 items-center justify-center">
     {#if item.headerImageSrc}
-      <Image src={item.headerImageSrc} class="hidden h-full lg:block" layout="fullWidth" />
-      <Image src={item.headerImageSrc} height={208} class="block lg:hidden" layout="fullWidth" />
+      <Image src={item.headerImageSrc} class="h-[208px] lg:h-full" layout="fullWidth" />
     {:else}
       <Newspaper class="size-[12rem] p-4" strokeWidth={1} />
     {/if}

Website/src/routes/(main)/routeButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Route } from '$main/routes.ts';
+  import { Button } from '$shadcn/components/ui/button/index.js';
+
+  export let route: Route;
+</script>
+
+<Button href={route.href} variant="ghost" class="h-11 w-[90%] justify-start">
+  <svelte:component this={route.icon} class="mr-2 size-6" aria-hidden="true" />
+  {route.title}
+</Button>

Website/src/routes/(main)/routes.svelte

@@ -1,33 +1,28 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  import { Button } from '$shadcn/components/ui/button';
+  import { Close } from '$shadcn/components/ui/drawer';
 
+  import RouteButton from './routeButton.svelte';
   import { routeGroups } from './routes.ts';
 
   export let hasValidJwt: boolean;
-
-  const dispatch = createEventDispatcher();
-
-  const onClick = () => {
-    dispatch('navigate');
-  };
+  export let drawer: boolean = false;
 </script>
 
 {#each routeGroups as routeGroup}
   {#if !routeGroup.requireAuth || (routeGroup.requireAuth && hasValidJwt)}
     <div>
       <h2 class="mb-1 scroll-m-20 text-lg font-semibold tracking-tight">{routeGroup.title}</h2>
-      {#each routeGroup.routes as route}
-        <Button
-          href={route.href}
-          variant="ghost"
-          class="h-11 w-[90%] justify-start"
-          on:click={onClick}>
-          <svelte:component this={route.icon} class="mr-2 size-6" aria-hidden="true" />
-          {route.title}
-        </Button>
-      {/each}
+      {#if drawer}
+        <Close class="flex w-full flex-col">
+          {#each routeGroup.routes as route}
+            <RouteButton {route} />
+          {/each}
+        </Close>
+      {:else}
+        {#each routeGroup.routes as route}
+          <RouteButton {route} />
+        {/each}
+      {/if}
     </div>
   {/if}
 {/each}