qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

⚙️ Layout improvements + fix `categoryCounts` types

Browse Source
This commit is contained in:
pheralb 2024-04-29 10:02:43 +01:00
parent 317fe7573f
commit 783f8a28e4
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/+layout.svelte
View File

@ -4,8 +4,10 @@
// Global styles:
import '../app.css';
import { cn } from '@/utils/cn';
import { ModeWatcher, mode } from 'mode-watcher';
import { sidebarCategoryCountStyles } from '@/ui/styles';
import { sidebarItemStyles } from '@/ui/styles';
// Get categories:
import { svgs } from '@/data/svgs';
@ -14,7 +16,7 @@
.filter((category, index, array) => array.indexOf(category) === index);
// Get category counts:
let categoryCounts:any = {};
let categoryCounts: Record<string, number> = {};
categories.forEach((category) => {
categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
});
@ -28,8 +30,6 @@
// Layout:
import Navbar from '@/components/navbar.svelte';
import { cn } from '@/utils/cn';
import { sidebarItemStyles } from '@/ui/styles';
</script>
<ModeWatcher />
@ -46,7 +46,7 @@
>
<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"
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-6 md:px-0 pb-2 pt-2 md:pt-0"
>
<a
href="/"
@ -62,6 +62,7 @@
{#each categories.sort() as category}
<a
href={`/directory/${category.toLowerCase()}`}
data-sveltekit-preload-data
class={cn(
sidebarItemStyles,
data.pathname === `/directory/${category.toLowerCase()}`
@ -70,7 +71,15 @@
)}
>
<span>{category}</span>
<span class={`hidden md:block ${sidebarCategoryCountStyles}`}>{categoryCounts[category]}</span>
<span
class={cn(
sidebarCategoryCountStyles,
data.pathname === `/directory/${category.toLowerCase()}`
? 'border-neutral-300 dark:border-neutral-700'
: '',
'text-xs font-mono hidden md:inline'
)}>{categoryCounts[category]}</span
>
</a>
{/each}
</nav>

2
src/ui/styles.ts
View File

@ -8,7 +8,7 @@ export const badgeStyles =
'inline-flex items-center 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 hover:underline hover:bg-neutral-200 dark:hover:bg-neutral-700/50 transition-colors duration-100';
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';
'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 text-sm';
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';