From c63ebcd8c7e06478719cbfd41e67aa5b1fb7cd36 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sun, 19 Mar 2023 16:44:15 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Design=20improvements.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/container.svelte          |  2 +-
 src/components/grid.svelte               |  3 +++
 src/routes/+layout.svelte                | 19 ++++++++++++++-----
 src/routes/+page.svelte                  | 13 +++++++++----
 src/routes/directory/[slug]/+page.svelte | 13 +++++++++----
 5 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 src/components/grid.svelte

diff --git a/src/components/container.svelte b/src/components/container.svelte
index 0c2c197..f242427 100644
--- a/src/components/container.svelte
+++ b/src/components/container.svelte
@@ -1,3 +1,3 @@
-<div class="container mx-auto pt-4">
+<div class="container mx-auto px-6 pt-4 md:px-0">
   <slot />
 </div>
diff --git a/src/components/grid.svelte b/src/components/grid.svelte
new file mode 100644
index 0000000..2e47951
--- /dev/null
+++ b/src/components/grid.svelte
@@ -0,0 +1,3 @@
+<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-6">
+  <slot />
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0a75562..6260350 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,9 @@
 </script>
 
 <main class="min-h-screen bg-dark font-sans text-mini text-white">
-  <nav class="fixed top-0 left-0 z-50 h-full w-60 overflow-y-auto overflow-x-hidden pb-10">
+  <nav
+    class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-800 md:pb-10 md:fixed md:top-0 md:left-0 md:h-full md:w-60 md:border-none"
+  >
     <div class="items-center px-6 py-6">
       <div class="mb-3 border-b border-neutral-700/40 pb-3">
         <a href="/">
@@ -32,16 +34,23 @@
         </a>
         <p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs logos</p>
       </div>
-      <div class="mb-3 flex flex-col space-y-1 border-b border-neutral-700/40 pb-3">
+      <div
+        class="flex items-center space-y-1 overflow-y-auto border-b border-neutral-700/40 pb-3 md:mb-3 md:flex-col md:overflow-y-visible"
+      >
         {#each categories as category}
           <a
             href={`/directory/${category.toLowerCase()}`}
-            class="flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+            class={`flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40
+              ${
+                data.pathname === `/directory/${category.toLowerCase()}` ? 'bg-neutral-700/30' : ''
+              }`}
             data-sveltekit-preload-data>{category}</a
           >
         {/each}
       </div>
-      <div class="flex flex-col space-y-1 border-b border-neutral-700/40 pb-3">
+      <div
+        class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-700/40 pb-3 md:mt-0 md:flex-col md:space-y-1"
+      >
         <a
           href="https://github.com/pheralb/svgl#-getting-started"
           target="_blank"
@@ -72,7 +81,7 @@
       </a>
     </div>
   </nav>
-  <div class="ml-60 py-6">
+  <div class="py-2 md:ml-60 md:py-6">
     <Transition pathname={data.pathname}>
       <slot />
     </Transition>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bdbefc3..b44e852 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,9 +9,10 @@
   import Search from '@/components/search.svelte';
   import Container from '@/components/container.svelte';
   import SvgCard from '@/components/svgCard.svelte';
+  import Grid from '@/components/grid.svelte';
 
   // Search:
-  let searchTerm = "";
+  let searchTerm = '';
   let filteredSvgs: iSVG[] = [];
 
   if (searchTerm.length === 0) {
@@ -29,10 +30,14 @@
 </script>
 
 <Container>
-  <Search bind:searchTerm on:input={searchSvgs} />
-  <div class="mt-4 grid grid-cols-6 gap-4">
+  <Search
+    bind:searchTerm
+    on:input={searchSvgs}
+    placeholder={`Search ${filteredSvgs.length} logos...`}
+  />
+  <Grid>
     {#each filteredSvgs as svg}
       <SvgCard svgInfo={svg} />
     {/each}
-  </div>
+  </Grid>
 </Container>
diff --git a/src/routes/directory/[slug]/+page.svelte b/src/routes/directory/[slug]/+page.svelte
index ac9b605..bc75d0e 100644
--- a/src/routes/directory/[slug]/+page.svelte
+++ b/src/routes/directory/[slug]/+page.svelte
@@ -6,6 +6,7 @@
 
   // Components:
   import Container from '@/components/container.svelte';
+  import Grid from '@/components/grid.svelte';
   import Search from '@/components/search.svelte';
   import SvgCard from '@/components/svgCard.svelte';
 
@@ -17,7 +18,7 @@
     filteredSvgs = svgsByCategory.sort((a: iSVG, b: iSVG) => {
       return b.id - a.id;
     });
-}
+  }
 
   const searchSvgs = () => {
     return (filteredSvgs = svgsByCategory.filter((svg: iSVG) => {
@@ -28,10 +29,14 @@
 </script>
 
 <Container>
-  <Search bind:searchTerm on:input={searchSvgs} />
-  <div class="mt-4 grid grid-cols-6 gap-4">
+  <Search
+    bind:searchTerm
+    on:input={searchSvgs}
+    placeholder={`Search ${filteredSvgs.length} logos...`}
+  />
+  <Grid>
     {#each filteredSvgs as svg}
       <SvgCard svgInfo={svg} />
     {/each}
-  </div>
+  </Grid>
 </Container>