diff --git a/.changeset/late-jars-end.md b/.changeset/late-jars-end.md new file mode 100644 index 0000000000..58cfc29d07 --- /dev/null +++ b/.changeset/late-jars-end.md @@ -0,0 +1,5 @@ +--- +"@marigold/docs": patch +--- + +docs: new navigation pattern diff --git a/docs/app/_components/NavLink.tsx b/docs/app/_components/NavLink.tsx index 4814522a66..d33d0efea3 100644 --- a/docs/app/_components/NavLink.tsx +++ b/docs/app/_components/NavLink.tsx @@ -53,7 +53,6 @@ export const NavLink = ({ variant, current, className, - children, ...props }: NavLinkProps) => ( diff --git a/docs/content/recipes/NavItem.tsx b/docs/content/recipes/NavItem.tsx new file mode 100644 index 0000000000..ba9258d96a --- /dev/null +++ b/docs/content/recipes/NavItem.tsx @@ -0,0 +1,9 @@ +import { Link, Text } from '@marigold/components'; + +export const NavItem = ({ children }: any) => ( +
+ + {children} + +
+); diff --git a/docs/content/recipes/ReservixLogo.tsx b/docs/content/recipes/ReservixLogo.tsx new file mode 100644 index 0000000000..e7c8be9497 --- /dev/null +++ b/docs/content/recipes/ReservixLogo.tsx @@ -0,0 +1,59 @@ +export const Logo = () => ( + + + + + + + + + + + + + + + +); diff --git a/docs/content/recipes/navigation-recipes.mdx b/docs/content/recipes/navigation-recipes.mdx new file mode 100644 index 0000000000..017fb411a9 --- /dev/null +++ b/docs/content/recipes/navigation-recipes.mdx @@ -0,0 +1,18 @@ +--- +title: Navigation +caption: This recipe show how to build a top navigation. +badge: new +--- + +This pattern recipe might help you building your top navigation for Reservix Applications. It's a pattern that is used by all new Reservix Applications build with Marigold. + +## Example + +Here you can see how a top navigation can be build with our components. Keep in mind this is only the desktop version and will not work on mobile view. + +We used for the layouts the [``](/components/layout/inline/) and [``](/components/layout/split/) component. +And because we currently don't have a navigation component we build it with `
` and `` elements. + +To get the logout button, you have to use the `@marigold/icon` package to get the icon and wrap a [` +
+ + + ); +};