qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-09-20 11:16:19 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #323 from ridemountainpig/category-count

Browse Source 
Add category count to the sidebar
This commit is contained in:
Pablo Hdez 2024-04-29 10:15:12 +02:00 committed by GitHub
commit 91ed8bfbbf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/routes/+layout.svelte
View File

@ -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>

3
src/ui/styles.ts
View File

@ -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';