Toggle

The toggle function is used to show or hide specific views, such as mobile menus or modals.

Example Usage:

index.htmloptions.json

jsx

<div id="header">
  <Toggle>
    {(isActive, toggle) => (
      <div className={clsx('px-6 lg:px-8 py-6', isActive ? 'pb-6' : '')}>
        <div
          className={clsx(
            'flex flex-col md:flex-row md:items-center md:justify-between w-full text-base font-medium',
            isActive
              ? 'fixed inset-0 px-6 py-6 bg-[linear-gradient(#f1f6ff_0%,#fff_100%)]'
              : ''
          )}
        >
          <div className="w-full flex items-center justify-between md:w-auto md:justify-start">
            <a className="flex items-center gap-3" href="#">
              <Image
                className="h-[32px] w-auto"
                src={header.brand_logo}
                width={32}
                height={32}
                alt={header.brand_name}
              />
              <span>{header.brand_name}</span>
            </a>
            <button className="lg:hidden p-2.5 -mr-4" onClick={toggle}>
              <Icon
                className="text-gray-600"
                name={isActive ? 'multiply-line' : 'menu-line'}
              />
            </button>
          </div>
          <div
            className={clsx(
              'mt-4 lg:mt-0 lg:flex-row lg:items-center lg:ml-8 gap-8',
              isActive ? 'flex flex-col' : 'hidden lg:flex'
            )}
          >
            <nav className="flex flex-col lg:flex-row lg:items-center gap-1 lg:gap-8">
              {header.navigation.map((row, index) => (
                <a key={index} className="py-2 lg:py-0 hover:opacity-80" href={row.url}>
                  <span>{row.title}</span>
                </a>
              ))}
            </nav>
          </div>
        </div>
      </div>
    )}
  </Toggle>
</div>

<div id="header">
  <Toggle>
    {(isActive, toggle) => (
      <div className={clsx('px-6 lg:px-8 py-6', isActive ? 'pb-6' : '')}>
        <div
          className={clsx(
            'flex flex-col md:flex-row md:items-center md:justify-between w-full text-base font-medium',
            isActive
              ? 'fixed inset-0 px-6 py-6 bg-[linear-gradient(#f1f6ff_0%,#fff_100%)]'
              : ''
          )}
        >
          <div className="w-full flex items-center justify-between md:w-auto md:justify-start">
            <a className="flex items-center gap-3" href="#">
              <Image
                className="h-[32px] w-auto"
                src={header.brand_logo}
                width={32}
                height={32}
                alt={header.brand_name}
              />
              <span>{header.brand_name}</span>
            </a>
            <button className="lg:hidden p-2.5 -mr-4" onClick={toggle}>
              <Icon
                className="text-gray-600"
                name={isActive ? 'multiply-line' : 'menu-line'}
              />
            </button>
          </div>
          <div
            className={clsx(
              'mt-4 lg:mt-0 lg:flex-row lg:items-center lg:ml-8 gap-8',
              isActive ? 'flex flex-col' : 'hidden lg:flex'
            )}
          >
            <nav className="flex flex-col lg:flex-row lg:items-center gap-1 lg:gap-8">
              {header.navigation.map((row, index) => (
                <a key={index} className="py-2 lg:py-0 hover:opacity-80" href={row.url}>
                  <span>{row.title}</span>
                </a>
              ))}
            </nav>
          </div>
        </div>
      </div>
    )}
  </Toggle>
</div>

json

[
  {
    name: 'header',
    title: 'Header',
    fields: [
      {
        name: 'brand_name',
        title: 'Brand name',
        type: 'text',
        default: 'Bright',
        ai: true
      },
      {
        name: 'brand_logo',
        title: 'Brand logo',
        type: 'image',
        default: 'https://storage.earlybird.im/example/bright-logo.png'
      },
      {
        name: 'navigation',
        title: 'Navigation',
        type: 'list',
        fields: [
          {
            name: 'title',
            title: 'Title',
            type: 'text',
            primary: true
          },
          {
            name: 'url',
            title: 'Link',
            type: 'text'
          }
        ],
        default: [
          {
            title: 'Features',
            url: '#features'
          },
          {
            title: 'Pricing',
            url: '#pricing'
          },
          {
            title: 'FAQs',
            url: '#faq'
          },
          {
            title: 'NewsLetter',
            url: '#newsletter'
          }
        ]
      }
    ]
  }
]

[
  {
    name: 'header',
    title: 'Header',
    fields: [
      {
        name: 'brand_name',
        title: 'Brand name',
        type: 'text',
        default: 'Bright',
        ai: true
      },
      {
        name: 'brand_logo',
        title: 'Brand logo',
        type: 'image',
        default: 'https://storage.earlybird.im/example/bright-logo.png'
      },
      {
        name: 'navigation',
        title: 'Navigation',
        type: 'list',
        fields: [
          {
            name: 'title',
            title: 'Title',
            type: 'text',
            primary: true
          },
          {
            name: 'url',
            title: 'Link',
            type: 'text'
          }
        ],
        default: [
          {
            title: 'Features',
            url: '#features'
          },
          {
            title: 'Pricing',
            url: '#pricing'
          },
          {
            title: 'FAQs',
            url: '#faq'
          },
          {
            title: 'NewsLetter',
            url: '#newsletter'
          }
        ]
      }
    ]
  }
]

Toggle ​

Example Usage: ​

Toggle

Example Usage: