diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx index cbbdfd3..2b51a02 100644 --- a/app/(app)/layout.tsx +++ b/app/(app)/layout.tsx @@ -21,7 +21,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => { {/* Content + Right Sidebar row */}
-
+
{children}
diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx index 97ab7cd..f8d2224 100644 --- a/app/(app)/page.tsx +++ b/app/(app)/page.tsx @@ -1,73 +1,20 @@ -import { TagLink } from "@/components/tag-link"; +import { QuestionCard } from "@/components/question-card"; +import { getAllQuestions } from "@/lib/data/questions"; -const HomePage = () => ( - <> -

All Questions

+const HomePage = async () => { + const questions = await getAllQuestions(); -
- {[1, 2, 3, 4].map((questionIndex) => ( -
-
- - Question #{questionIndex} - - - Asked {questionIndex} hours ago - -
+ return ( + <> +

All Questions

-

- How to implement a sticky sidebar in Next.js with Tailwind CSS? -

- -

- I'm building a dashboard layout and need the sidebar to remain - visible while scrolling the main content. The sidebar should stick - below the navbar and scroll independently if its content overflows. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - {/* Tags */} -
- {["tailwind", "nextjs"].map((tag) => ( - - ))} -
- - {/* Stats */} -
- - - {questionIndex * 7} - {" "} - votes - - - - {questionIndex * 3} - {" "} - answers - - - - {questionIndex * 47} - {" "} - views - -
-
- ))} - - {/* End marker */} -
- You've reached the end — sidebar should still be sticky! +
+ {questions.map((question) => ( + + ))}
-
- -); + + ); +}; export default HomePage; diff --git a/biome.json b/biome.json index 8d34e5c..42dab1e 100644 --- a/biome.json +++ b/biome.json @@ -1,5 +1,5 @@ { - "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json", + "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json", "vcs": { "enabled": true, "clientKind": "git", diff --git a/components/navigation/desktop-topbar.tsx b/components/navigation/desktop-topbar.tsx index 069a12e..2376f1c 100644 --- a/components/navigation/desktop-topbar.tsx +++ b/components/navigation/desktop-topbar.tsx @@ -1,5 +1,5 @@ import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs"; -import { ThemeToggle } from "@/components/navigation/theme-toggle"; +import { GlobalSearch } from "@/components/search/global-search"; import { Button } from "@/components/ui/button"; export function DesktopTopBar() { @@ -8,13 +8,12 @@ export function DesktopTopBar() { {/* Left section: matches main content structure (padding + max-w-5xl centering) */}
-

Global Search

+
{/* Right section: matches right sidebar width on xl */}
- diff --git a/components/navigation/left-sidebar.tsx b/components/navigation/left-sidebar.tsx index c89428f..b131b01 100644 --- a/components/navigation/left-sidebar.tsx +++ b/components/navigation/left-sidebar.tsx @@ -6,6 +6,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { LeftSidebarToggle } from "@/components/navigation/left-sidebar-toggle"; import { NAV_LINKS } from "@/components/navigation/nav-links.constants"; +import { ThemeToggle } from "@/components/navigation/theme-toggle"; import { ThemedFullLogo } from "@/components/navigation/themed-full-logo"; import { Sidebar, @@ -95,14 +96,16 @@ export function LeftSidebar() { - {/* Footer: UserButton + Toggle */} - + {/* Footer: ThemeToggle + UserButton + Toggle */} + +
- + - +
+ + +
- - - - - - +
+ +
+
+ + + + + + +
diff --git a/components/navigation/mobile-topbar.tsx b/components/navigation/mobile-topbar.tsx index 8769632..dc511d7 100644 --- a/components/navigation/mobile-topbar.tsx +++ b/components/navigation/mobile-topbar.tsx @@ -1,6 +1,5 @@ import Link from "next/link"; import { MobileNav } from "@/components/navigation/mobile-nav"; -import { ThemeToggle } from "@/components/navigation/theme-toggle"; export function MobileTopBar() { return ( @@ -11,10 +10,7 @@ export function MobileTopBar() { -
- - -
+ ); } diff --git a/components/navigation/theme-toggle.tsx b/components/navigation/theme-toggle.tsx index 3901ec6..2f58431 100644 --- a/components/navigation/theme-toggle.tsx +++ b/components/navigation/theme-toggle.tsx @@ -5,26 +5,39 @@ import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; -export function ThemeToggle() { +type ThemeToggleSize = "sm" | "default" | "lg"; + +const sizeConfig = { + sm: { button: "icon-sm", icon: "size-5", skeleton: "size-8" }, + default: { button: "icon", icon: "size-5", skeleton: "size-9" }, + lg: { button: "icon-lg", icon: "size-6", skeleton: "size-10" }, +} as const; + +type ThemeToggleProps = { + size?: ThemeToggleSize; +}; + +export function ThemeToggle({ size = "sm" }: ThemeToggleProps) { const { theme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); + const config = sizeConfig[size]; useEffect(() => setMounted(true), []); if (!mounted) { - return