anotherhadi/blog
1
Fork 0
mirror of https://github.com/anotherhadi/blog.git synced 2026-05-20 13:32:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Edit nav & add folder pages

Browse Source 
Signed-off-by: Hadi <hadi@example.com>
This commit is contained in:
Hadi
2026-04-29 16:23:51 +02:00
parent eea8c3e9be
commit 0e83788a15
4 changed files with 249 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NoteNavSidebar.svelte
+44 -28
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { slide } from "svelte/transition";
import { untrack } from "svelte";
interface Note {
id: string;
@@ -9,11 +10,12 @@
interface Props {
notes: Note[];
currentEntry: Note;
currentEntry?: Note;
currentCategory?: string;
categories: string[];
}
const { notes, currentEntry, categories }: Props = $props();
const { notes, currentEntry, currentCategory, categories }: Props = $props();
let search = $state("");
@@ -46,8 +48,12 @@
: title.includes(term) || tags.join(",").includes(term);
}
const activeCategory = $derived(
currentCategory ?? (currentEntry ? getCategory(currentEntry) : null),
);
let openCategories = $state<string[]>(
categories.filter((c) => c === getCategory(currentEntry)),
untrack(() => categories.filter((c) => c === activeCategory)),
);
function toggle(cat: string) {
@@ -99,32 +105,42 @@
(n) => getCategory(n) === cat && matchesSearch(n),
)}
{#if catNotes.length > 0 || !search}
{@const isFolder = notes.some((n) => n.id.includes("/") && getCategory(n) === cat)}
<div>
<!-- Category header -->
<button
onclick={() => toggle(cat)}
class="w-full flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-base-200/40 transition-colors duration-150 group"
>
<svg
class="w-3 h-3 text-base-content/35 shrink-0 transition-transform duration-200"
class:rotate-90={openCategories.includes(cat)}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
<div class="flex items-center w-full">
<button
onclick={() => toggle(cat)}
class="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-base-200/40 transition-colors duration-150 shrink-0"
>
<path d="m9 18 6-6-6-6" />
</svg>
<span class="text-primary/50 font-mono text-xs shrink-0">/</span>
<span
class="font-bold tracking-tight text-sm truncate text-base-content/80"
>
{cat}
</span>
</button>
<svg
class="w-3 h-3 text-base-content/35 shrink-0 transition-transform duration-200"
class:rotate-90={openCategories.includes(cat)}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
<span class="text-primary/50 font-mono text-xs shrink-0">/</span>
</button>
{#if isFolder}
<a
href={`/notes/${cat}`}
class="flex-1 min-w-0 px-1 py-1 rounded-md hover:bg-base-200/40 transition-colors duration-150 font-bold tracking-tight text-sm truncate text-base-content/80 hover:text-base-content"
>
{cat}
</a>
{:else}
<span class="flex-1 min-w-0 px-1 py-1 font-bold tracking-tight text-sm truncate text-base-content/80">
{cat}
</span>
{/if}
</div>
<!-- Notes list -->
{#if openCategories.includes(cat)}
@@ -138,12 +154,12 @@
href={`/notes/${note.id}`}
title={note.data.title}
class="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-mono truncate transition-colors duration-150
{note.id === currentEntry.id
{currentEntry && note.id === currentEntry.id
? 'text-primary/90 bg-primary/10'
: 'text-base-content/45 hover:text-base-content/80 hover:bg-base-200/40'}"
>
<span class="shrink-0 font-mono text-base-content/20">
{note.id === currentEntry.id ? "▸" : "–"}
{currentEntry && note.id === currentEntry.id ? "▸" : "–"}
</span>
<span class="truncate">{note.data.title}</span>
</a>