docs: new navigation pattern (#3376)

.changeset/late-jars-end.md

@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs: new navigation pattern

docs/app/_components/NavLink.tsx

@@ -53,7 +53,6 @@ export const NavLink = ({
   variant,
   current,
   className,
-
   children,
   ...props
 }: NavLinkProps) => (

docs/content/recipes/NavItem.tsx

@@ -0,0 +1,9 @@
+import { Link, Text } from '@marigold/components';
+
+export const NavItem = ({ children }: any) => (
+  <div className="vistited:border-[#fa8005] border-b-8 pb-2">
+    <Link>
+      <Text color="#374151">{children}</Text>
+    </Link>
+  </div>
+);

docs/content/recipes/ReservixLogo.tsx

@@ -0,0 +1,59 @@
+export const Logo = () => (
+  <svg
+    width="120"
+    height="39"
+    viewBox="0 0 120 39"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M119.731 2.25463C119.273 2.88441 118.394 3.02312 117.763 2.566C117.133 2.10888 116.995 1.22859 117.451 0.598391C117.909 -0.0313929 118.789 -0.170516 119.419 0.287019C120.049 0.74414 120.188 1.62526 119.731 2.25463Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M117.501 5.32183C117.044 5.9512 116.164 6.08991 115.534 5.63321C114.905 5.17608 114.766 4.29579 115.223 3.66559C115.68 3.03581 116.56 2.8971 117.19 3.35422C117.82 3.81135 117.959 4.69246 117.501 5.32183Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M115.273 8.39055C114.816 9.01992 113.935 9.15822 113.305 8.7011C112.675 8.24397 112.536 7.3641 112.993 6.73431C113.45 6.10453 114.331 5.96541 114.962 6.42211C115.591 6.87965 115.73 7.76077 115.273 8.39055Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M113.045 11.457C112.587 12.0868 111.707 12.2263 111.077 11.7696C110.447 11.3125 110.308 10.4318 110.765 9.80075C111.223 9.17179 112.103 9.03307 112.733 9.48937C113.362 9.9469 113.501 10.8276 113.045 11.457Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M110.815 14.5258C110.358 15.1551 109.478 15.2943 108.847 14.8367C108.218 14.3796 108.079 13.4997 108.536 12.8691C108.993 12.2398 109.874 12.1015 110.504 12.5582C111.133 13.0149 111.273 13.896 110.815 14.5258Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M104.793 22.687C104.336 23.3168 103.455 23.4551 102.825 22.9984C102.196 22.5413 102.057 21.6614 102.514 21.0308C102.971 20.401 103.851 20.2619 104.482 20.7182C105.111 21.1765 105.25 22.0572 104.793 22.687Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M102.564 25.7548C102.107 26.3846 101.226 26.5229 100.597 26.0662C99.9667 25.6091 99.828 24.7292 100.285 24.0986C100.742 23.4692 101.622 23.3301 102.253 23.7872C102.883 24.2439 103.022 25.1246 102.564 25.7548Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M100.336 28.8221C99.8782 29.4519 98.9975 29.591 98.3681 29.1335C97.7383 28.6764 97.5992 27.7965 98.0559 27.1659C98.513 26.5374 99.3945 26.397 100.024 26.8545C100.653 27.3112 100.792 28.1928 100.336 28.8221Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M98.1068 31.8906C97.6492 32.5199 96.7694 32.6582 96.1383 32.2019C95.5094 31.7444 95.3702 30.8645 95.8269 30.2343C96.2841 29.6045 97.1648 29.4654 97.7954 29.9221C98.4243 30.3796 98.5635 31.2612 98.1068 31.8906Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M95.8775 34.9577C95.4208 35.5871 94.5401 35.7254 93.9107 35.2691C93.281 34.8116 93.1418 33.9317 93.5989 33.3015C94.0561 32.6717 94.9372 32.5326 95.5657 32.9901C96.1959 33.4473 96.3355 34.328 95.8775 34.9577Z"
+      fill="#0F0F0F"
+    />
+    <path
+      d="M93.649 38.025C93.1918 38.6548 92.3111 38.7939 91.6813 38.3363C91.052 37.8792 90.9129 36.9993 91.37 36.3687C91.8267 35.7394 92.7074 35.6011 93.3376 36.0574C93.967 36.5153 94.1061 37.396 93.649 38.025Z"
+      fill="#0F0F0F"
+    />
+    <path d="M96.3088 0H90.4304V4.46232H96.3088V0Z" fill="#0F0F0F" />
+    <path
+      d="M102.116 6.57106H96.3093H95.0688H91.2479H90.4301H85.155L81.4028 18.8268H81.332L77.5777 6.57106H74.2242C70.8273 6.57106 69.8013 8.34448 69.304 9.30261H69.2344V6.57106H63.7092V12.2826C62.1623 8.50058 58.6055 5.89697 54.1697 5.89697C48.187 5.89697 43.8667 10.9605 43.8667 16.4522C43.8667 16.6045 43.8716 16.7553 43.8778 16.906C42.5777 15.3003 40.2809 14.6531 38.0707 14.0407C36.5101 13.5836 35.06 12.9803 35.06 11.9203C35.06 11.3874 35.4853 10.6077 36.7225 10.6077C38.4591 10.6077 38.5307 11.6702 38.568 12.0934H44.3391C43.8439 6.92549 39.3799 5.89697 36.7962 5.89697C32.9289 5.89697 29.5452 8.23143 29.2139 11.8039C27.5693 8.28278 24.1297 5.89697 19.8856 5.89697C17.1892 5.89697 14.8337 6.92591 13.0561 8.55648V6.57106H10.5188C7.11892 6.57106 6.09329 8.37677 5.59807 9.33366H5.5252V6.57106H0V26.2244H5.88005V16.0969C5.88005 13.1886 7.71433 12.582 10.3465 12.4909C9.84921 13.7372 9.57925 15.0816 9.57925 16.4522C9.57925 22.2921 14.3571 26.8608 19.992 26.8608C22.0097 26.8608 23.9554 26.2583 25.5851 25.0894C26.9656 24.1491 28.1415 22.8092 29.0496 21.1269C29.9207 25.6737 34.1123 26.8947 36.9378 26.8947C41.0167 26.8947 44.4749 24.6584 44.8993 20.9749C46.6019 24.487 50.2192 26.8616 54.279 26.8616C56.2942 26.8616 58.2416 26.2592 59.875 25.0903C61.4484 24.0195 62.7627 22.4378 63.7088 20.4122V26.2264H69.5872V16.0646C69.5872 13.3244 71.2144 12.6275 73.6019 12.4805L78.5333 26.2264H84.1612L90.4293 8.84052V26.2264H96.3073V8.29313L109.231 26.2264H116.421L102.116 6.57106ZM19.9216 10.8553C22.9641 10.8553 24.1367 13.0527 24.3814 14.2187H15.4597C15.7028 13.0523 16.8762 10.8553 19.9216 10.8553ZM37.0115 22.1865C36.7614 22.1865 35.0269 22.1865 34.7772 20.382H29.4247C29.4255 20.3803 29.4263 20.3787 29.4272 20.3766H23.2842C22.5223 21.2445 21.6015 21.902 19.9937 21.902C17.689 21.902 15.7429 20.524 15.3856 18.1871H30.1187C30.1899 17.7254 30.2636 17.4045 30.2636 16.6257C30.2636 16.14 30.2325 15.6638 30.1754 15.1967C31.0375 16.2745 32.3749 17.0385 33.8572 17.513C37.6115 18.9634 39.064 19.1415 39.064 20.6644C39.064 21.6196 38.0019 22.1865 37.0115 22.1865ZM54.2078 10.8553C57.2532 10.8553 58.4242 13.0527 58.6709 14.2187H49.7451C49.9927 13.0523 51.1628 10.8553 54.2078 10.8553ZM63.7096 20.3447H57.6188C56.8499 21.2317 55.915 21.902 54.2807 21.902C51.9764 21.902 50.0275 20.524 49.6743 18.1871H63.71L63.7096 20.3447Z"
+      fill="#0F0F0F"
+    />
+  </svg>
+);

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 [`<Inline>`](/components/layout/inline/) and [`<Split>`](/components/layout/split/) component.
+And because we currently don't have a navigation component we build it with `<div>` and `<a>` elements.
+
+To get the logout button, you have to use the `@marigold/icon` package to get the icon and wrap a [`<Button>`](/components/form/button/) with text variant around it.
+
+<ComponentDemo file="./topnavigation.demo.tsx" />

docs/content/recipes/topnavigation.demo.tsx

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+
+import { Button, Inline, Split } from '@marigold/components';
+import { Logout } from '@marigold/icons';
+import { cn } from '@marigold/system';
+
+import { Logo } from './ReservixLogo';
+
+interface NavItemsProps {
+  children?: ReactNode;
+  href?: string;
+  active?: boolean;
+}
+
+const NavItem = ({ children, href, active }: NavItemsProps) => {
+  return (
+    <div className="pb-2">
+      <a
+        href={href}
+        target="_blank"
+        className={cn(
+          'pb-4 hover:border-b-8 hover:border-[#9ca3af] ',
+          active && 'border-b-8 border-[#fa8005]'
+        )}
+        rel="noreferrer"
+      >
+        {children}
+      </a>
+    </div>
+  );
+};
+
+export default () => {
+  const items = [
+    {
+      key: '1',
+      children: 'Recipe',
+      href: '/recipes/navigation-recipes',
+      active: true,
+    },
+    {
+      key: '2',
+      children: 'Components',
+      href: '/components/layout/aside',
+      active: false,
+    },
+    {
+      key: '3',
+      children: 'Start',
+      href: '/',
+      active: false,
+    },
+  ];
+
+  return (
+    <div className="h-16 w-full p-4 shadow">
+      <Inline alignY="center" space={4}>
+        <Logo />
+        {items.map(({ key, children, href, active }) => (
+          <NavItem key={key} href={href} active={active}>
+            {children}
+          </NavItem>
+        ))}
+        <Split />
+        <div className="pb-2">Org. Name</div>
+        <div className="h-full">
+          <Button variant="text" size="small">
+            <Logout />
+          </Button>
+        </div>
+      </Inline>
+    </div>
+  );
+};