qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 15:17:58 +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: // Global styles:
import '../app.css'; import '../app.css';
import { cn } from '@/utils/cn';
import { ModeWatcher, mode } from 'mode-watcher'; import { ModeWatcher, mode } from 'mode-watcher';
import { sidebarCategoryCountStyles } from '@/ui/styles'; import { sidebarCategoryCountStyles } from '@/ui/styles';
import { sidebarItemStyles } from '@/ui/styles';
// Get categories: // Get categories:
import { svgs } from '@/data/svgs'; import { svgs } from '@/data/svgs';
@ -14,7 +16,7 @@
.filter((category, index, array) => array.indexOf(category) === index); .filter((category, index, array) => array.indexOf(category) === index);
// Get category counts: // Get category counts:
let categoryCounts:any = {}; let categoryCounts: Record<string, number> = {};
categories.forEach((category) => { categories.forEach((category) => {
categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length; categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
}); });
@ -28,8 +30,6 @@
// Layout: // Layout:
import Navbar from '@/components/navbar.svelte'; import Navbar from '@/components/navbar.svelte';
import { cn } from '@/utils/cn';
import { sidebarItemStyles } from '@/ui/styles';
</script> </script>
<ModeWatcher /> <ModeWatcher />
@ -46,7 +46,7 @@
> >
<div class="md:px-3 md:py-6"> <div class="md:px-3 md:py-6">
<nav <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 <a
href="/" href="/"
@ -62,6 +62,7 @@
{#each categories.sort() as category} {#each categories.sort() as category}
<a <a
href={`/directory/${category.toLowerCase()}`} href={`/directory/${category.toLowerCase()}`}
data-sveltekit-preload-data
class={cn( class={cn(
sidebarItemStyles, sidebarItemStyles,
data.pathname === `/directory/${category.toLowerCase()}` data.pathname === `/directory/${category.toLowerCase()}`
@ -70,7 +71,15 @@
)} )}
> >
<span>{category}</span> <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> </a>
{/each} {/each}
</nav> </nav>

4
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'; '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 = 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 = 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'; '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';