Merge pull request #41 from cortex-reply/feature/chat-ui

feat: related pages menu

Author: rob-at-cortex

src/components/HeaderFooter/RelatedPagesMenu.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui'
+import { BrandLogo } from './BrandLogo'
+import { useTheme } from 'next-themes'
+
+import { Moon, Sun } from 'lucide-react'
+import { StaticImageData } from 'next/image'
+import HeaderMenu, { type HeaderMenuProps } from './HeaderMenu'
+import { PopoverGroup } from '@headlessui/react'
+import { Container } from '@/components/Other/Container'
+import { cn } from '@/lib/utils'
+
+interface HeaderProps {
+  menuItems?: HeaderMenuProps[]
+  wide?: boolean
+  dark?: boolean
+}
+
+export function RelatedPagesMenu({ menuItems, wide = false, dark = true }: HeaderProps) {
+  return (
+    <>
+      <menu
+        className={cn(
+          'w-full relative py-2 transition-all duration-300 hidden lg:block',
+          dark ? 'bg-black text-white' : 'light bg-background text-foreground border-b border-accent',
+        )}
+      >
+        {/* <Container className="px-0"> */}
+        <nav className="container backdrop-blur-sm p-0">
+          <div className="container">
+            <div
+              className={cn('flex items-center justify-between px-9 py-0', !wide && 'container')}
+            >
+              <PopoverGroup className="hidden lg:flex lg:gap-x-12">
+                {menuItems && menuItems.map((menu) => <HeaderMenu key={menu.name} {...menu} />)}
+              </PopoverGroup>
+            </div>
+          </div>
+        </nav>
+      </menu>
+    </>
+  )
+}

src/pages/Website.stories.tsx

@@ -3049,6 +3049,42 @@ export const SideBySide = {
   },
 }
 
+
+
+export const RelatedPages = {
+  args: {
+    ...Default.args,
+    related: [
+      {
+        href: '#',
+        name: 'Test Page',
+      },
+      {
+        href: '#',
+        name: 'Another Test Page',
+      },
+    ],
+  }
+}
+
+
+export const RelatedPagesHighImpact = {
+  args: {
+    ...HighImpactHero.args,
+    related: [
+      {
+        href: '#',
+        name: 'Test Page',
+      },
+      {
+        href: '#',
+        name: 'Another Test Page',
+      },
+    ],
+  }
+}
+
+
 export const Broken = {
   args: {
     ...Default.args,
@@ -4393,3 +4429,5 @@ export const WithImage = {
     },
   },
 }
+
+

src/pages/Website.tsx

@@ -8,6 +8,7 @@ import { Page as PageType, ReusableContent } from '@/payload-types'
 import { getTableOfContents } from '../utils'
 import { Observer } from 'tailwindcss-intersect'
 import { useEffect } from 'react'
+import { RelatedPagesMenu } from '@/components/HeaderFooter/RelatedPagesMenu'
 
 interface WebsiteSectionProps {
   hero: any
@@ -32,12 +33,27 @@ export default function WebsiteSection({ ...args }: WebsiteSectionProps) {
   }, [])
   return (
     <div className="relative overflow-none scroll-smooth snap-y snap-mandatory overscroll-contain">
-
+      
     {/* <div className="flex fixed flex-col w-screen h-screen max-h-screen overflow-auto overscroll-contain"> */}
-      <Header isMenuOpen={true} logoLight={logoLight} logoDark={logoDark} />
+      <Header isMenuOpen={true} logoLight={logoLight} logoDark={logoDark} wide/>
+      {/* { args.hero && args.hero.type != 'lowImpact' && args.related && (
+        <div className='fixed top-16 z-50'>
+        <RelatedPagesMenu
+          menuItems={args.related}
+          wide />
+                </div>
+
+        )} */}
+      
       <div>
       <RenderHero {...args.hero} />
       </div>
+      { args.hero && args.related && (
+        <RelatedPagesMenu
+          menuItems={args.related}
+          dark={args.hero.type === 'highImpact' ? false : true}
+          wide />
+        )}
 {/* 
       <MainPageSection
         edit={args.edit}