Toggle
The toggle function is used to show or hide specific views, such as mobile menus or modals.
Example Usage:
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'
}
]
}
]
}
]