feat: new docs styling

packages/components/src/components/LabeledValue/LabeledValue.module.scss

@@ -25,4 +25,5 @@
 .button {
   grid-area: button;
   align-self: start;
+  justify-self: start;
 }

packages/docs/src/app/_components/layout/HeaderNavigation/HeaderNavigation.module.scss

@@ -0,0 +1,10 @@
+.navigation {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+
+  ul {
+    flex-direction: row;
+    gap: var(--navigation--item-to-item-spacing);
+  }
+}

packages/docs/src/app/_components/layout/HeaderNavigation/HeaderNavigation.tsx

@@ -0,0 +1,46 @@
+"use client";
+import React, { FC, useId } from "react";
+import Navigation, {
+  NavigationItem,
+} from "@mittwald/flow-react-components/Navigation";
+import { MdxFile, SerializedMdxFile } from "@/lib/mdx/MdxFile";
+import { groupBy } from "remeda";
+import styles from "./HeaderNavigation.module.scss";
+import { NextJsNavigationItemLink } from "@/app/_components/layout/MainNavigation/NextJsNavigationItemLink";
+import { GroupHeadingText } from "@/app/_components/layout/MainNavigation/components/GroupHeadingText";
+import { usePathname } from "next/navigation";
+
+interface Props {
+  docs: SerializedMdxFile[];
+}
+
+const HeaderNavigation: FC<Props> = (props) => {
+  const docs = props.docs.map(MdxFile.deserialize);
+
+  const navGroups = groupBy(docs, (d) => d.pathname.split("/")[1]);
+
+  const headingComponentsId = useId();
+  const currentPathname = usePathname();
+
+  const navigationItems = Object.entries(navGroups).map(([group, mdxFiles]) => (
+    <NavigationItem
+      href={mdxFiles[0].pathname}
+      key={mdxFiles[0].pathname}
+      isCurrent={currentPathname.includes(group)}
+      linkComponent={NextJsNavigationItemLink}
+    >
+      <GroupHeadingText>{group}</GroupHeadingText>
+    </NavigationItem>
+  ));
+
+  return (
+    <Navigation
+      aria-labelledby={headingComponentsId}
+      className={styles.navigation}
+    >
+      {navigationItems}
+    </Navigation>
+  );
+};
+
+export default HeaderNavigation;

packages/docs/src/app/_components/layout/HeaderNavigation/index.ts

@@ -0,0 +1,3 @@
+import HeaderNavigation from "@/app/_components/layout/HeaderNavigation/HeaderNavigation";
+
+export default HeaderNavigation;

packages/docs/src/app/_components/layout/MainNavigation/MainNavigation.tsx

@@ -1,15 +1,15 @@
 "use client";
-import React, { FC, Fragment, ReactElement, useId } from "react";
+import React, { FC, Fragment, useId } from "react";
 import Navigation, {
   NavigationItem,
 } from "@mittwald/flow-react-components/Navigation";
 import Heading from "@mittwald/flow-react-components/Heading";
 import { usePathname } from "next/navigation";
 import styles from "./MainNavigation.module.scss";
 import { MdxFile, SerializedMdxFile } from "@/lib/mdx/MdxFile";
-import { NextJsNavigationItemLink } from "@/app/_components/layout/MainNavigation/NextJsNavigationItemLink";
 import { groupBy } from "remeda";
 import { GroupHeadingText } from "@/app/_components/layout/MainNavigation/components/GroupHeadingText";
+import { NextJsNavigationItemLink } from "@/app/_components/layout/MainNavigation/NextJsNavigationItemLink";
 
 interface Props {
   docs: SerializedMdxFile[];
@@ -22,31 +22,32 @@ const MainNavigation: FC<Props> = (props) => {
 
   const headingComponentsId = useId();
   const currentPathname = usePathname();
+  const currentGroupName = currentPathname.split("/")[1];
+  const currentNavGroup = navGroups[currentGroupName];
 
-  const navItem = (mdx: MdxFile): ReactElement => {
-    const href = mdx.pathname;
-    return (
+  const navigationItems =
+    currentNavGroup &&
+    Object.entries(currentNavGroup).map(([, mdxFile]) => (
       <NavigationItem
-        key={href}
-        href={href}
-        isCurrent={href === currentPathname}
+        key={mdxFile.pathname}
+        href={mdxFile.pathname}
+        isCurrent={mdxFile.pathname === currentPathname}
         linkComponent={NextJsNavigationItemLink}
       >
-        {mdx.getNavTitle()}
+        {mdxFile.getNavTitle()}
       </NavigationItem>
-    );
-  };
+    ));
 
-  return Object.entries(navGroups).map(([group, mdxFiles]) => (
-    <Fragment key={group}>
+  return (
+    <Fragment>
       <Heading level={4} id={headingComponentsId} className={styles.heading}>
-        <GroupHeadingText>{group}</GroupHeadingText>
+        <GroupHeadingText>{currentGroupName}</GroupHeadingText>
       </Heading>
       <Navigation aria-labelledby={headingComponentsId}>
-        {mdxFiles.map(navItem)}
+        {navigationItems}
       </Navigation>
     </Fragment>
-  ));
+  );
 };
 
 export default MainNavigation;

packages/docs/src/app/layout.module.scss

@@ -1,56 +1,79 @@
 .body {
-  background-color: var(--neutral--color--400);
+  background-color: var(--neutral--color--100);
 }
 
 .center {
-  max-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
   display: grid;
   min-height: 100vh;
   grid-template-areas:
-    "header header"
     "nav      main"
     "footer    .  ";
   grid-template-columns: 200px minmax(0, 1fr);
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: 1fr auto;
   grid-gap: var(--size-px--l);
+  padding-inline: var(--size-px--l);
 }
 
 @media (max-width: 767px) {
   .center {
     grid-template-areas:
-      "header"
       "nav   "
-      "main  "
-      "footer";
+      "main  ";
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: auto auto 1fr auto;
   }
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: var(--size-px--m) var(--size-px--l);
+  flex-wrap: wrap;
+  row-gap: var(--size-rem--m);
+
+  &:before {
+    content: "";
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 250px;
+    background: var(--primary--color--100);
+    position: absolute;
+    z-index: -1;
+  }
+}
+
 .heading {
-  padding: var(--size-px--s) var(--size-px--l);
-  grid-area: header;
-  background: var(--primary--color--800);
-  color: var(--neutral--color--300);
-  border-end-start-radius: var(--border-radius--default);
-  border-end-end-radius: var(--border-radius--default);
+  align-items: center;
+  column-gap: var(--size-px--m);
+  display: flex;
+}
+.betaBadge {
+  flex-shrink: 0;
 }
 
 .nav {
   grid-area: nav;
-  padding: 0 var(--size-px--s);
 }
 
 .main {
   grid-area: main;
-  background-color: var(--neutral--color--100);
-  border-radius: var(--border-radius--default);
-  padding: var(--size-px--m) var(--size-px--l);
 }
 
 @media (min-width: 1024px) {
   .main {
     padding: var(--size-px--l) var(--size-px--xl);
   }
 }
+
+@media (max-width: 1024px) {
+  .heading {
+    font-size: var(--font-size--l);
+  }
+}

packages/docs/src/app/layout.tsx

@@ -4,11 +4,13 @@ import "./layout.module.scss";
 import type { Metadata } from "next";
 import React, { FC, PropsWithChildren } from "react";
 import MainNavigation from "@/app/_components/layout/MainNavigation/MainNavigation";
+import HeaderNavigation from "@/app/_components/layout/HeaderNavigation/HeaderNavigation";
 import clsx from "clsx";
 import styles from "./layout.module.scss";
 import Heading from "@mittwald/flow-react-components/Heading";
 import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory";
 import Badge from "@mittwald/flow-react-components/Badge";
+import LayoutCard from "@mittwald/flow-react-components/LayoutCard";
 
 export const metadata: Metadata = {
   title: "Flow – mittwald Design System",
@@ -21,14 +23,22 @@ const RootLayout: FC<PropsWithChildren> = async (props) => {
   return (
     <html lang="en">
       <body className={bodyClassName}>
-        <div className={styles.center}>
-          <Heading level={4} className={styles.heading}>
-            Flow – mittwald Design System <Badge variant="warning">beta</Badge>
+        <header className={styles.header}>
+          <Heading level={1} className={styles.heading}>
+            Flow – mittwald Design System{" "}
+            <Badge className={styles.betaBadge} variant="warning">
+              beta
+            </Badge>
           </Heading>
-          <div className={styles.nav}>
+          <HeaderNavigation docs={docs.map((mdx) => mdx.serialize())} />
+        </header>
+        <div className={styles.center}>
+          <LayoutCard className={styles.nav}>
             <MainNavigation docs={docs.map((mdx) => mdx.serialize())} />
-          </div>
-          <main className={styles.main}>{props.children}</main>
+          </LayoutCard>
+          <LayoutCard elementType="main" className={styles.main}>
+            {props.children}
+          </LayoutCard>
         </div>
       </body>
     </html>

packages/docs/src/content/02-components/navigation/examples/default.tsx

@@ -1,5 +1,6 @@
-import Navigation from "@mittwald/flow-react-components/Navigation";
-import { NavigationItem } from "@mittwald/flow-react-components/Navigation";
+import Navigation, {
+  NavigationItem,
+} from "@mittwald/flow-react-components/Navigation";
 
 <Navigation aria-label="Companies">
   <NavigationItem href="https://www.apple.com">

packages/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css

@@ -1,7 +1,7 @@
 .root {
   --border-color: var(--neutral--color--400);
   border: 1px solid var(--border-color);
-  border-radius: var(--border-radius--default);
+  border-radius: var(--corner-radius--default);
 }
 
 .preview {

packages/docs/src/lib/mdx/components/MdxFileView/customComponents.module.css

@@ -20,7 +20,7 @@
 :not(.pre) .code,
 .pre {
   background-color: var(--neutral--color--300);
-  border-radius: var(--border-radius--default);
+  border-radius: var(--corner-radius--default);
   padding-inline: var(--size-px--xs);
   display: inline-block;
 }