From 27c92c90766dc3a3d9fb9727c4a7867c6ecf9561 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 22 Jan 2025 11:17:15 -0500
Subject: [PATCH] feat: homepage improvements (#100)

---
 apps/next.immich.app/routes/+page.svelte | 39 ++++++++++++----------
 src/lib/components/Header.svelte         | 41 ++++++++++++++++++++++--
 2 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/apps/next.immich.app/routes/+page.svelte b/apps/next.immich.app/routes/+page.svelte
index 65250f2..ebfae36 100644
--- a/apps/next.immich.app/routes/+page.svelte
+++ b/apps/next.immich.app/routes/+page.svelte
@@ -9,7 +9,6 @@
     appStoreBadge,
     Button,
     Heading,
-    HStack,
     Icon,
     Logo,
     playStoreBadge,
@@ -24,38 +23,44 @@
     <DocsHeader />
   </AppShellHeader>
 
-  <PageContent class="mx-auto max-w-screen-lg">
-    <VStack gap={8} class="p-8 text-center">
+  <PageContent class="mx-auto w-full max-w-screen-lg">
+    <VStack gap={8} class="mt-4 lg:mt-16 text-center">
       <Logo size="giant" variant="logo" class="border" />
       <Heading size="title"
-        >Self-hosted <span class="text-primary">photo and<br /> video management</span> solution</Heading
+        >Self-hosted <span class="text-primary">photo and<br class="hidden lg:block" /> video management</span> solution</Heading
       >
       <Text
-        >Easily back up, organize, and manage your photos on your own server. Immich helps you<br /> browse, search and organize
-        your photos and videos with ease, without sacrificing your privacy.</Text
+        >Easily back up, organize, and manage your photos on your own server. Immich helps you<br
+          class="hidden lg:block"
+        /> browse, search and organize your photos and videos with ease, without sacrificing your privacy.</Text
       >
-      <HStack>
-        <Button size="large" href="/download">Download</Button>
-        <Button size="large" href="https://demo.immich.app/" color="secondary">
-          <span>Open Demo</span>
-          <Icon icon={mdiOpenInNew} />
-        </Button>
-      </HStack>
-      <Button size="large" variant="ghost">Join our Discord</Button>
+
+      <div class="flex flex-col gap-4">
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="large" href="/download">Download</Button>
+          <Button size="large" href="https://demo.immich.app/" color="secondary">
+            <span>Open Demo</span>
+            <Icon icon={mdiOpenInNew} />
+          </Button>
+        </div>
+        <div class="flex justify-center">
+          <Button size="large" variant="ghost">Join our Discord</Button>
+        </div>
+      </div>
 
       <img src={screenshot} alt="Immich application" />
 
       <hr class="border-t w-full max-w-screen-sm m-8" />
       <Heading size="title">Download mobile app</Heading>
       <Text>Download Immich app and start backing up your photos and videos securely to your own server</Text>
-      <HStack gap={0}>
+      <div class="flex flex-col lg:flex-row">
         <Button href="" variant="ghost" class="p-0">
           <img src={playStoreBadge} alt="Playstore Badge" class="h-24" />
         </Button>
         <Button href="" variant="ghost" class="p-0">
-          <img src={appStoreBadge} alt="Playstore Badge" class="h-24 p-4" />
+          <img src={appStoreBadge} alt="Playstore Badge" class="h-24 p-[16px]" />
         </Button>
-      </HStack>
+      </div>
       <img src={qrCode} alt="QRCode" class="h-36" />
     </VStack>
   </PageContent>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index b4c17a4..f527974 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+  import { afterNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import type { HeaderItem } from '$lib/types';
-  import { Button, HStack, IconButton, Logo, syncToDom, theme, Theme } from '@immich/ui';
-  import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+  import { Button, CloseButton, HStack, IconButton, Logo, NavbarItem, syncToDom, theme, Theme } from '@immich/ui';
+  import { mdiMenu, mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
   import type { Snippet } from 'svelte';
 
   type Props = {
@@ -24,6 +25,11 @@
   $effect(() => {
     syncToDom();
   });
+
+  let menuOpen = $state(false);
+  afterNavigate(() => {
+    menuOpen = false;
+  });
 </script>
 
 <nav class="flex items-center justify-between md:gap-2 p-2">
@@ -31,9 +37,11 @@
     <Logo variant="inline" />
   </a>
   {@render children?.()}
+
   <HStack gap={0}>
     {#each items as item}
       <Button
+        class="hidden md:flex"
         href={item.href}
         shape="round"
         variant={item.variant ?? 'ghost'}
@@ -41,7 +49,7 @@
       >
     {/each}
     <IconButton
-      size="large"
+      size="giant"
       shape="round"
       color="primary"
       variant="ghost"
@@ -49,5 +57,32 @@
       icon={themeIcon}
       onclick={handleToggleTheme}
     />
+    <span class="md:hidden">
+      {#if menuOpen}
+        <CloseButton class="md:hidden" size="giant" onclick={() => (menuOpen = false)} />
+      {:else}
+        <IconButton
+          size="giant"
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          class="md:hidden"
+          icon={mdiMenu}
+          onclick={() => (menuOpen = true)}
+        />
+      {/if}
+    </span>
   </HStack>
 </nav>
+
+{#if menuOpen}
+  <div class="h-dvh w-dvw bg-light/80 text-dark fixed left-0">
+    <nav class="w-full absolute bg-light text-dark overflow-y-hidden py-4 border-t">
+      <div class="flex flex-col">
+        {#each items as item}
+          <NavbarItem href={item.href} title={item.title} />
+        {/each}
+      </div>
+    </nav>
+  </div>
+{/if}