diff --git a/app/blocks/navbar/navbar-01/app-navbar.tsx b/app/blocks/navbar/app-navbar.tsx similarity index 83% rename from app/blocks/navbar/navbar-01/app-navbar.tsx rename to app/blocks/navbar/app-navbar.tsx index 68678a67..bcb9093e 100644 --- a/app/blocks/navbar/navbar-01/app-navbar.tsx +++ b/app/blocks/navbar/app-navbar.tsx @@ -3,18 +3,23 @@ import { ThemeSwitcher } from "@/components/theme-switcher" import { IconBag2, + IconBasket, IconBrandApple, IconChevronLgDown, IconCommandRegular, + IconCube, IconDashboard, IconHeadphones, IconLogout, + IconMacbook, IconSearch, IconSettings } from "justd-icons" +import { usePathname } from "next/navigation" import { Avatar, Button, Menu, Navbar, Separator } from "ui" export function AppNavbar({ children, ...props }: React.ComponentProps) { + const isUsingIcon = usePathname().includes("navbar-05") return ( @@ -22,14 +27,27 @@ export function AppNavbar({ children, ...props }: React.ComponentProps - + + {isUsingIcon && } Store - - Mac - iPad - iPhone - Watch - Vision + + + {isUsingIcon && } + Mac + + + {isUsingIcon && } + iPad + + + {isUsingIcon && } + iPhone + + + {isUsingIcon && } + Watch + + Vision Entertainment Accessories Support @@ -160,3 +178,8 @@ export function AppNavbar({ children, ...props }: React.ComponentProps ) } + +function NavbarItem(props: React.ComponentProps) { + const pathname = usePathname() + return +} diff --git a/app/blocks/navbar/navbar-01/layout.tsx b/app/blocks/navbar/navbar-01/layout.tsx index 8e07cafa..07016a0a 100644 --- a/app/blocks/navbar/navbar-01/layout.tsx +++ b/app/blocks/navbar/navbar-01/layout.tsx @@ -1,4 +1,4 @@ -import { AppNavbar } from "./app-navbar" +import { AppNavbar } from "../app-navbar" export default function Layout({ children }: { children: React.ReactNode }) { return {children} diff --git a/app/blocks/navbar/navbar-02/app-navbar.tsx b/app/blocks/navbar/navbar-02/app-navbar.tsx deleted file mode 100644 index d4c0560b..00000000 --- a/app/blocks/navbar/navbar-02/app-navbar.tsx +++ /dev/null @@ -1,161 +0,0 @@ -"use client" - -import { ThemeSwitcher } from "@/components/theme-switcher" -import { - IconBag2, - IconBrandApple, - IconChevronLgDown, - IconCommandRegular, - IconDashboard, - IconHeadphones, - IconLogout, - IconSearch, - IconSettings -} from "justd-icons" -import { Avatar, Button, Menu, Navbar, Separator } from "ui" - -export function AppNavbar({ children, ...props }: React.ComponentProps) { - return ( - - - - - - - Store - - Mac - - iPad - iPhone - Watch - Vision - Entertainment - Accessories - Support - - - - - - - - - - - - - - - - - Irsyad A. Panjaitan - @irsyadadl - - - - - - Dashboard - - - - Settings - - - - - Command Menu - - - - - Contact Support - - - - - Log out - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Irsyad A. Panjaitan - @irsyadadl - - - - - - Dashboard - - - - Settings - - - - - Command Menu - - - - - Contact Support - - - - - Log out - - - - - - {children} - - ) -} diff --git a/app/blocks/navbar/navbar-02/layout.tsx b/app/blocks/navbar/navbar-02/layout.tsx index 4bf69931..bebe5612 100644 --- a/app/blocks/navbar/navbar-02/layout.tsx +++ b/app/blocks/navbar/navbar-02/layout.tsx @@ -1,5 +1,5 @@ -import { AppNavbar } from "./app-navbar" +import { AppNavbar } from "../app-navbar" export default function Layout({ children }: { children: React.ReactNode }) { - return {children} + return {children} } diff --git a/app/blocks/navbar/navbar-03/app-navbar.tsx b/app/blocks/navbar/navbar-03/app-navbar.tsx deleted file mode 100644 index cd9c5171..00000000 --- a/app/blocks/navbar/navbar-03/app-navbar.tsx +++ /dev/null @@ -1,162 +0,0 @@ -"use client" - -import { ThemeSwitcher } from "@/components/theme-switcher" -import { - IconBag2, - IconBrandApple, - IconChevronLgDown, - IconCommandRegular, - IconDashboard, - IconHeadphones, - IconLogout, - IconSearch, - IconSettings -} from "justd-icons" -import { Avatar, Button, Menu, Navbar, Separator } from "ui" - -export function AppNavbar({ children, ...props }: React.ComponentProps) { - return ( - - - - - - - Store - Mac - - iPad - - iPhone - Watch - Vision - Entertainment - Accessories - Support - - - - - - - - - - - - - - - - - Irsyad A. Panjaitan - @irsyadadl - - - - - - Dashboard - - - - Settings - - - - - Command Menu - - - - - Contact Support - - - - - Log out - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Irsyad A. Panjaitan - @irsyadadl - - - - - - Dashboard - - - - Settings - - - - - Command Menu - - - - - Contact Support - - - - - Log out - - - - - - - {children} - - ) -} diff --git a/app/blocks/navbar/navbar-03/layout.tsx b/app/blocks/navbar/navbar-03/layout.tsx index 4bf69931..661fd908 100644 --- a/app/blocks/navbar/navbar-03/layout.tsx +++ b/app/blocks/navbar/navbar-03/layout.tsx @@ -1,5 +1,5 @@ -import { AppNavbar } from "./app-navbar" +import { AppNavbar } from "../app-navbar" export default function Layout({ children }: { children: React.ReactNode }) { - return {children} + return {children} } diff --git a/app/blocks/navbar/navbar-04/app-navbar.tsx b/app/blocks/navbar/navbar-04/app-navbar.tsx deleted file mode 100644 index 39ac5de1..00000000 --- a/app/blocks/navbar/navbar-04/app-navbar.tsx +++ /dev/null @@ -1,97 +0,0 @@ -"use client" - -import { - IconBag2, - IconBrandApple, - IconBrandGoogle, - IconChevronLgDown, - IconCommandRegular, - IconDashboard, - IconHeadphones, - IconLogout, - IconSearch, - IconSettings -} from "justd-icons" -import { Avatar, Button, Menu, Navbar, Separator } from "ui" - -export function AppNavbar({ children, ...props }: React.ComponentProps) { - return ( - - - - - - - Documentation - Features - Support - Pricing - - - - - - - - - - - - - - - - - - - - - - - - - Irsyad A. Panjaitan - @irsyadadl - - - - - - Dashboard - - - - Settings - - - - - Command Menu - - - - - Contact Support - - - - - Log out - - - - - - {children} - - ) -} diff --git a/app/blocks/navbar/navbar-04/layout.tsx b/app/blocks/navbar/navbar-04/layout.tsx index 826ad404..6b6f60bd 100644 --- a/app/blocks/navbar/navbar-04/layout.tsx +++ b/app/blocks/navbar/navbar-04/layout.tsx @@ -1,4 +1,4 @@ -import { AppNavbar } from "./app-navbar" +import { AppNavbar } from "../app-navbar" export default function AppLayout({ children }: { children: React.ReactNode }) { return {children} diff --git a/app/blocks/navbar/navbar-05/app-navbar.tsx b/app/blocks/navbar/navbar-05/app-navbar.tsx deleted file mode 100644 index 182b3b8a..00000000 --- a/app/blocks/navbar/navbar-05/app-navbar.tsx +++ /dev/null @@ -1,115 +0,0 @@ -"use client" - -import { - IconBag2, - IconBrandApple, - IconBrandGithub, - IconBrandJustd, - IconChart3, - IconChevronLgDown, - IconColors, - IconCommandRegular, - IconDashboard, - IconHeadphones, - IconLogout, - IconNotes, - IconSearch, - IconSettings, - IconSidebar -} from "justd-icons" -import { Avatar, Button, Menu, Navbar, Separator } from "ui" - -export function AppNavbar({ children, ...props }: React.ComponentProps) { - return ( - - - - - Justd - - - - - Documentation - - - Sidebar - - - Themes - - - Charts - - - Github - - - - - - - - - - - - - - - - - - - - - - - - - - Irsyad A. Panjaitan - @irsyadadl - - - - - - Dashboard - - - - Settings - - - - - Command Menu - - - - - Contact Support - - - - - Log out - - - - - - {children} - - ) -} diff --git a/app/blocks/navbar/navbar-05/layout.tsx b/app/blocks/navbar/navbar-05/layout.tsx index 826ad404..6b6f60bd 100644 --- a/app/blocks/navbar/navbar-05/layout.tsx +++ b/app/blocks/navbar/navbar-05/layout.tsx @@ -1,4 +1,4 @@ -import { AppNavbar } from "./app-navbar" +import { AppNavbar } from "../app-navbar" export default function AppLayout({ children }: { children: React.ReactNode }) { return {children} diff --git a/app/blocks/sidebar/sidebar-01/app-sidebar.tsx b/app/blocks/sidebar/app-sidebar.tsx similarity index 83% rename from app/blocks/sidebar/sidebar-01/app-sidebar.tsx rename to app/blocks/sidebar/app-sidebar.tsx index 54b6f5f7..eb9aae57 100644 --- a/app/blocks/sidebar/sidebar-01/app-sidebar.tsx +++ b/app/blocks/sidebar/app-sidebar.tsx @@ -22,12 +22,14 @@ import { IconShield, IconSun } from "justd-icons" +import { usePathname } from "next/navigation" import { Avatar, Button, Link, Menu, Sidebar, useSidebar } from "ui" export function AppSidebar(props: React.ComponentProps) { const { theme, setTheme } = useTheme() const { state } = useSidebar() const collapsed = state === "collapsed" + const pathname = usePathname() return ( @@ -41,18 +43,18 @@ export function AppSidebar(props: React.ComponentProps) { - + Overview - - + + Settings - - + + Billing - - + + Newsletter - + Messages @@ -123,3 +125,8 @@ export function AppSidebar(props: React.ComponentProps) { ) } + +function SidebarItem({ icon: Icon, ...props }: React.ComponentProps) { + const pathname = usePathname() + return +} diff --git a/app/blocks/sidebar/sidebar-01/layout.tsx b/app/blocks/sidebar/sidebar-01/layout.tsx index 2a6928a4..cdaf6525 100644 --- a/app/blocks/sidebar/sidebar-01/layout.tsx +++ b/app/blocks/sidebar/sidebar-01/layout.tsx @@ -2,7 +2,7 @@ import * as React from "react" -import { AppSidebar } from "@/app/blocks/sidebar/sidebar-01/app-sidebar" +import { AppSidebar } from "@/app/blocks/sidebar/app-sidebar" import { IconChevronLgDown, IconCirclePerson, @@ -20,7 +20,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
- + diff --git a/app/blocks/sidebar/sidebar-02/app-sidebar.tsx b/app/blocks/sidebar/sidebar-02/app-sidebar.tsx deleted file mode 100644 index 609b44a7..00000000 --- a/app/blocks/sidebar/sidebar-02/app-sidebar.tsx +++ /dev/null @@ -1,124 +0,0 @@ -"use client" - -import * as React from "react" - -import { useTheme } from "@/components/theme-provider" -import { - IconArchive, - IconBag, - IconBrandApple, - IconChevronLgDown, - IconCirclePerson, - IconCreditCard, - IconDashboard, - IconEnvelope, - IconLogout, - IconMessage, - IconMoon, - IconPeople, - IconPersonAdd, - IconPlus, - IconSettings, - IconShield, - IconSun -} from "justd-icons" -import { Avatar, Button, Link, Menu, Sidebar, useSidebar } from "ui" - -export function AppSidebar(props: React.ComponentProps) { - const { theme, setTheme } = useTheme() - const { state } = useSidebar() - const collapsed = state === "collapsed" - return ( - - - - - Apple - - - - - - Overview - - - Settings - - - Billing - - - Newsletter - - - Messages - - - - - All Projects - - - Create New Project - - - Archived Projects - - - - - - Team Overview - - - Add New Member - - - Manage Roles - - - - - - - - - - Profile - - - - Settings - - - - Security - - - setTheme(theme === "light" ? "dark" : "light")}> - {theme === "light" ? : } - Preferences - - - - - Log out - - - - - - ) -} diff --git a/app/blocks/sidebar/sidebar-02/layout.tsx b/app/blocks/sidebar/sidebar-02/layout.tsx index 7d710441..8ce1adcc 100644 --- a/app/blocks/sidebar/sidebar-02/layout.tsx +++ b/app/blocks/sidebar/sidebar-02/layout.tsx @@ -2,7 +2,7 @@ import * as React from "react" -import { AppSidebar } from "@/app/blocks/sidebar/sidebar-02/app-sidebar" +import { AppSidebar } from "@/app/blocks/sidebar/app-sidebar" import { IconChevronLgDown, IconCirclePerson, @@ -11,7 +11,7 @@ import { IconSettings, IconShield } from "justd-icons" -import { Avatar, Button, Menu, SearchField, Separator, Sidebar } from "ui" +import { Avatar, Breadcrumb, Breadcrumbs, Button, Menu, Separator, Sidebar } from "ui" export default function Layout({ children }: { children: React.ReactNode }) { return ( @@ -20,10 +20,14 @@ export default function Layout({ children }: { children: React.ReactNode }) {
- - + + + + + Dashboard + Settings + -
- - - - Profile - - - - Settings - - - - Security - - - setTheme(theme === "light" ? "dark" : "light")}> - {theme === "light" ? : } - Preferences - - - - - Log out - - - - - - ) -} diff --git a/app/blocks/sidebar/sidebar-03/layout.tsx b/app/blocks/sidebar/sidebar-03/layout.tsx index 470ee175..7e4a51eb 100644 --- a/app/blocks/sidebar/sidebar-03/layout.tsx +++ b/app/blocks/sidebar/sidebar-03/layout.tsx @@ -2,7 +2,7 @@ import * as React from "react" -import { AppSidebar } from "@/app/blocks/sidebar/sidebar-03/app-sidebar" +import { AppSidebar } from "@/app/blocks/sidebar/app-sidebar" import { IconChevronLgDown, IconCirclePerson, @@ -11,7 +11,7 @@ import { IconSettings, IconShield } from "justd-icons" -import { Avatar, Button, Menu, Separator, Sidebar } from "ui" +import { Avatar, Breadcrumb, Breadcrumbs, Button, Menu, Separator, Sidebar } from "ui" export default function Layout({ children }: { children: React.ReactNode }) { return ( @@ -20,9 +20,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
- + - Overview + + Dashboard + Billing +
diff --git a/app/blocks/sidebar/sidebar-03/page.tsx b/app/blocks/sidebar/sidebar-03/page.tsx index 988e4728..b06dec33 100644 --- a/app/blocks/sidebar/sidebar-03/page.tsx +++ b/app/blocks/sidebar/sidebar-03/page.tsx @@ -1,59 +1,12 @@ import React from "react" -import TableDemo from "@/components/docs/collections/table/table-demo" import type { Metadata } from "next" -import { Card, Grid } from "ui" +import { Heading } from "ui" export const metadata: Metadata = { title: "Sidebar Floating" } export default function Page() { - return ( -
-

Overview

- - - {Object.values(data).map((item, index) => ( - - - - ))} - -
- - -
-
- ) -} - -const data = { - revenue: { - title: "Total Revenue", - value: "$1,200,000", - description: "The total revenue generated over the past year." - }, - income: { - title: "Net Income", - value: "$300,000", - description: "The total income after all expenses have been deducted." - }, - expenses: { - title: "Total Expenses", - value: "$900,000", - description: "The total expenses incurred over the past year." - }, - profitMargin: { - title: "Profit Margin", - value: "25%", - description: "The percentage of revenue that represents profit." - } + return Billing } diff --git a/app/blocks/sidebar/sidebar-04/layout.tsx b/app/blocks/sidebar/sidebar-04/layout.tsx new file mode 100644 index 00000000..60787b95 --- /dev/null +++ b/app/blocks/sidebar/sidebar-04/layout.tsx @@ -0,0 +1,65 @@ +"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, Breadcrumb, 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-04/page.tsx b/app/blocks/sidebar/sidebar-04/page.tsx new file mode 100644 index 00000000..ee81d24b --- /dev/null +++ b/app/blocks/sidebar/sidebar-04/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 Floating" +} + +export default function Page() { + return Newsletter +} diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts index 854b5249..c48267fe 100644 --- a/components/docs/generated/previews.ts +++ b/components/docs/generated/previews.ts @@ -2,7 +2,7 @@ // This file is autogenerated by scripts/create-pr-content.ts. // Do not edit this file directly. -import React from "react" +import React from 'react'; export const previews: Record = { "date-and-time/date-field/date-field-demo": { diff --git a/components/ui/breadcrumbs.tsx b/components/ui/breadcrumbs.tsx index a2eaed5c..ed00cf3f 100644 --- a/components/ui/breadcrumbs.tsx +++ b/components/ui/breadcrumbs.tsx @@ -17,7 +17,7 @@ const Breadcrumbs = ({ className, ...props }: BreadcrumbsProps const Breadcrumb = ({ className, ...props }: BreadcrumbProps & LinkProps) => { return ( - + {"href" in props && } diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx index 7b32d554..9407af1c 100644 --- a/components/ui/sidebar.tsx +++ b/components/ui/sidebar.tsx @@ -110,7 +110,7 @@ const Provider = React.forwardRef<
) => { [ "relative overflow-hidden flex min-h-svh flex-1 flex-col bg-bg", "md:peer-data-[intent=inset]:ml-0 md:peer-data-[intent=inset]:rounded-xl md:peer-data-[intent=inset]:shadow-sm", - "peer-data-[intent=inset]:overflow-hidden peer-data-[intent=inset]:border peer-data-[intent=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[intent=inset]:mt-2", + "peer-data-[intent=inset]:overflow-hidden peer-data-[intent=inset]:border peer-data-[intent=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[intent=inset]:my-2 md:peer-data-[intent=inset]:mr-2", "md:peer-data-[intent=sidebar]:overflow-visible" ], className @@ -235,7 +235,10 @@ 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", variants: { collapsed: { - true: "place-content-center size-9 col-span-full", + true: [ + "justify-start px-3 [&>[data-slot=icon]]:mr-2 py-2 col-span-full", + "md:place-content-center md:grid-cols-[auto] md:[&>[data-slot=icon]]:mr-0 md:px-0 md:py-0 md:size-9" + ], false: "grid-cols-subgrid [&>[data-slot=icon]]:mr-2 px-3 py-2" }, isFocused: { @@ -268,7 +271,7 @@ interface ItemProps extends LinkProps { } const Item = ({ isCurrent, children, className, icon: Icon, ...props }: ItemProps) => { - const { state } = React.useContext(SidebarContext)! + const { state, isMobile } = React.useContext(SidebarContext)! return ( {Icon && ( <> - {state === "collapsed" ? ( - - + {state === "collapsed" && !isMobile ? ( + + {} {children as string} @@ -355,7 +358,7 @@ const header = tv({ variants: { collapsed: { false: "px-5 py-4", - true: "size-9 mt-1 group-data-[intent=floating]:mt-2 rounded-lg hover:bg-secondary mx-auto justify-center items-center" + true: "px-5 py-4 md:p-0 md:size-9 mt-1 group-data-[intent=floating]:mt-2 md:rounded-lg md:hover:bg-muted md:mx-auto md:justify-center md:items-center" } } }) diff --git a/resources/content/docs/components/layouts/navbar.mdx b/resources/content/docs/components/layouts/navbar.mdx index 6991254b..5b90b896 100644 --- a/resources/content/docs/components/layouts/navbar.mdx +++ b/resources/content/docs/components/layouts/navbar.mdx @@ -109,7 +109,7 @@ Highlight the current page in the navbar for better navigation clarity. There are three types of intents: `navbar`, `floating`, and `inset`, each with distinct behaviors. ### Navbar -The default intent of the navbar is `navbar`. You can change it to `floating` or `inset` by setting the `intent` prop. Because this is just default, so I don't need to show you the code. But you can the [live example here](/blocks/navbar/navbar-01). +The default intent of the navbar is `navbar`. You can change it to `floating` or `inset` by setting the `intent` prop. ### Floating diff --git a/resources/content/docs/components/layouts/sidebar.mdx b/resources/content/docs/components/layouts/sidebar.mdx index b0732bca..8ccd99de 100644 --- a/resources/content/docs/components/layouts/sidebar.mdx +++ b/resources/content/docs/components/layouts/sidebar.mdx @@ -217,7 +217,7 @@ app/dashboard ``` ## Collapsible -By default, the sidebar is collapsible. There are three types of collapsibility: `offcanvas`, `dock`, and `none`. +By default, the sidebar is collapsible with three options for collapsibility: `offcanvas`, `dock`, and `none`. When set to `dock`, the sidebar will be pinned to a specified location, displaying an icon and tooltip by default. You can see an example of this in [Sidebar 04](/blocks/sidebar/sidebar-04). ### Offcanvas This is the default collapsible type. When the trigger is clicked, the sidebar slides out. @@ -269,6 +269,18 @@ The sidebar's default open state can be managed using the `defaultOpen` prop. ``` +## Trigger +The trigger is a button that toggles the sidebar on both desktop and mobile devices. On desktop, it collapses the sidebar, while on mobile, it opens the sidebar within the `` component. +``` + +``` + +## Rail +`` is a button that toggles the sidebar, positioned as a slim bar along the sidebar's border rather than a traditional button at the top. It’s typically placed beneath the ``. To see the difference in action, compare [Sidebar 01](/blocks/sidebar/sidebar-01), which includes the rail, with [Sidebar 02](/blocks/sidebar/sidebar-02), which does not. +``` + +``` + ## Controlled To manually control the sidebar's state, use the `isOpen` prop. When `isOpen` is set to `true`, the sidebar opens; when it's `false`, the sidebar closes. ``` @@ -282,3 +294,12 @@ export function AppSidebar() { ) } ``` + +## Default Opened +If you want the sidebar to be open by default, you can set the `defaultOpen` prop to `true`. You can see examples of this in [Sidebar 04](/blocks/sidebar/sidebar-04). +``` + + + + +```