Skip to content

Commit

Permalink
fix(docs): navbar examples (#1269)
Browse files Browse the repository at this point in the history 
* fix(navbar): use button tag and correctly pass props with child

* chore(navbar): sync example and code snippet
  • Loading branch information
@tianenpang
tianenpang authored Aug 4, 2023
1 parent 36ddbff commit 5064bfe
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 94 deletions.
17 changes: 7 additions & 10 deletions apps/docs/app/examples/navbar/controlled-menu/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
NavbarMenu,
NavbarMenuItem,
NavbarMenuToggle,
Avatar,
Button,
Link as NextUiLink,
LinkProps,
} from "@nextui-org/react";
Expand Down Expand Up @@ -79,16 +79,13 @@ export default function Page() {
</NavbarContent>

<NavbarContent justify="end">
<NavbarItem className="hidden lg:flex">
<Link href="#">Login</Link>
</NavbarItem>
<NavbarItem>
<Avatar
isBordered
as="button"
className="transition-transform"
color="warning"
name="Jane Lee"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
<Button as={Link} color="warning" href="#" variant="flat">
Sign Up
</Button>
</NavbarItem>
</NavbarContent>

Expand Down
27 changes: 12 additions & 15 deletions apps/docs/app/examples/navbar/with-avatar/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,22 +51,19 @@ export default function Page() {
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarContent as="div" justify="end">
<Dropdown placement="bottom-end">
<NavbarItem>
<DropdownTrigger>
<Avatar
isBordered
as={Link}
className="transition-transform"
color="secondary"
href="#"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
</NavbarItem>
<DropdownTrigger>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key="profile" className="h-14 gap-2">
<p className="font-semibold">Signed in as</p>
Expand Down
5 changes: 2 additions & 3 deletions apps/docs/app/examples/navbar/with-search-input/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function Page() {
</NavbarItem>
</NavbarContent>
</NavbarContent>
<NavbarContent className="items-center" justify="end">
<NavbarContent as="div" className="items-center" justify="end">
<Input
classNames={{
base: "max-w-full sm:max-w-[10rem] h-10",
Expand All @@ -72,10 +72,9 @@ export default function Page() {
<DropdownTrigger>
<Avatar
isBordered
as={Link}
as="button"
className="transition-transform"
color="secondary"
href="#"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
Expand Down
29 changes: 14 additions & 15 deletions apps/docs/content/components/navbar/with-avatar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function App() {
<AcmeLogo />
<p className="font-bold text-inherit">ACME</p>
</NavbarBrand>
<NavbarContent className="hidden sm:flex gap-4" justify="center">
<NavbarItem>
<Link color="foreground" href="#">
Expand All @@ -36,22 +37,20 @@ export default function App() {
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarContent as="div" justify="end">
<Dropdown placement="bottom-end">
<NavbarItem>
<DropdownTrigger>
<Avatar
isBordered
as={Link}
href="#"
className="transition-transform"
color="secondary"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
</NavbarItem>
<DropdownTrigger>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key="profile" className="h-14 gap-2">
<p className="font-semibold">Signed in as</p>
Expand Down
28 changes: 13 additions & 15 deletions apps/docs/content/components/navbar/with-search-input.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,8 @@ export default function App() {
</NavbarItem>
</NavbarContent>
</NavbarContent>
<NavbarContent className="items-center" justify="end">
<NavbarContent as="div" className="items-center" justify="end">
<Input
classNames={{
base: "max-w-full sm:max-w-[10rem] h-10",
Expand All @@ -87,20 +88,17 @@ export default function App() {
type="search"
/>
<Dropdown placement="bottom-end">
<NavbarItem>
<DropdownTrigger>
<Avatar
isBordered
as={Link}
href="#"
className="transition-transform"
color="secondary"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
</NavbarItem>
<DropdownTrigger>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key="profile" className="h-14 gap-2">
<p className="font-semibold">Signed in as</p>
Expand Down
67 changes: 31 additions & 36 deletions packages/components/navbar/stories/navbar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -410,19 +410,17 @@ const WithAvatarUserTemplate = (args: NavbarProps) => {
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarContent as="div" justify="end">
<Dropdown placement="bottom-end">
<DropdownTrigger>
<NavbarItem>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</NavbarItem>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" color="secondary">
<DropdownItem key="profile" className="h-14 gap-2">
Expand Down Expand Up @@ -511,33 +509,30 @@ const WithSearchInputTemplate = (args: NavbarProps) => {
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarItem className="hidden md:flex">
<Input
classNames={{
input: "text-base",
}}
placeholder="Search..."
size="sm"
startContent={<SearchIcon className="text-base pointer-events-none flex-shrink-0" />}
onClear={() => {
// eslint-disable-next-line no-console
console.log("clear");
}}
/>
</NavbarItem>
<NavbarContent as="div" justify="end">
<Input
className="w-fit"
classNames={{
input: "text-base",
}}
placeholder="Search..."
size="sm"
startContent={<SearchIcon className="text-base pointer-events-none flex-shrink-0" />}
onClear={() => {
// eslint-disable-next-line no-console
console.log("clear");
}}
/>
<Dropdown placement="bottom-end">
<DropdownTrigger>
<NavbarItem>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</NavbarItem>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" color="secondary">
<DropdownItem key="profile" className="h-14 gap-2">
Expand Down

1 comment on commit 5064bfe

@vercel
Copy link

@vercel vercel bot commented on 5064bfe Aug 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nextui-docs-v2 – ./apps/docs

nextui-docs-v2-git-main-nextui-org.vercel.app
nextui-docs-v2.vercel.app
nextui-docs-v2-nextui-org.vercel.app
*.nextui.org
nextui.org
www.nextui.org

Please sign in to comment.