From e4b93afb8b93c2a10e23d9b1d316a57ac076c52f Mon Sep 17 00:00:00 2001
From: ridemountainpig <lin0905580802@gmail.com>
Date: Sun, 28 Apr 2024 22:08:41 +0800
Subject: [PATCH] feat: add category count script & ui style

---
 src/routes/+layout.svelte | 10 +++++++++-
 src/ui/styles.ts          |  3 +++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 92e1dfe..fb4844e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
   // Global styles:
   import '../app.css';
   import { ModeWatcher, mode } from 'mode-watcher';
+  import { sidebarCategoryCountStyles } from '@/ui/styles';
 
   // Get categories:
   import { svgs } from '@/data/svgs';
@@ -12,6 +13,12 @@
     .flatMap((svg) => (Array.isArray(svg.category) ? svg.category : [svg.category]))
     .filter((category, index, array) => array.indexOf(category) === index);
 
+  // Get category counts:
+  let categoryCounts:any = {};
+  categories.forEach((category) => {
+    categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
+  });
+
   // Toaster:
   import { Toaster } from 'svelte-sonner';
 
@@ -37,7 +44,7 @@
       'border-r border-neutral-200 dark:border-neutral-800'
     )}
   >
-    <div class="md:px-6 md:py-6">
+    <div class="md:px-3 md:py-6">
       <nav
         class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
       >
@@ -63,6 +70,7 @@
             )}
           >
             <span>{category}</span>
+            <span class={`hidden md:block ${sidebarCategoryCountStyles}`}>{categoryCounts[category]}</span>
           </a>
         {/each}
       </nav>
diff --git a/src/ui/styles.ts b/src/ui/styles.ts
index ce5c069..e793c17 100644
--- a/src/ui/styles.ts
+++ b/src/ui/styles.ts
@@ -9,3 +9,6 @@ export const badgeStyles =
 
 export const sidebarItemStyles =
   'flex w-full items-center space-x-3 justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40';
+
+export const sidebarCategoryCountStyles =
+'px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 text-xs font-mono';