fix: some fixies to layout, navbar

customtypes/home_page/index.json

@@ -6,6 +6,24 @@
   "status": true,
   "json": {
     "Main": {
+      "theme": {
+        "type": "Select",
+        "config": {
+          "label": "Theme",
+          "placeholder": "",
+          "options": ["Inherit from Parent", "Light", "Dark"],
+          "default_value": "Inherit from Parent"
+        }
+      },
+      "navbar": {
+        "type": "Select",
+        "config": {
+          "label": "Navbar Theme",
+          "placeholder": "",
+          "options": ["Inherit from Parent", "Light", "Dark"],
+          "default_value": "Inherit from Parent"
+        }
+      },
       "slices": {
         "type": "Slices",
         "fieldset": "Slice Zone",

customtypes/page/index.json

@@ -12,6 +12,15 @@
           "label": "UID"
         }
       },
+      "navbar_variant": {
+        "type": "Select",
+        "config": {
+          "label": "Navbar Variant",
+          "placeholder": "Select the Navbar Theme",
+          "options": ["default", "brand"],
+          "default_value": "default"
+        }
+      },
       "slices": {
         "type": "Slices",
         "fieldset": "Slice Zone",

prismicio-types.d.ts

@@ -642,6 +642,36 @@ type HomePageDocumentDataSlicesSlice =
  * Content for Home page documents
  */
 interface HomePageDocumentData {
+  /**
+   * Theme field in *Home page*
+   *
+   * - **Field Type**: Select
+   * - **Placeholder**: *None*
+   * - **Default Value**: Inherit from Parent
+   * - **API ID Path**: home_page.theme
+   * - **Tab**: Main
+   * - **Documentation**: https://prismic.io/docs/field#select
+   */
+  theme: prismic.SelectField<
+    "Inherit from Parent" | "Light" | "Dark",
+    "filled"
+  >;
+
+  /**
+   * Navbar Theme field in *Home page*
+   *
+   * - **Field Type**: Select
+   * - **Placeholder**: *None*
+   * - **Default Value**: Inherit from Parent
+   * - **API ID Path**: home_page.navbar
+   * - **Tab**: Main
+   * - **Documentation**: https://prismic.io/docs/field#select
+   */
+  navbar: prismic.SelectField<
+    "Inherit from Parent" | "Light" | "Dark",
+    "filled"
+  >;
+
   /**
    * Slice Zone field in *Home page*
    *
@@ -976,6 +1006,18 @@ type PageDocumentDataSlicesSlice =
  * Content for Platform documents
  */
 interface PageDocumentData {
+  /**
+   * Navbar Variant field in *Platform*
+   *
+   * - **Field Type**: Select
+   * - **Placeholder**: Select the Navbar Theme
+   * - **Default Value**: default
+   * - **API ID Path**: page.navbar_variant
+   * - **Tab**: Main
+   * - **Documentation**: https://prismic.io/docs/field#select
+   */
+  navbar_variant: prismic.SelectField<"default" | "brand", "filled">;
+
   /**
    * Slice Zone field in *Platform*
    *

src/app/(frontend)/[lang]/(pages)/platform/[uid]/page.tsx → src/app/(frontend)/[lang]/(marketing)/platform/[uid]/page.tsx

@@ -1,3 +1,5 @@
+import { MainLayout } from "@/components/layout/main-layout";
+import { getLayoutData } from "@/data/layout";
 import { createClient } from "@/prismicio";
 import { components } from "@/slices";
 import { asImageSrc, isFilled } from "@prismicio/client";
@@ -18,11 +20,23 @@ export default async function PrismigPage(props: Props) {
   const params = await props.params;
 
   const client = createClient();
+  const layout = await getLayoutData(params.lang);
   const page = await client
     .getByUID("page", params.uid, { lang: params.lang })
     .catch(() => notFound());
 
-  return <SliceZone slices={page.data.slices} components={components} />;
+  return (
+    <MainLayout
+      layout={layout}
+      settings={{
+        header: {
+          variant: page.data.navbar_variant,
+        },
+      }}
+    >
+      <SliceZone slices={page.data.slices} components={components} />
+    </MainLayout>
+  );
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {

src/app/(frontend)/[lang]/slice-simulator/page.tsx → src/app/(frontend)/[lang]/(pages)/slice-simulator/page.tsx

@@ -5,7 +5,7 @@ import {
 } from "@slicemachine/adapter-next/simulator";
 import { SliceZone } from "@prismicio/react";
 
-import { components } from "../../../../slices";
+import { components } from "../../../../../slices";
 
 export default async function SliceSimulatorPage({
   searchParams,

src/app/(frontend)/[lang]/blog/[uid]/page.tsx

@@ -10,7 +10,10 @@ import * as prismicR from "@prismicio/richtext";
 import { notFound } from "next/navigation";
 import { headingRecipe } from "@/components/recipes/heading-recipe";
 import { buttonVariants } from "@/components/ui/button";
-import { TableOfContents } from "@/components/prismic/table-of-contents";
+import {
+  type DataSlice,
+  TableOfContents,
+} from "@/components/prismic/table-of-contents";
 import { BlogCategoryLink } from "../_components/blog-category-link";
 import { AuthorBadge } from "../_components/author-badge";
 
@@ -80,7 +83,7 @@ export default async function PrismigPage(props: Props) {
         </div>
       </header>
       <div className="container flex flex-col lg:grid lg:grid-cols-12 lg:gap-8 xl:gap-6 pt-10">
-        <div className="lg:col-span-8 lg:max-w-[46rem] pb-12 xl:pl-11 xl:pr-16 order-2">
+        <div className="lg:col-span-8 pb-12 xl:pl-11 xl:pr-16 order-2 group/blog">
           <SliceZone slices={page.data.slices} components={components} />
           <footer>
             {author && (
@@ -126,7 +129,11 @@ export default async function PrismigPage(props: Props) {
             <TableOfContents
               className="bg-background border-2 rounded-xl"
               tocTitle="Table of contents"
-              slices={page.data.slices}
+              slices={
+                page.data.slices.filter(
+                  (slice) => slice.slice_type === "text_content"
+                ) as DataSlice[]
+              }
             />
           </div>
         </aside>

src/components/layout/main-layout.tsx

@@ -1,18 +1,25 @@
 import type { LayoutDocument } from "../../../prismicio-types";
 import { SiteFooter } from "./site-footer";
-import { SiteHeader } from "./site-header";
+import { SiteHeader, type SiteHeaderSlotRecipe } from "./site-header";
+
+type LayoutSettings = {
+  header?: {
+    variant?: SiteHeaderSlotRecipe["variant"];
+  };
+};
 
 export type MainLayoutProps = {
   children: React.ReactNode;
   layout: LayoutDocument;
+  settings?: LayoutSettings;
 };
 
 export function MainLayout(props: MainLayoutProps) {
-  const { children, layout } = props;
+  const { children, layout, settings } = props;
 
   return (
     <div className="relative flex flex-col min-h-screen">
-      <SiteHeader layout={layout} />
+      <SiteHeader layout={layout} variant={settings?.header?.variant} />
       <main className="grow flex flex-col">{children}</main>
       <SiteFooter layout={layout} />
     </div>

src/components/layout/main-navigation.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 import * as NavigationMenu from "@radix-ui/react-navigation-menu";
 import type { LayoutDocument } from "../../../prismicio-types";
 import { MenuItemWithSubMenu } from "./menu-item-with-submenu";
@@ -33,22 +33,27 @@ const mainNavigationSlotRecipe = tv({
         ctaContainer: "bg-transparent",
         viewport: "bg-background",
       },
+      brand: {},
     },
   },
   defaultVariants: {
     variant: "default",
   },
 });
 
+export type MainNavigationSlotRecipe = VariantProps<
+  typeof mainNavigationSlotRecipe
+>;
+
 type MainNavigationProps = {
   layout: LayoutDocument;
-};
+} & MainNavigationSlotRecipe;
 
 export const MainNavigation = (props: MainNavigationProps) => {
-  const { layout } = props;
+  const { layout, variant } = props;
 
   const pathname = usePathname();
-  const css = mainNavigationSlotRecipe();
+  const css = mainNavigationSlotRecipe({ variant });
 
   return (
     <nav aria-label="Main Navigation" className={css.root()}>
@@ -58,10 +63,18 @@ export const MainNavigation = (props: MainNavigationProps) => {
             <ul className="group flex gap-x-4 items-center justify-start relative z-10">
               {layout.data.slices.map((item) => {
                 if (item.variation === "default") {
-                  return <MenuItem key={item.id} slice={item} />;
+                  return (
+                    <MenuItem key={item.id} slice={item} variant={variant} />
+                  );
                 }
 
-                return <MenuItemWithSubMenu key={item.id} slice={item} />;
+                return (
+                  <MenuItemWithSubMenu
+                    key={item.id}
+                    variant={variant}
+                    slice={item}
+                  />
+                );
               })}
             </ul>
           </NavigationMenu.List>
@@ -70,11 +83,14 @@ export const MainNavigation = (props: MainNavigationProps) => {
           </div>
         </NavigationMenu.Root>
       </div>
-      <div className={css.ctaContainer()}>
+      <div
+        className={css.ctaContainer()}
+        data-theme={variant === "brand" ? "dark" : "light"}
+      >
         {layout.data.cta && (
           <PrismicNextLink
             field={layout.data.cta}
-            className={buttonVariants({ variant: "default" })}
+            className={buttonVariants({ variant: "outline" })}
           />
         )}
       </div>

src/components/layout/menu-item-with-submenu.tsx

@@ -2,18 +2,18 @@ import { ChevronDown } from "lucide-react";
 import type { MenuItemSliceWithSubMenu } from "../../../prismicio-types";
 import * as NavigationMenu from "@radix-ui/react-navigation-menu";
 import { cn } from "@/lib/utils";
-import { menuItemRecipe } from "./recipe";
+import { type MenuItemRecipe, menuItemRecipe } from "./recipe";
 import { SliceZone } from "@prismicio/react";
 import { components } from "@/slices";
 
 type MenuItemWithSubMenuProps = {
   slice: MenuItemSliceWithSubMenu;
-};
+} & MenuItemRecipe;
 
 export const MenuItemWithSubMenu = (props: MenuItemWithSubMenuProps) => {
-  const { slice } = props;
+  const { slice, variant } = props;
 
-  const css = menuItemRecipe();
+  const css = menuItemRecipe({ variant });
 
   return (
     <NavigationMenu.Item>
@@ -25,7 +25,7 @@ export const MenuItemWithSubMenu = (props: MenuItemWithSubMenuProps) => {
           aria-hidden
         />
       </NavigationMenu.Trigger>
-      <NavigationMenu.Content className="absolute left-0 top-0 w-screen">
+      <NavigationMenu.Content className="absolute left-0 top-0 w-screen bg-background">
         <div className="container px-8 flex">
           <div className="flex flex-col lg:w-[26.6666666667%] lg:py-12 gap-3 my-6 lg:my-0">
             <SliceZone

src/components/layout/menu-item.tsx

@@ -1,17 +1,17 @@
 import { PrismicNextLink } from "@prismicio/next";
 import type { MenuItemSliceDefault } from "../../../prismicio-types";
 import * as NavigationMenu from "@radix-ui/react-navigation-menu";
-import { menuItemRecipe } from "./recipe";
+import { type MenuItemRecipe, menuItemRecipe } from "./recipe";
 import { cn } from "@/lib/utils";
 
 type MenuItemProps = {
   slice: MenuItemSliceDefault;
-};
+} & MenuItemRecipe;
 
 export const MenuItem = (props: MenuItemProps) => {
-  const { slice } = props;
+  const { slice, variant } = props;
 
-  const css = menuItemRecipe();
+  const css = menuItemRecipe({ variant });
 
   return (
     <NavigationMenu.Item>

src/components/layout/recipe.ts

@@ -1,13 +1,27 @@
-import { tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 
 export const menuItemRecipe = tv({
   slots: {
     root: [
       "text-start",
-      "transition-colors duration-100 text-foreground/80",
-      "hover:text-foreground",
+      "transition-colors duration-100 ",
       "font-semibold text-sm",
       "flex items-center w-full underline-offset-8 focus:outline-none focus:underline",
     ],
   },
+  variants: {
+    variant: {
+      default: {
+        root: "text-foreground/80 hover:text-foreground",
+      },
+      brand: {
+        root: "text-white/80 hover:text-white",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
 });
+
+export type MenuItemRecipe = VariantProps<typeof menuItemRecipe>;