Skip to content

Commit

Permalink
lfg
Browse files Browse the repository at this point in the history
  • Loading branch information
@irsyadadl
irsyadadl committed Oct 26, 2024
1 parent 778185d commit db93835
Show file tree
Hide file tree
Showing 5 changed files with 214 additions and 196 deletions.
308 changes: 160 additions & 148 deletions app/blocks/navbar/app-navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
"use client"

import * as React from "react"

import { CommandPalette } from "@/components/command-palette"
import { ThemeSwitcher } from "@/components/theme-switcher"
import {
IconBag2,
Expand All @@ -20,162 +23,171 @@ import { Avatar, Button, Menu, Navbar, Separator } from "ui"

export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
const isUsingIcon = usePathname().includes("navbar-05")
const [open, setOpen] = React.useState(false)
return (
<Navbar {...props}>
<Navbar.Nav>
<Navbar.Logo href="/docs/components/layouts/navbar">
<IconBrandApple className="size-5" />
</Navbar.Logo>
<Navbar.Section>
<NavbarItem isCurrent href="/blocks/navbar/navbar-01">
{isUsingIcon && <IconBasket />}
Store
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-02">
{isUsingIcon && <IconMacbook />}
Mac
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-03">
{isUsingIcon && <IconCube />}
iPad
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-04">
{isUsingIcon && <IconCube />}
iPhone
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-05">
{isUsingIcon && <IconCube />}
Watch
</NavbarItem>
<NavbarItem href="#">Vision</NavbarItem>
<Navbar.Item href="#">Entertainment</Navbar.Item>
<Navbar.Item href="#">Accessories</Navbar.Item>
<Navbar.Item href="#">Support</Navbar.Item>
</Navbar.Section>
<Navbar.Section className="ml-auto hidden sm:flex">
<Navbar.Flex>
<Button appearance="plain" size="square-petite" aria-label="Search for products">
<IconSearch />
</Button>
<Button appearance="plain" size="square-petite" aria-label="Your Bag">
<IconBag2 />
</Button>
<ThemeSwitcher appearance="plain" />
</Navbar.Flex>
<Separator orientation="vertical" className="h-6 ml-1 mr-3" />
<Menu>
<Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
<Avatar
alt="slash"
size="small"
shape="square"
src="/images/sidebar/profile-slash.jpg"
/>
<IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
</Menu.Trigger>
<Menu.Content placement="bottom" showArrow className="sm:min-w-56">
<Menu.Section>
<Menu.Header separator>
<span className="block">Irsyad A. Panjaitan</span>
<span className="font-normal text-muted-fg">@irsyadadl</span>
</Menu.Header>
</Menu.Section>

<Menu.Item href="#dashboard">
<IconDashboard />
Dashboard
</Menu.Item>
<Menu.Item href="#settings">
<IconSettings />
Settings
</Menu.Item>
<Menu.Separator />
<Menu.Item>
<IconCommandRegular />
Command Menu
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#contact-s">
<IconHeadphones />
Contact Support
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#logout">
<IconLogout />
Log out
</Menu.Item>
</Menu.Content>
</Menu>
</Navbar.Section>
</Navbar.Nav>

<Navbar.Compact>
<Navbar.Flex>
<Navbar.Trigger className="-ml-2" />
<Separator orientation="vertical" className="h-6 mx-2" />
<>
<CommandPalette setOpen={setOpen} openCmd={open} />
<Navbar {...props}>
<Navbar.Nav>
<Navbar.Logo href="/docs/components/layouts/navbar">
<IconBrandApple className="size-5" />
</Navbar.Logo>
</Navbar.Flex>
<Navbar.Flex>
<Navbar.Section>
<NavbarItem isCurrent href="/blocks/navbar/navbar-01">
{isUsingIcon && <IconBasket />}
Store
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-02">
{isUsingIcon && <IconMacbook />}
Mac
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-03">
{isUsingIcon && <IconCube />}
iPad
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-04">
{isUsingIcon && <IconCube />}
iPhone
</NavbarItem>
<NavbarItem href="/blocks/navbar/navbar-05">
{isUsingIcon && <IconCube />}
Watch
</NavbarItem>
<NavbarItem href="#">Vision</NavbarItem>
<Navbar.Item href="#">Entertainment</Navbar.Item>
<Navbar.Item href="#">Accessories</Navbar.Item>
<Navbar.Item href="#">Support</Navbar.Item>
</Navbar.Section>
<Navbar.Section className="ml-auto hidden sm:flex">
<Navbar.Flex>
<Button
onPress={() => setOpen(true)}
appearance="plain"
size="square-petite"
aria-label="Search for products"
>
<IconSearch />
</Button>
<Button appearance="plain" size="square-petite" aria-label="Your Bag">
<IconBag2 />
</Button>
<ThemeSwitcher appearance="plain" />
</Navbar.Flex>
<Separator orientation="vertical" className="h-6 ml-1 mr-3" />
<Menu>
<Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
<Avatar
alt="slash"
size="small"
shape="square"
src="/images/sidebar/profile-slash.jpg"
/>
<IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
</Menu.Trigger>
<Menu.Content placement="bottom" showArrow className="sm:min-w-56">
<Menu.Section>
<Menu.Header separator>
<span className="block">Irsyad A. Panjaitan</span>
<span className="font-normal text-muted-fg">@irsyadadl</span>
</Menu.Header>
</Menu.Section>

<Menu.Item href="#dashboard">
<IconDashboard />
Dashboard
</Menu.Item>
<Menu.Item href="#settings">
<IconSettings />
Settings
</Menu.Item>
<Menu.Separator />
<Menu.Item>
<IconCommandRegular />
Command Menu
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#contact-s">
<IconHeadphones />
Contact Support
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#logout">
<IconLogout />
Log out
</Menu.Item>
</Menu.Content>
</Menu>
</Navbar.Section>
</Navbar.Nav>

<Navbar.Compact>
<Navbar.Flex>
<Button appearance="plain" size="square-petite" aria-label="Search for products">
<IconSearch />
</Button>
<Button appearance="plain" size="square-petite" aria-label="Your Bag">
<IconBag2 />
</Button>
<ThemeSwitcher appearance="plain" />
<Navbar.Trigger className="-ml-2" />
<Separator orientation="vertical" className="h-6 mx-2" />
<Navbar.Logo href="/docs/components/layouts/navbar">
<IconBrandApple className="size-5" />
</Navbar.Logo>
</Navbar.Flex>
<Separator orientation="vertical" className="h-6 ml-1 mr-3" />
<Menu>
<Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
<Avatar
alt="slash"
size="small"
shape="square"
src="/images/sidebar/profile-slash.jpg"
/>
<IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
</Menu.Trigger>
<Menu.Content placement="bottom" showArrow className="sm:min-w-56">
<Menu.Section>
<Menu.Header separator>
<span className="block">Irsyad A. Panjaitan</span>
<span className="font-normal text-muted-fg">@irsyadadl</span>
</Menu.Header>
</Menu.Section>
<Navbar.Flex>
<Navbar.Flex>
<Button appearance="plain" size="square-petite" aria-label="Search for products">
<IconSearch />
</Button>
<Button appearance="plain" size="square-petite" aria-label="Your Bag">
<IconBag2 />
</Button>
<ThemeSwitcher appearance="plain" />
</Navbar.Flex>
<Separator orientation="vertical" className="h-6 ml-1 mr-3" />
<Menu>
<Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
<Avatar
alt="slash"
size="small"
shape="square"
src="/images/sidebar/profile-slash.jpg"
/>
<IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
</Menu.Trigger>
<Menu.Content placement="bottom" showArrow className="sm:min-w-56">
<Menu.Section>
<Menu.Header separator>
<span className="block">Irsyad A. Panjaitan</span>
<span className="font-normal text-muted-fg">@irsyadadl</span>
</Menu.Header>
</Menu.Section>

<Menu.Item href="#dashboard">
<IconDashboard />
Dashboard
</Menu.Item>
<Menu.Item href="#settings">
<IconSettings />
Settings
</Menu.Item>
<Menu.Separator />
<Menu.Item>
<IconCommandRegular />
Command Menu
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#contact-s">
<IconHeadphones />
Contact Support
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#logout">
<IconLogout />
Log out
</Menu.Item>
</Menu.Content>
</Menu>
</Navbar.Flex>
</Navbar.Compact>
<Menu.Item href="#dashboard">
<IconDashboard />
Dashboard
</Menu.Item>
<Menu.Item href="#settings">
<IconSettings />
Settings
</Menu.Item>
<Menu.Separator />
<Menu.Item>
<IconCommandRegular />
Command Menu
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#contact-s">
<IconHeadphones />
Contact Support
</Menu.Item>
<Menu.Separator />
<Menu.Item href="#logout">
<IconLogout />
Log out
</Menu.Item>
</Menu.Content>
</Menu>
</Navbar.Flex>
</Navbar.Compact>

<Navbar.Inset>{children}</Navbar.Inset>
</Navbar>
<Navbar.Inset>{children}</Navbar.Inset>
</Navbar>
</>
)
}

Expand Down
Loading

0 comments on commit db93835

Please sign in to comment.