From 49586890b7d7009b6893752139d56a28a3d93f99 Mon Sep 17 00:00:00 2001 From: "Irsyad A. Panjaitan" Date: Mon, 28 Oct 2024 07:04:56 +0700 Subject: [PATCH] lfg --- app/blocks/sidebar/app-sidebar.tsx | 51 +++++++++----- app/blocks/sidebar/sidebar-04/page.tsx | 2 +- app/blocks/sidebar/sidebar-05/layout.tsx | 66 +++++++++++++++++++ app/blocks/sidebar/sidebar-05/page.tsx | 12 ++++ components/navbar.tsx | 4 +- components/ui/sidebar.tsx | 2 +- .../docs/components/layouts/sidebar.mdx | 18 +++++ 7 files changed, 133 insertions(+), 22 deletions(-) create mode 100644 app/blocks/sidebar/sidebar-05/layout.tsx create mode 100644 app/blocks/sidebar/sidebar-05/page.tsx diff --git a/app/blocks/sidebar/app-sidebar.tsx b/app/blocks/sidebar/app-sidebar.tsx index ab19fe69..cae5f6d2 100644 --- a/app/blocks/sidebar/app-sidebar.tsx +++ b/app/blocks/sidebar/app-sidebar.tsx @@ -5,11 +5,11 @@ import * as React from "react" import { useTheme } from "@/components/theme-provider" import { IconArchive, - IconBag, IconBrandApple, IconChevronLgDown, IconCirclePerson, IconCreditCard, + IconCube, IconDashboard, IconEnvelope, IconLogout, @@ -23,7 +23,7 @@ import { IconSun } from "justd-icons" import { usePathname } from "next/navigation" -import { Avatar, Button, Link, Menu, Sidebar, useSidebar } from "ui" +import { Avatar, Button, Link, Menu, Modal, Sidebar, useSidebar } from "ui" export function AppSidebar(props: React.ComponentProps) { const { theme, setTheme } = useTheme() @@ -55,33 +55,48 @@ export function AppSidebar(props: React.ComponentProps) { Newsletter - + Messages + - + All Projects - - Create New Project - + {pathname === "/blocks/sidebar/sidebar-05" ? ( + + Create New Project + + + + Close + + + + ) : ( + + Create New Project + + )} Archived Projects - - - Team Overview - - - Add New Member - - - Manage Roles - - + {pathname !== "/blocks/sidebar/sidebar-05" && ( + + + Team Overview + + + Add New Member + + + Manage Roles + + + )} diff --git a/app/blocks/sidebar/sidebar-04/page.tsx b/app/blocks/sidebar/sidebar-04/page.tsx index ee81d24b..b7d4ad00 100644 --- a/app/blocks/sidebar/sidebar-04/page.tsx +++ b/app/blocks/sidebar/sidebar-04/page.tsx @@ -4,7 +4,7 @@ import type { Metadata } from "next" import { Heading } from "ui" export const metadata: Metadata = { - title: "Sidebar Floating" + title: "Sidebar Default Collapsed" } export default function Page() { diff --git a/app/blocks/sidebar/sidebar-05/layout.tsx b/app/blocks/sidebar/sidebar-05/layout.tsx new file mode 100644 index 00000000..47de1708 --- /dev/null +++ b/app/blocks/sidebar/sidebar-05/layout.tsx @@ -0,0 +1,66 @@ +"use client" + +import * as React from "react" + +import { AppSidebar } from "@/app/blocks/sidebar/app-sidebar" +import { + IconChevronLgDown, + IconCirclePerson, + IconLogout, + IconSearch, + IconSettings, + IconShield +} from "justd-icons" +import { Avatar, Breadcrumbs, Button, Menu, Separator, Sidebar } from "ui" + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( + + + +
+ + + + + Dashboard + + Newsletter + + + +
+ + + + + + + + + + Profile + + + + Settings + + + + Security + + + + Log out + + + +
+
+
{children}
+ + + ) +} diff --git a/app/blocks/sidebar/sidebar-05/page.tsx b/app/blocks/sidebar/sidebar-05/page.tsx new file mode 100644 index 00000000..465bbdec --- /dev/null +++ b/app/blocks/sidebar/sidebar-05/page.tsx @@ -0,0 +1,12 @@ +import React from "react" + +import type { Metadata } from "next" +import { Heading } from "ui" + +export const metadata: Metadata = { + title: "Sidebar With Modal" +} + +export default function Page() { + return Messages +} diff --git a/components/navbar.tsx b/components/navbar.tsx index 3b7a6076..eade71d7 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -79,7 +79,7 @@ export function Navbar() { Colors - + Icons Charts - + Themes diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx index 119bb492..201c7c27 100644 --- a/components/ui/sidebar.tsx +++ b/components/ui/sidebar.tsx @@ -232,7 +232,7 @@ const Sidebar = ({ } const itemStyles = tv({ - base: "group/menu-item grid [&>[data-slot=icon]]:size-4 col-span-full [&>[data-slot=icon]]:shrink-0 items-center [&>[data-slot=icon]]:text-muted-fg relative rounded-lg lg:text-sm leading-6", + base: "group/menu-item grid cursor-pointer [&>[data-slot=icon]]:size-4 col-span-full [&>[data-slot=icon]]:shrink-0 items-center [&>[data-slot=icon]]:text-muted-fg relative rounded-lg lg:text-sm leading-6", variants: { collapsed: { true: [ diff --git a/resources/content/docs/components/layouts/sidebar.mdx b/resources/content/docs/components/layouts/sidebar.mdx index f1a7b8c4..05194cbb 100644 --- a/resources/content/docs/components/layouts/sidebar.mdx +++ b/resources/content/docs/components/layouts/sidebar.mdx @@ -294,3 +294,21 @@ export function AppSidebar() { ) } ``` + +## Modal +Sometimes, you may want a modal to open when a user clicks a sidebar item. You can control the modal's visibility using the `isOpen` prop, which is especially useful when managing multiple modals. However, if you only have one or two modals, you can simplify by wrapping them directly within the `` component like this: +``` + + All Projects + + Create New Project + + + + Close + + + + +``` +See the [Sidebar 05](/blocks/sidebar/sidebar-05) example for a more detailed implementation.