-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor(docs): navbar dx * refactor(docs): navbar dx * refactor(docs): navbar dx
- Loading branch information
Showing
25 changed files
with
1,200 additions
and
1,164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; | ||
|
|
||
| export const AcmeLogo = () => { | ||
| return ( | ||
| <svg fill="none" height="36" viewBox="0 0 32 32" width="36"> | ||
| <path | ||
| clipRule="evenodd" | ||
| d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <Navbar isBordered> | ||
| <NavbarBrand> | ||
| <AcmeLogo /> | ||
| <p className="font-bold text-inherit">ACME</p> | ||
| </NavbarBrand> | ||
| <NavbarContent className="hidden sm:flex gap-4" justify="center"> | ||
| <NavbarItem> | ||
| <Link color="foreground" href="#"> | ||
| Features | ||
| </Link> | ||
| </NavbarItem> | ||
| <NavbarItem isActive> | ||
| <Link aria-current="page" href="#"> | ||
| Customers | ||
| </Link> | ||
| </NavbarItem> | ||
| <NavbarItem> | ||
| <Link color="foreground" href="#"> | ||
| Integrations | ||
| </Link> | ||
| </NavbarItem> | ||
| </NavbarContent> | ||
| <NavbarContent justify="end"> | ||
| <NavbarItem className="hidden lg:flex"> | ||
| <Link href="#">Login</Link> | ||
| </NavbarItem> | ||
| <NavbarItem> | ||
| <Button as={Link} color="primary" href="#" variant="flat"> | ||
| Sign Up | ||
| </Button> | ||
| </NavbarItem> | ||
| </NavbarContent> | ||
| </Navbar> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
apps/docs/content/components/navbar/controlled-menu.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { | ||
| Navbar, | ||
| NavbarBrand, | ||
| NavbarMenuToggle, | ||
| NavbarMenuItem, | ||
| NavbarMenu, | ||
| NavbarContent, | ||
| NavbarItem, | ||
| Link, | ||
| Button, | ||
| } from "@nextui-org/react"; | ||
|
|
||
| export const AcmeLogo = () => { | ||
| return ( | ||
| <svg fill="none" height="36" viewBox="0 0 32 32" width="36"> | ||
| <path | ||
| clipRule="evenodd" | ||
| d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| const [isMenuOpen, setIsMenuOpen] = React.useState(false); | ||
|
|
||
| const menuItems = [ | ||
| "Profile", | ||
| "Dashboard", | ||
| "Activity", | ||
| "Analytics", | ||
| "System", | ||
| "Deployments", | ||
| "My Settings", | ||
| "Team Settings", | ||
| "Help & Feedback", | ||
| "Log Out", | ||
| ]; | ||
|
|
||
| return ( | ||
| <Navbar isBordered isMenuOpen={isMenuOpen} onMenuOpenChange={setIsMenuOpen}> | ||
| <NavbarContent className="sm:hidden" justify="start"> | ||
| <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} /> | ||
| </NavbarContent> | ||
|
|
||
| <NavbarContent className="sm:hidden pr-3" justify="center"> | ||
| <NavbarBrand> | ||
| <AcmeLogo /> | ||
| <p className="font-bold text-inherit">ACME</p> | ||
| </NavbarBrand> | ||
| </NavbarContent> | ||
|
|
||
| <NavbarContent className="hidden sm:flex gap-4" justify="center"> | ||
| <NavbarBrand> | ||
| <AcmeLogo /> | ||
| <p className="font-bold text-inherit">ACME</p> | ||
| </NavbarBrand> | ||
| <NavbarItem> | ||
| <Link color="foreground" href="#"> | ||
| Features | ||
| </Link> | ||
| </NavbarItem> | ||
| <NavbarItem isActive> | ||
| <Link aria-current="page" href="#"> | ||
| Customers | ||
| </Link> | ||
| </NavbarItem> | ||
| <NavbarItem> | ||
| <Link color="foreground" href="#"> | ||
| Integrations | ||
| </Link> | ||
| </NavbarItem> | ||
| </NavbarContent> | ||
|
|
||
| <NavbarContent justify="end"> | ||
| <NavbarItem className="hidden lg:flex"> | ||
| <Link href="#">Login</Link> | ||
| </NavbarItem> | ||
| <NavbarItem> | ||
| <Button as={Link} color="warning" href="#" variant="flat"> | ||
| Sign Up | ||
| </Button> | ||
| </NavbarItem> | ||
| </NavbarContent> | ||
|
|
||
| <NavbarMenu> | ||
| {menuItems.map((item, index) => ( | ||
| <NavbarMenuItem key={`${item}-${index}`}> | ||
| <Link | ||
| className="w-full" | ||
| color={ | ||
| index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground" | ||
| } | ||
| href="#" | ||
| size="lg" | ||
| > | ||
| {item} | ||
| </Link> | ||
| </NavbarMenuItem> | ||
| ))} | ||
| </NavbarMenu> | ||
| </Navbar> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
apps/docs/content/components/navbar/custom-active-item.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; | ||
|
|
||
| export const AcmeLogo = () => { | ||
| return ( | ||
| <svg fill="none" height="36" viewBox="0 0 32 32" width="36"> | ||
| <path | ||
| clipRule="evenodd" | ||
| d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" | ||
| fill="currentColor" | ||
| fillRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <Navbar | ||
| classNames={{ | ||
| item: [ | ||
| "flex", | ||
| "relative", | ||
| "h-full", | ||
| "items-center", | ||
| "data-[active=true]:after:content-['']", | ||
| "data-[active=true]:after:absolute", | ||
| "data-[active=true]:after:bottom-0", | ||
| "data-[active=true]:after:left-0", | ||
| "data-[active=true]:after:right-0", | ||
| "data-[active=true]:after:h-[2px]", | ||
| "data-[active=true]:after:rounded-[2px]", | ||
| "data-[active=true]:after:bg-primary", | ||
| ], | ||
| }} | ||
| > | ||
| <NavbarBrand> | ||
| <AcmeLogo /> | ||
| <p className="font-bold text-inherit">ACME</p> | ||
| </NavbarBrand> | ||
| <NavbarContent className="hidden sm:flex gap-4" justify="center"> | ||
| <NavbarItem> | ||
| <Link color="foreground" href="#"> | ||
| Features | ||
| </Link> | ||
| </NavbarItem> | ||
| <NavbarItem isActive> | ||
| <Link aria-current="page" href="#"> | ||
| Customers | ||
| </Link> | ||
| </NavbarItem> | ||
| <NavbarItem> | ||
| <Link color="foreground" href="#"> | ||
| Integrations | ||
| </Link> | ||
| </NavbarItem> | ||
| </NavbarContent> | ||
| <NavbarContent justify="end"> | ||
| <NavbarItem className="hidden lg:flex"> | ||
| <Link href="#">Login</Link> | ||
| </NavbarItem> | ||
| <NavbarItem> | ||
| <Button as={Link} color="primary" href="#" variant="flat"> | ||
| Sign Up | ||
| </Button> | ||
| </NavbarItem> | ||
| </NavbarContent> | ||
| </Navbar> | ||
| ); | ||
| } |
Oops, something went wrong.