|
| 1 | +--- |
| 2 | +import { getCollection } from "astro:content"; |
| 3 | +
|
| 4 | +interface Props { |
| 5 | + activeCategoryPath?: string; // e.g. "Java/Spring" |
| 6 | +} |
| 7 | +
|
| 8 | +const { activeCategoryPath } = Astro.props; |
| 9 | +
|
| 10 | +const allPosts = await getCollection("posts", ({ data }) => !data.draft && data.publish !== false); |
| 11 | +
|
| 12 | +// Build Tree Structure |
| 13 | +interface CategoryNode { |
| 14 | + name: string; |
| 15 | + fullPath: string; |
| 16 | + count: number; |
| 17 | + children: Record<string, CategoryNode>; |
| 18 | +} |
| 19 | +
|
| 20 | +const tree: Record<string, CategoryNode> = {}; |
| 21 | +
|
| 22 | +allPosts.forEach(post => { |
| 23 | + const parts = post.data.category.split(">").map(s => s.trim()); |
| 24 | + let currentLevel = tree; |
| 25 | + let currentPath = ""; |
| 26 | +
|
| 27 | + parts.forEach((part, index) => { |
| 28 | + currentPath = index === 0 ? part : `${currentPath}/${part}`; |
| 29 | + if (!currentLevel[part]) { |
| 30 | + currentLevel[part] = { |
| 31 | + name: part, |
| 32 | + fullPath: currentPath, |
| 33 | + count: 0, |
| 34 | + children: {} |
| 35 | + }; |
| 36 | + } |
| 37 | + currentLevel[part].count++; |
| 38 | + currentLevel = currentLevel[part].children; |
| 39 | + }); |
| 40 | +}); |
| 41 | +
|
| 42 | +const sortedRootCategories = Object.values(tree).sort((a, b) => a.name.localeCompare(b.name)); |
| 43 | +const totalPosts = allPosts.length; |
| 44 | +--- |
| 45 | + |
| 46 | +<div class="category-sidebar"> |
| 47 | + <!-- Mobile Carousel (Shown only on small screens) --> |
| 48 | + <div class="lg:hidden mb-8"> |
| 49 | + <div class="flex overflow-x-auto pb-4 gap-2 no-scrollbar scroll-smooth"> |
| 50 | + <a |
| 51 | + href="/blog" |
| 52 | + class={`whitespace-nowrap px-4 py-1.5 rounded-full border text-sm transition-colors ${ |
| 53 | + !activeCategoryPath |
| 54 | + ? "bg-[var(--color-accent)] border-[var(--color-accent)] text-white" |
| 55 | + : "border-[var(--color-border)] text-[var(--color-text-secondary)]" |
| 56 | + }`} |
| 57 | + > |
| 58 | + All ({totalPosts}) |
| 59 | + </a> |
| 60 | + {sortedRootCategories.map(cat => ( |
| 61 | + <a |
| 62 | + href={`/blog/category/${cat.fullPath}`} |
| 63 | + class={`whitespace-nowrap px-4 py-1.5 rounded-full border text-sm transition-colors ${ |
| 64 | + activeCategoryPath === cat.fullPath || activeCategoryPath?.startsWith(`${cat.fullPath}/`) |
| 65 | + ? "bg-[var(--color-accent)] border-[var(--color-accent)] text-white" |
| 66 | + : "border-[var(--color-border)] text-[var(--color-text-secondary)]" |
| 67 | + }`} |
| 68 | + > |
| 69 | + {cat.name} ({cat.count}) |
| 70 | + </a> |
| 71 | + ))} |
| 72 | + </div> |
| 73 | + </div> |
| 74 | + |
| 75 | + <!-- Desktop Sidebar --> |
| 76 | + <nav class="hidden lg:flex flex-col gap-1"> |
| 77 | + <h2 class="text-xs font-bold uppercase tracking-wider text-[var(--color-text-secondary)] mb-4 px-3">Categories</h2> |
| 78 | + <ul class="space-y-1"> |
| 79 | + <li> |
| 80 | + <a |
| 81 | + href="/blog" |
| 82 | + class={`flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors duration-200 no-underline ${ |
| 83 | + !activeCategoryPath |
| 84 | + ? "bg-[var(--color-accent)]/10 text-[var(--color-accent)] font-semibold" |
| 85 | + : "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text)]" |
| 86 | + }`} |
| 87 | + > |
| 88 | + <span>All Posts</span> |
| 89 | + <span class="text-xs opacity-60">{totalPosts}</span> |
| 90 | + </a> |
| 91 | + </li> |
| 92 | + { |
| 93 | + sortedRootCategories.map((cat) => { |
| 94 | + const hasChildren = Object.keys(cat.children).length > 0; |
| 95 | + const isActive = activeCategoryPath === cat.fullPath; |
| 96 | + const isParentOfActive = activeCategoryPath?.startsWith(`${cat.fullPath}/`); |
| 97 | + const isOpen = isActive || isParentOfActive; |
| 98 | + |
| 99 | + return ( |
| 100 | + <li class="category-item"> |
| 101 | + <div class="flex items-center"> |
| 102 | + <a |
| 103 | + href={`/blog/category/${cat.fullPath}`} |
| 104 | + class={`flex-1 flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors duration-200 no-underline ${ |
| 105 | + isActive |
| 106 | + ? "bg-[var(--color-accent)]/10 text-[var(--color-accent)] font-semibold" |
| 107 | + : isParentOfActive |
| 108 | + ? "text-[var(--color-accent)] font-medium" |
| 109 | + : "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text)]" |
| 110 | + }`} |
| 111 | + > |
| 112 | + <span class="capitalize">{cat.name}</span> |
| 113 | + <span class="text-xs opacity-60">{cat.count}</span> |
| 114 | + </a> |
| 115 | + </div> |
| 116 | + |
| 117 | + {hasChildren && ( |
| 118 | + <ul class={`ml-4 mt-1 space-y-1 border-l border-[var(--color-border)] ${isOpen ? 'block' : 'hidden'}`}> |
| 119 | + {Object.values(cat.children).sort((a, b) => a.name.localeCompare(b.name)).map(child => ( |
| 120 | + <li> |
| 121 | + <a |
| 122 | + href={`/blog/category/${child.fullPath}`} |
| 123 | + class={`flex items-center justify-between pl-4 pr-3 py-1.5 rounded-r-lg text-xs transition-colors duration-200 no-underline ${ |
| 124 | + activeCategoryPath === child.fullPath |
| 125 | + ? "text-[var(--color-accent)] font-semibold border-l-2 border-[var(--color-accent)] -ml-[1px]" |
| 126 | + : "text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]" |
| 127 | + }`} |
| 128 | + > |
| 129 | + <span class="capitalize">{child.name}</span> |
| 130 | + <span class="text-xs opacity-60">{child.count}</span> |
| 131 | + </a> |
| 132 | + </li> |
| 133 | + ))} |
| 134 | + </ul> |
| 135 | + )} |
| 136 | + </li> |
| 137 | + ); |
| 138 | + }) |
| 139 | + } |
| 140 | + </ul> |
| 141 | + </nav> |
| 142 | +</div> |
| 143 | + |
| 144 | +<style> |
| 145 | + .no-scrollbar::-webkit-scrollbar { |
| 146 | + display: none; |
| 147 | + } |
| 148 | + .no-scrollbar { |
| 149 | + -ms-overflow-style: none; |
| 150 | + scrollbar-width: none; |
| 151 | + } |
| 152 | +</style> |
0 commit comments