Add Layout Artifacts

[AyabongaQwabi]

GitHub Project Task: Configurable Navbar and Footer

---

Task Description

Make the website's navigation bar and footer configurable so that users can select a navbar or footer type to use for their website. These components will not be included in the content generators but will function as standalone configurable elements within the layout system.

---

Checklist

1. Inspect Flexiwind Components

• Visit and review the following links to inspect available navbar and footer components:
  • Navbars: Flexiwind Navbars
  • Footers: Flexiwind Footers

2. Convert Components

• Create React components for the selected navbar and footer blocks.
• Save the components in appropriate folders:
  • src/components/layout/navbars
  • src/components/layout/footers

3. Add Configurable Support

• Modify the Layout component to:
  • Use the useSiteConfig hook to load the site configuration.
  • Dynamically render the selected navbar (config.selectedHeader) and footer (config.selectedFooter) based on a headers and footers map.

4. Restrict Page Listings

• Ensure the navbar and footer configuration only allow listing pages defined in the pages configuration.
• Add validation to check if pages exist in the configuration.

5. Add to Configuration Map

• Add all navbar and footer components to a configuration map:
  • headers map in src/components/layout/navbars/index.js
  • footers map in src/components/layout/footers/index.js

6. Create Layout Artifacts

• Create a new demo in src/pages/layout-artifacts.js to demonstrate the configurable navbar and footer components.
• Provide examples of different layouts with dynamically selected navbars and footers.

---

Code Examples

Example: Navbar Component

import React from 'react';

export const SimpleNavbar = ({ theme, pages }) => {
  return (
    <nav className={`bg-${theme?.colors?.background || 'white'} shadow-md`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <a href="/" className={`text-${theme?.colors?.primaryText || 'blue-700'} font-bold`}>
              Brand
            </a>
          </div>
          <div className="flex space-x-4">
            {pages?.map((page, index) => (
              <a
                key={index}
                href={page.path}
                className={`text-${theme?.colors?.secondaryText || 'gray-600'} hover:text-${theme?.colors?.hover || 'gray-800'}`}
              >
                {page.name}
              </a>
            ))}
          </div>
        </div>
      </div>
    </nav>
  );
};

---

Mapping Components

In src/components/layout/navbars/index.js:

import { SimpleNavbar } from './SimpleNavbar';
// Add other navbars as needed

export const headers = {
  SimpleNavbar,
  // Add other navbar components
};

In src/components/layout/footers/index.js:

import { SimpleFooter } from './SimpleFooter';
// Add other footers as needed

export const footers = {
  SimpleFooter,
  // Add other footer components
};

---

Modify Layout Component

In src/components/layout/Layout.js:

import { useSiteConfig } from '@/hooks/useSiteConfig';
import { headers } from './navbars';
import { footers } from './footers';

export const Layout = ({ children }) => {
  const config = useSiteConfig();

  const Header = headers[config.selectedHeader];
  const Footer = footers[config.selectedFooter];

  return (
    <>
      {Header && <Header theme={config.theme} pages={config.pages} />}
      <main>{children}</main>
      {Footer && <Footer theme={config.theme} pages={config.pages} />}
    </>
  );
};

---

Demo Configuration in layout-artifacts.js

import React from 'react';
import { Layout } from '@/components/layout/Layout';

const demoConfig = {
  selectedHeader: 'SimpleNavbar',
  selectedFooter: 'SimpleFooter',
  theme: {
    colors: {
      background: 'gray-50',
      primaryText: 'blue-700',
      secondaryText: 'gray-500',
      hover: 'blue-900',
    },
  },
  pages: [
    { name: 'Home', path: '/' },
    { name: 'About', path: '/about' },
    { name: 'Contact', path: '/contact' },
  ],
};

const LayoutArtifacts = () => {
  return (
    <Layout {...demoConfig}>
      <h1 className="text-center">Layout Artifacts Demo</h1>
    </Layout>
  );
};

export default LayoutArtifacts;

---

Expected Deliverables

1. Navbar and footer React components in src/components/layout/navbars and src/components/layout/footers.
2. Updated Layout component to dynamically render headers and footers based on the configuration.
3. Configurable headers and footers maps in respective index.js files.
4. A new layout-artifacts.js page demonstrating the dynamic rendering.

Let me know if you have additional requirements or need further clarification!