lfg

irsyadadl · Oct 28, 2024 · 4958689 · 4958689
1 parent e007a63
commit 4958689
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 22 deletions.
diff --git 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<typeof Sidebar>) {
   const { theme, setTheme } = useTheme()
@@ -55,33 +55,48 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
           <SidebarItem icon={IconEnvelope} href="/blocks/sidebar/sidebar-04" badge="49.67K">
             Newsletter
           </SidebarItem>
-          <Sidebar.Item icon={IconMessage} href="#" badge={35}>
+          <Sidebar.Item icon={IconMessage} href="/blocks/sidebar/sidebar-05" badge={35}>
             Messages
           </Sidebar.Item>
         </Sidebar.Section>
+
         <Sidebar.Section title="Projects">
-          <Sidebar.Item icon={IconBag} href="#">
+          <Sidebar.Item icon={IconCube} href="#">
             All Projects
           </Sidebar.Item>
-          <Sidebar.Item icon={IconPlus} href="#">
-            Create New Project
-          </Sidebar.Item>
+          {pathname === "/blocks/sidebar/sidebar-05" ? (
+            <Modal>
+              <Sidebar.Item icon={IconPlus}>Create New Project</Sidebar.Item>
+              <Modal.Content>
+                <Modal.Header title="New Project" />
+                <Modal.Footer>
+                  <Modal.Close>Close</Modal.Close>
+                </Modal.Footer>
+              </Modal.Content>
+            </Modal>
+          ) : (
+            <Sidebar.Item icon={IconPlus} href="#">
+              Create New Project
+            </Sidebar.Item>
+          )}
           <Sidebar.Item icon={IconArchive} href="#">
             Archived Projects
           </Sidebar.Item>
         </Sidebar.Section>
 
-        <Sidebar.Section collapsible title="Team">
-          <Sidebar.Item icon={IconPeople} href="#">
-            Team Overview
-          </Sidebar.Item>
-          <Sidebar.Item icon={IconPersonAdd} href="#">
-            Add New Member
-          </Sidebar.Item>
-          <Sidebar.Item icon={IconCirclePerson} href="#">
-            Manage Roles
-          </Sidebar.Item>
-        </Sidebar.Section>
+        {pathname !== "/blocks/sidebar/sidebar-05" && (
+          <Sidebar.Section collapsible title="Team">
+            <Sidebar.Item icon={IconPeople} href="#">
+              Team Overview
+            </Sidebar.Item>
+            <Sidebar.Item icon={IconPersonAdd} href="#">
+              Add New Member
+            </Sidebar.Item>
+            <Sidebar.Item icon={IconCirclePerson} href="#">
+              Manage Roles
+            </Sidebar.Item>
+          </Sidebar.Section>
+        )}
       </Sidebar.Content>
       <Sidebar.Footer className="lg:flex lg:flex-row hidden items-center">
         <Menu>

diff --git 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
@@ -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 (
+    <Sidebar.Provider>
+      <AppSidebar />
+      <Sidebar.Inset>
+        <header className="sticky justify-between sm:justify-start top-0 h-[3.57rem] px-4 flex items-center gap-x-2">
+          <span className="flex items-center gap-x-4">
+            <Sidebar.Trigger className="-mx-2" />
+            <Separator className="h-6 md:block hidden" orientation="vertical" />
+            <Breadcrumbs className="md:flex hidden">
+              <Breadcrumbs.Item href="/blocks/sidebar/sidebar-01">Dashboard</Breadcrumbs.Item>
+
+              <Breadcrumbs.Item>Newsletter</Breadcrumbs.Item>
+            </Breadcrumbs>
+          </span>
+
+          <div className="flex sm:hidden items-center gap-x-2">
+            <Button appearance="plain" aria-label="Search..." size="square-petite">
+              <IconSearch />
+            </Button>
+            <Menu>
+              <Menu.Trigger aria-label="Profile" className="flex items-center gap-x-2 group">
+                <Avatar size="small" shape="circle" src="/images/sidebar/profile-slash.jpg" />
+                <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
+              </Menu.Trigger>
+              <Menu.Content className="min-w-[--trigger-width]">
+                <Menu.Item href="#">
+                  <IconCirclePerson />
+                  Profile
+                </Menu.Item>
+                <Menu.Item href="#">
+                  <IconSettings />
+                  Settings
+                </Menu.Item>
+                <Menu.Item href="#">
+                  <IconShield />
+                  Security
+                </Menu.Item>
+                <Menu.Item href="#">
+                  <IconLogout />
+                  Log out
+                </Menu.Item>
+              </Menu.Content>
+            </Menu>
+          </div>
+        </header>
+        <div className="p-4 lg:p-6">{children}</div>
+      </Sidebar.Inset>
+    </Sidebar.Provider>
+  )
+}
diff --git a/app/blocks/sidebar/sidebar-05/page.tsx 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 <Heading>Messages</Heading>
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -79,7 +79,7 @@ export function Navbar() {
                     <NavLink isNextLink isActive={pathname === "/colors"} href="/colors">
                       Colors
                     </NavLink>
-                    <NavLink isActive={pathname === "/icons"} href="/icons">
+                    <NavLink isNextLink isActive={pathname === "/icons"} href="/icons">
                       Icons
                     </NavLink>
                     <NavLink
@@ -89,7 +89,7 @@ export function Navbar() {
                     >
                       Charts
                     </NavLink>
-                    <NavLink isActive={pathname === "/themes"} href="/themes">
+                    <NavLink isNextLink isActive={pathname === "/themes"} href="/themes">
                       Themes
                     </NavLink>
                   </Collection>

diff --git 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
@@ -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 `<Modal />` component like this:
+```
+<Sidebar.Section title="Projects">
+  <Sidebar.Item icon={IconCube} href='#'>All Projects</Sidebar.Item>
+  <Modal>
+    <Sidebar.Item icon={IconPlus}>Create New Project</Sidebar.Item>
+    <Modal.Content>
+      <Modal.Header title="New Project" />
+      <Modal.Footer>
+        <Modal.Close>Close</Modal.Close>
+      </Modal.Footer>
+    </Modal.Content>
+  </Modal>
+</Sidebar.Section>
+```
+See the [Sidebar 05](/blocks/sidebar/sidebar-05) example for a more detailed implementation.