Redesigned Header, New Search Bar on Mobile, Redesign Categories on R…

…ecents page
zapcooking · Aug 7, 2024 · 69e4413 · 69e4413
1 parent 10041e9
commit 69e4413
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 77 deletions.
diff --git a/src/components/BottomNav.svelte b/src/components/BottomNav.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import MagnifyingIcon from 'phosphor-svelte/lib/MagnifyingGlass';
   import LightningIcon from 'phosphor-svelte/lib/Lightning';
-  import BookmarkIcon from 'phosphor-svelte/lib/BookmarkSimple';
+  import BookmarkIcon from 'phosphor-svelte/lib/Bookmark';
 </script>
 
 <nav
-  class="md:hidden pt-2 bg-white w-full fixed bottom-0 left-0 grid grid-cols-3 grid-rows-1 text-center"
+  class="lg:hidden pt-2 bg-white w-full fixed bottom-0 left-0 grid grid-cols-3 grid-rows-1 text-center"
 >
   <a href="/recent" class="flex flex-col">
     <MagnifyingIcon class="self-center" size={24} />

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -8,11 +8,26 @@
   import GearIcon from 'phosphor-svelte/lib/Gear';
   import AddIcon from 'phosphor-svelte/lib/Plus';
   import SignOutIcon from 'phosphor-svelte/lib/SignOut';
+  import SearchIcon from 'phosphor-svelte/lib/MagnifyingGlass';
+  import BookmarkIcon from 'phosphor-svelte/lib/Bookmark';
   import { nip19 } from 'nostr-tools';
   import { clickOutside } from '$lib/clickOutside';
-  import { fade } from 'svelte/transition';
+  import { fade, blur } from 'svelte/transition';
+  import TagsSearchAutocomplete from './TagsSearchAutocomplete.svelte';
 
   let dropdownActive = false;
+  let searchActive = false;
+
+  function openTag(query: string) {
+    searchActive = false;
+    if (query.startsWith('npub')) {
+      goto(`/user/${query}`);
+    } else if (query.startsWith('naddr')) {
+      goto(`/recipe/${query}`);
+    } else {
+      goto(`/tag/${query}`);
+    }
+  }
 
   function logout() {
     localStorage.removeItem('nostrcooking_loggedInPublicKey');
@@ -22,24 +37,49 @@
   }
 </script>
 
-<div class="flex gap-9 sm:px-6">
-  <a href="/recent" class="grow md:grow-0">
+{#if searchActive}
+  <div class="fixed z-20 w-full h-full top-0 left-0 duration-500 transition-opacity bg-opacity-50 backdrop-blur-sm" transition:blur={{ amount: 10, duration: 300 }}>
+    <div class="fixed z-25 inset-x-0 top-20 w-3/4 md:w-1/2 lg:w-1/3 mx-auto" use:clickOutside on:click_outside={() => (searchActive = false)} >
+        <TagsSearchAutocomplete
+            placeholderString={"Search by tag, like 'italian', 'steak' or 'glutenfree'."}
+            action={openTag}
+            autofocus={true}
+        />
+    </div>
+  </div>  
+{/if}
+
+<div class="flex gap-9 justify-between">
+  <a href="/recent" class="flex-none">
     <img src={SVGNostrCookingWithText} class="w-40 my-3" alt="Nostr.Cooking Logo With Text" />
   </a>
 
-  <div class="hidden md:flex grow gap-10 self-center font-semibold">
+  <div class="hidden lg:flex gap-10 self-center font-semibold">
     <a class="transition duration-300 hover:text-primary" href="/recent">Discover</a>
     <a class="transition duration-300 hover:text-primary" href="/tags">Categories</a>
-    <a class="transition duration-300 hover:text-primary" href="/bookmarks">Bookmarks</a>
   </div>
 
-  <div class="flex gap-4 self-center">
+  <div class="hidden sm:flex flex-1 grow self-center">
+    <TagsSearchAutocomplete
+      placeholderString={"Search by tag, like 'italian', 'steak' or 'glutenfree'."}
+      action={openTag}
+    />
+  </div>
+
+  <div class="flex gap-4 self-center flex-none">
+    <div class="block sm:hidden self-center">
+      <Button class="self-center w-10 h-10 flex justify-center px-1 py-1 bg-[#FFECE8]" on:click={() => searchActive = true}>
+        <SearchIcon class="self-center text-primary" size={16} weight="bold" />
+      </Button>
+    </div>
     {#if $userPublickey !== ''}
-      <Button class="self-center" on:click={() => goto('/create')}>
-        <div class="flex gap-2 font-semibold">
-          <AddIcon class="self-center" size={18} />
+      <a class="hidden lg:flex self-center gap-2 transition duration-300 font-semibold hover:text-primary" href="/bookmarks">
+        <BookmarkIcon class="self-center" size="30px" weight="bold" />
+        <span class="self-center">Bookmarks</span>
+      </a>
+      <Button class="self-center max-md:w-10 max-md:h-10 flex max-md:justify-center max-md:px-1 max-md:py-1 font-semibold gap-2" on:click={() => goto('/create')}>
+          <AddIcon class="self-center" size={16} />
           <div class="hidden md:flex">Add Recipe</div>
-        </div>
       </Button>
     {/if}
     <div class="self-center">

diff --git a/src/components/TagsSearchAutocomplete.svelte b/src/components/TagsSearchAutocomplete.svelte
@@ -5,6 +5,7 @@
   const maxAutocompleteOptions = 7;
 
   export let placeholderString: string;
+  export let autofocus = false;
   export let action: (query: string) => void;
 
   let tagquery = '';
@@ -30,7 +31,8 @@
       .map((item) => item.tag)
       .slice(0, 512);
 
-    showAutocomplete = tagquery.length > 0 && inputFocused;
+    showAutocomplete = tagquery.length > 0 && (inputFocused || autofocus);
+    console.debug(showAutocomplete, tagquery, inputFocused);
 
     // Listen for mousedown events on the autocomplete items to prevent event propagation
     const autocompleteItems = document.querySelectorAll('.autocomplete-item');
@@ -62,7 +64,7 @@
   });
 </script>
 
-<div class="relative">
+<div class="relative flex-1">
   <form
     class="flex rounded-xl shadow-sm bg-input"
     on:submit|preventDefault={() => {
@@ -73,14 +75,26 @@
     }}
   >
     <div class="flex mx-0.5 items-stretch flex-grow focus-within:z-10">
+      {#if autofocus}
       <input
         bind:value={tagquery}
         on:input={handleInputChange}
         on:focus={handleInputFocus}
         on:blur={handleInputBlur}
         class="block w-full input"
         placeholder={placeholderString}
+        autofocus
       />
+      {:else}
+      <input
+        bind:value={tagquery}
+        on:input={handleInputChange}
+        on:focus={handleInputFocus}
+        on:blur={handleInputBlur}
+        class="block w-full input"
+        placeholder={placeholderString}
+      />
+      {/if}
     </div>
     <input type="submit" class="hidden" />
   </form>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -69,7 +69,7 @@
 
 <div class="h-[100%] scroll-smooth">
   <div class="flex h-screen">
-    <div class=" mx-auto flex-1 pt-3 px-3">
+    <div class=" mx-auto flex-1 pt-2 px-4">
       <Header />
       <div class="container mx-auto mt-6 pb-24">
         <slot />

diff --git a/src/routes/recent/+page.svelte b/src/routes/recent/+page.svelte
@@ -33,16 +33,6 @@
 
   let events: NDKEvent[] = [];
 
-  function openTag(query: string) {
-    if (query.startsWith('npub')) {
-      goto(`/user/${query}`);
-    } else if (query.startsWith('naddr')) {
-      goto(`/recipe/${query}`);
-    } else {
-      goto(`/tag/${query}`);
-    }
-  }
-
   onMount(async () => {
     let filter: NDKFilter = { limit: 256, kinds: [30023], '#t': ['nostrcooking'] };
     const evts = await $ndk.fetchEvents(filter);
@@ -74,53 +64,19 @@
 </svelte:head>
 
 <div class="flex flex-col gap-3 md:gap-10">
-  <div class="flex flex-col gap-2">
-    <div>
-      <h2>
-        {#if $userPublickey}
-          What are you in the mood for <Name
-            ndk={$ndk}
-            pubkey={$userPublickey}
-            npubMaxLength={10}
-          />?
-        {:else}
-          What are you in the mood for?
-        {/if}
-      </h2>
-    </div>
-    <TagsSearchAutocomplete
-      placeholderString={"Search by tag, like 'italian', 'steak' or 'glutenfree'."}
-      action={openTag}
-    />
+  <div class="hidden lg:flex w-screen gap-6 overflow-y-hidden overflow-x-auto">
+    {#each popTags as tag}
+      <a class="flex transition duration-300 hover:text-primary" href="/tag/{tag.title}">{tag.title}</a>
+    {/each}
   </div>
 
-  <div class="flex flex-col gap-2">
-    <div class="flex">
-      <h2 class="grow">Popular Categories</h2>
-      <a
-        href="/tags"
-        class="self-center text-primary hover:text-[#d64000] transition-colors duration-300"
-        >View All</a
-      >
-    </div>
-
-    <div class="grid grid-cols-4 md:flex gap-4 overflow-y-hidden overflow-x-auto">
+  <div class="lg:hidden">
+    <select class="w-full input" onchange="window.location.href=this.value">
+      <option value="">All categories</option>
       {#each popTags as tag}
-        <a
-          href="/tag/{tag.title}"
-          class="flex flex-col gap-2 hover:text-primary transition-colors duration-300"
-        >
-          <div
-            class="table w-16 h-16 bg-input hover:bg-accent-gray transition-colors duration-300 rounded-full place-self-center"
-          >
-            <div class="table-cell align-middle place-self-center text-center text-4xl">
-              {tag.emoji}
-            </div>
-          </div>
-          <div class="place-self-center">{tag.title}</div>
-        </a>
+        <option value="/tag/{tag.title}">{tag.title}</option>
       {/each}
-    </div>
+    </select>
   </div>
 
   <div class="flex flex-col gap-2">

diff --git a/src/routes/tag/[slug]/+page.svelte b/src/routes/tag/[slug]/+page.svelte
@@ -6,7 +6,6 @@
   import { validateMarkdownTemplate } from '$lib/pharser';
   import { recipeTags } from '$lib/consts';
   import { goto } from '$app/navigation';
-  import TagsSearchAutocomplete from '../../../components/TagsSearchAutocomplete.svelte';
 
   // let tag: string | undefined = undefined;
   let events: NDKEvent[] = [];
@@ -61,11 +60,6 @@
 </svelte:head>
 
 <div class="flex flex-col gap-8">
-  <TagsSearchAutocomplete
-    placeholderString={"Search by tag, like 'italian', 'steak' or 'glutenfree'."}
-    action={openTag}
-  />
-
   <div class="prose">
     <!-- TODO: Clean up this mess -->
     <h1>
@@ -104,9 +98,9 @@
   {#if events.length > 0}
     <Feed {events} />
   {:else if loaded == false}
-  <div class="flex justify-center items-center h-screen">
-    <img class="w-64" src="/pan-animated.svg" alt="Loading" />
-  </div>
+    <div class="flex justify-center items-center h-screen">
+      <img class="w-64" src="/pan-animated.svg" alt="Loading" />
+    </div>
   {:else}
     <p>Nothing found here :(</p>
   {/if}