+
@@ -48,9 +47,9 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
fluid
theme={{
root: {
- base: "sticky top-0 z-[60] mx-auto flex w-full items-center justify-between border-b border-gray-200 bg-white px-4 py-2.5 text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",
+ base: "sticky top-0 z-[60] mx-auto flex w-full items-center justify-between border-b border-gray-200 bg-white text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",
inner: {
- base: "mx-auto flex w-full flex-wrap items-center justify-between",
+ base: "mx-auto flex w-full max-w-8xl flex-wrap items-center justify-between px-4 py-2.5 lg:px-4",
},
},
}}
@@ -80,7 +79,7 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
Flowbite React
-
@@ -106,29 +105,28 @@ function DocsSidebar({ isCollapsed, setCollapsed }: DocsLayoutState) {
<>
-
-
+
{DOCS_SIDEBAR.map((section) => (
-
+
{section.items.map((item) => (
-
+ setCollapsed(true)}
+ {...item}
+ />
))}
))}
-
-
+
+
{!isCollapsed && (
) {
- const pathname = usePathname();
-
+function SidebarSection({ title, children }: PropsWithChildren<{ title: string }>) {
return (
-
-
-
- {title}
-
-
- {children}
-
-
-
+
+
+ {title}
+
+
+
);
}
-function SidebarItem({ title, href, isNew, isExternal }: DocsSidebarItem) {
+function SidebarItem({ title, href, isNew, isExternal, onClick }: DocsSidebarItem & { onClick(): void }) {
return (
-
- {isNew ? {title} : title}
-
+
+
+ {isNew ? {title} : title}
+
+
);
}
-function SidebarLink({ children, href, isExternal }: PropsWithChildren<{ href: string; isExternal?: boolean }>) {
+function SidebarLink({
+ children,
+ href,
+ isExternal,
+ onClick,
+}: PropsWithChildren<{ href: string; isExternal?: boolean; onClick(): void }>) {
const pathname = usePathname();
return (
-
*]:px-0",
+ "flex flex-wrap items-center py-2 font-medium",
pathname === href
? "text-primary-700 hover:text-primary-700 dark:text-primary-500"
: "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
)}
+ onClick={onClick}
>
{children}
-
+
);
}
@@ -202,9 +189,9 @@ function NewBadge({ children }: PropsWithChildren) {
return (
{children}
-
- New
-
+
+ new
+
);
}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 0f324bdc0..11ba98e32 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -16,7 +16,7 @@ import {
export default function HomePage() {
return (
-
+ {/*
*/}
diff --git a/apps/web/components/homepage/components-section.tsx b/apps/web/components/homepage/components-section.tsx
index 97c2a3e0f..84785f1a8 100644
--- a/apps/web/components/homepage/components-section.tsx
+++ b/apps/web/components/homepage/components-section.tsx
@@ -8,7 +8,7 @@ import { COMPONENTS_DATA } from "~/data/components";
export function ComponentsSection() {
return (