36 lines
940 B
JavaScript
36 lines
940 B
JavaScript
import Icon from 'shared/components/icon/index.js'
|
|
|
|
const TopLevel = ({ icon, title }) => (
|
|
<details className='p-3'>
|
|
<summary className='flex flex-row uppercase font-bold text-lg gap-6'>
|
|
{icon}
|
|
{title}
|
|
</summary>
|
|
<div className='pl-4'>
|
|
<ul>
|
|
<li>Getting started on Linux</li>
|
|
<li>Getting started on Mac</li>
|
|
<li>Getting started on Windows</li>
|
|
<li>Pattern design tutorial</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
)
|
|
|
|
const PrimaryMenu = props => {
|
|
|
|
return (
|
|
<nav className={`
|
|
sm:max-w-sm
|
|
bg-base-200
|
|
grow
|
|
`}>
|
|
<TopLevel icon={<Icon icon='tutorial' size={28}/>} title='tutorials' />
|
|
<TopLevel icon={<Icon icon='guide' size={28}/>} title='guides' />
|
|
<TopLevel icon={<Icon icon='help' size={28}/>} title='howtos' />
|
|
<TopLevel icon={<Icon icon='docs' size={28}/>} title='reference' />
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default PrimaryMenu
|