updated sidebar

Author: abrulic

app/components/sidebar/mobile-sidebar.tsx

@@ -64,7 +64,7 @@ const MobileSidebarCloseButton = () => {
 		<button
 			type="button"
 			onClick={close}
-			className="absolute top-2 right-3 z-10 rounded-full p-2 text-[var(--color-text-normal)] transition-colors duration-200 hover:text-[var(--color-text-hover)]"
+			className="absolute top-1 right-1 z-10 rounded-full p-2 text-[var(--color-text-normal)] transition-colors duration-200 hover:text-[var(--color-text-hover)]"
 			aria-label="Close navigation menu"
 		>
 			<Icon name="X" className="size-5" />

app/components/sidebar/sidebar-content.tsx

@@ -18,11 +18,11 @@ export const SidebarContent = ({
 	const version = useCurrentVersion()
 	return (
 		<nav
-			className="max-h-[calc(100vh-var(--header-height))] min-h-0 flex-1 overflow-y-auto pr-4"
+			className="flex max-h-[calc(100vh-var(--header-height))] min-h-0 flex-col overflow-y-auto pr-4"
 			aria-label="Documentation navigation"
 		>
 			{documentationPages.length > 0 && (
-				<div className="mb-6 space-y-1">
+				<div className="my-3">
 					{documentationPages.map((p) => (
 						<DocumentationNavLink
 							key={p.slug}

app/components/sidebar/sidebar-items.tsx

@@ -14,17 +14,18 @@ type DocumentationNavLinkProps = {
 	to: string
 	depth?: number
 	onClick?: () => void
+	className?: string
 }
 
-export function DocumentationNavLink({ title, to, depth = 0, onClick }: DocumentationNavLinkProps) {
+export function DocumentationNavLink({ title, to, depth = 0, onClick, className }: DocumentationNavLinkProps) {
 	const indentClass = getIndentClass(depth)
 	return (
 		<NavLink
 			prefetch="intent"
 			to={to}
 			onClick={onClick}
 			className={({ isActive, isPending }) =>
-				`block rounded-md px-3 py-1 text-sm md:text-base ${indentClass}
+				`block rounded-md px-3 py-0.5 text-sm md:text-base ${indentClass} ${className}
          ${isPending ? "text-[var(--color-text-hover)]" : ""}
          ${
 						isActive
@@ -42,39 +43,47 @@ interface SectionItemProps {
 	item: SidebarSection
 	depth?: number
 	onItemClick?: () => void
+	className?: string
 }
 
 const SectionTitle = ({ title }: { title: string }) => {
 	return (
-		<h3 className="mb-3 ml-4 px-3 font-semibold text-[var(--color-text-active)] text-sm uppercase tracking-wide md:text-base">
+		<h3 className="my-2 ml-4 px-3 font-semibold text-[var(--color-text-active)] text-sm uppercase tracking-wide md:text-base">
 			{title}
 		</h3>
 	)
 }
 
-export const SectionItem = ({ item, depth = 0, onItemClick }: SectionItemProps) => {
+export const SectionItem = ({ item, depth = 0, onItemClick, className = "my-1" }: SectionItemProps) => {
 	const isTopLevel = depth === 0
 	const version = useCurrentVersion()
 	const content = (
 		<div>
 			{item.documentationPages.length > 0 && (
-				<div className="mb-4 space-y-1">
+				<div className="flex flex-col">
 					{item.documentationPages.map((doc) => (
 						<DocumentationNavLink
 							key={doc.slug}
 							title={doc.title}
 							depth={depth}
 							onClick={onItemClick}
 							to={buildSectionedTo(version, doc.slug)}
+							className={className}
 						/>
 					))}
 				</div>
 			)}
 
 			{item.subsections.length > 0 && (
-				<div className="space-y-4">
+				<div>
 					{item.subsections.map((subsection) => (
-						<SectionItem key={subsection.slug} item={subsection} depth={depth + 1} onItemClick={onItemClick} />
+						<SectionItem
+							key={subsection.slug}
+							item={subsection}
+							depth={depth + 1}
+							onItemClick={onItemClick}
+							className={className}
+						/>
 					))}
 				</div>
 			)}
@@ -86,15 +95,15 @@ export const SectionItem = ({ item, depth = 0, onItemClick }: SectionItemProps)
 			<AccordionItem
 				title={item.title}
 				titleElement="h5"
-				titleClassName=" font-semibold tracking-wide text-[var(--color-text-active)]"
+				titleClassName="font-semibold tracking-wide text-[var(--color-text-active)]"
 				content={content}
 				defaultOpen={true}
 			/>
 		)
 	}
 
 	return (
-		<div className="mb-6">
+		<div className="my-2 flex flex-col">
 			<SectionTitle title={item.title} />
 			{content}
 		</div>

app/ui/accordion.tsx

@@ -66,7 +66,7 @@ export const AccordionItem = ({
 	const [isOpen, setIsOpen] = useState(defaultOpen)
 
 	const buttonClasses =
-		"flex gap-2 items-center w-full p-2 transition-transform duration-200 text-[var(--color-text-normal)] hover:text-[var(--color-text-hover)] hover:cursor-pointer rounded-md"
+		"flex gap-2 items-center w-full px-2 transition-transform duration-200 text-[var(--color-text-normal)] hover:text-[var(--color-text-hover)] hover:cursor-pointer rounded-md"
 
 	const iconClasses = "w-4 h-4 transition-transform duration-300"
 

content/02-overview/04-subsection/01-project-structure.mdx

@@ -0,0 +1,163 @@
+---
+title: "Project Structure"
+summary: "Understanding the template organization"
+description: "Learn about the folder structure and key files in the documentation template."
+---
+
+## Folder Overview
+
+```
+docs/
+├── .content-collections/    # Auto-generated (dev mode)
+├── .github/                 # GitHub Actions workflows
+├── app/                     # React Router application
+│   ├── components/          # UI components
+│   ├── hooks/              # React hooks
+│   ├── routes/             # Route definitions
+│   ├── utils/              # Utility functions
+│   ├── routes.ts           # Route configuration
+│   └── tailwind.css        # Tailwind styles
+├── content/                # Your documentation (MDX/MD)
+├── generated-docs/         # Generated docs (production)
+├── public/                 # Static assets
+├── resources/              # Icons, fonts, assets
+├── content-collections.ts  # Content config
+├── generate-docs.ts        # Docs generation script
+├── Dockerfile              # Docker configuration
+├── fly.toml               # Fly.io deployment config
+├── .env.example           # Environment variables template
+└── package.json           # Dependencies and scripts
+```
+
+## Core Folders
+
+### `app/`
+
+The React Router v7 application that powers your documentation site.
+
+**Key folders:**
+- **`components/`** - Reusable UI components (Command K, Code blocks, Sidebar, MDXWrapper, etc.)
+- **`hooks/`** - Custom React hooks for documentation features
+- **`routes/`** - Route components (homepage, documentation layout, documentation pages)
+- **`utils/`** - Helper functions and utilities
+- **`tailwind.css`** - Global styles and Tailwind configuration
+
+### `resources/`
+
+Static resources used throughout the site:
+- SVG icons
+- Custom fonts
+- Other design assets
+
+Feel free to add your own assets here.
+
+### `content/`
+
+**This is where your documentation lives.** All `.md` and `.mdx` files should be placed here following the content organization structure (see Content Guide).
+
+### `generated-docs/`
+
+**Production-only folder.** Contains processed documentation organized by version:
+- `main/` - Latest docs from main branch (no tags)
+- `v1.0.0/`, `v2.0.0/` - Versioned documentation
+
+This folder is created by the `generate-docs.ts` script and used during production builds.
+
+### `.content-collections/`
+
+**Development-only folder (auto-generated).** Contains processed content for hot reloading. Don't edit this folder manually—it's regenerated automatically.
+
+## Key Files
+
+### `package.json`
+
+Contains important scripts:
+
+```json
+{
+  "scripts": {
+		...
+    "generate:docs": "tsx generate-docs.ts",
+    "content-collections:build": "content-collections build"
+  }
+}
+```
+
+### `content-collections.ts`
+
+Configures how MDX/MD files are processed. Defines:
+- Document schema (frontmatter fields)
+- File patterns to match
+- Content transformations
+
+### `generate-docs.ts`
+
+Script that generates versioned documentation from your git releases. Uses:
+- Git commands to fetch releases/tags
+- Processes and organizes docs by version
+
+### `fly.toml`
+
+Fly.io deployment configuration. Defines:
+- App name
+- Region
+- Build settings
+- Health checks
+- Environment variables
+
+### `Dockerfile`
+
+Docker configuration for building and running the app in production.
+
+### `.env.example`
+
+Template for environment variables:
+
+```env
+GITHUB_REPO_URL=https://github.com/your-org/your-repo
+```
+
+Copy this to `.env` and fill in your values.
+
+### `routes.ts`
+
+React Router configuration file that defines:
+- Route patterns
+- Layout hierarchy
+- Route metadata
+
+## Components You'll Use
+
+### `MDXWrapper`
+
+Wraps your MDX content with styling. Located in `app/components/`.
+
+### Custom MDX Components
+
+Pre-built components you can use in your MDX:
+- `<InfoAlert>` - Information callouts
+- `<WarningAlert>` - Warning messages
+
+To use custom components in MDX, pass them to the `components` prop in `MDXContent`.
+
+### Command K
+
+Built-in search component that indexes your documentation automatically.
+
+### Sidebar
+
+Auto-generated from your content structure. Respects the ordering prefixes in your filenames.
+
+## Customization Points
+
+All FIXME comments mark places you'll want to customize:
+- Brand colors in `tailwind.css`
+- Package name references
+- GitHub repository links
+- Site metadata
+
+Find them with:
+
+```bash
+grep -r "FIXME" --include="*.ts" --include="*.tsx" --include="*.css"
+```

content/02-overview/04-subsection/index.md

@@ -0,0 +1,3 @@
+---
+title: "Subsection"
+---