✨ Design improvements.

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>

src/components/grid.svelte

@@ -0,0 +1,3 @@
+<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-6">
+  <slot />
+</div>

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>

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>

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>