Feature Description

Refactor the sidebar and menu components to use semantic CSS classes (via Tailwind's @apply) instead of long strings of inline utility classes.

Problem/Solution

The Problem:
Currently, every navigation link in the sidebar carries dozens of inline Tailwind classes (including complex variants like hx:contrast-more, hx:dark:hover, and vendor-specific utility brackets).

• Redundancy: In sites with large directory structures (e.g., hundreds of pages), the HTML source becomes bloated with thousands of repeated class strings.
• Maintenance: It is extremely difficult to read the templates or customize the sidebar UI without wading through a "wall of text."
• DOM Size: Excessive class names increase the total document size, potentially affecting SEO and browser rendering performance for very large documentation sites.

The Solution:
Extract common UI patterns (like sidebar links, active states, and hover effects) into a CSS/SCSS file using @apply. This would replace 20+ classes with a single semantic class like .hx-sidebar-link.

Alternatives Considered

• Post-processing: Using a minifier, but that doesn't solve the template readability issue for developers.
• VS Code Plugins: Using "Tailwind Fold" to hide the mess, but this is a local workaround and doesn't improve the code quality for the theme itself.

Additional Context

For example, a single link currently looks like this:
<a class="hx:flex hx:items-center hx:justify-between hx:gap-2 hx:cursor-pointer hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:transition-colors ... [20+ more classes]">

Simplifying this would make the theme much more "hacker-friendly" for those who want to extend the layouts.