import {
  MegaMenu,
  Button,
  NavbarToggle,
  NavbarCollapse,
  NavbarLink,
  MegaMenuDropdown,
} from 'flowbite-react'
import FullLogo from '@/app/(DashboardLayout)/layout/shared/logo/FullLogo'

const DefaultMegamenuCode = () => {
  return (
    <div>
      <MegaMenu className='rounded-md'>
        <div className='mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4 md:space-x-8'>
          <FullLogo />
          <div className='order-2 hidden items-center md:flex'>
            <a
              href='#'
              className='mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5'>
              Login
            </a>
            <Button href='#' color='primary'>
              Sign up
            </Button>
          </div>
          <NavbarToggle />
          <NavbarCollapse>
            <NavbarLink href='#'>Home</NavbarLink>
            <NavbarLink>
              <MegaMenuDropdown toggle={<>Company</>}>
                <ul className='grid grid-cols-3'>
                  <div className='space-y-4 p-4'>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        About Us
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Library
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Resources
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Pro Version
                      </a>
                    </li>
                  </div>
                  <div className='space-y-4 p-4'>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Contact Us
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Support Center
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Terms
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Blog
                      </a>
                    </li>
                  </div>
                  <div className='space-y-4 p-4'>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Newsletter
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        Playground
                      </a>
                    </li>
                    <li>
                      <a
                        href='#'
                        className='hover:text-primary-600 dark:hover:text-primary-500'>
                        License
                      </a>
                    </li>
                  </div>
                </ul>
              </MegaMenuDropdown>
            </NavbarLink>
            <NavbarLink href='#'>Team</NavbarLink>
            <NavbarLink href='#'>Contact</NavbarLink>
          </NavbarCollapse>
        </div>
      </MegaMenu>
    </div>
  )
}

export default DefaultMegamenuCode

import {
  MegaMenu,
  Button,
  NavbarToggle,
  NavbarCollapse,
  NavbarLink,
  MegaMenuDropdown,
} from 'flowbite-react'
import FullLogo from '@/app/(DashboardLayout)/layout/shared/logo/FullLogo'

const MegamenuIconCode = () => {
  return (
    <div>
      <MegaMenu className='rounded-md'>
        <div className='mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4 md:space-x-8'>
          <FullLogo />
          <div className='order-2 hidden items-center md:flex'>
            <a
              href='#'
              className='mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5'>
              Login
            </a>
            <Button href='#' color='primary'>
              Sign up
            </Button>
          </div>
          <NavbarToggle />
          <NavbarCollapse>
            <NavbarLink href='#'>Home</NavbarLink>
            <MegaMenuDropdown toggle={<>Company</>}>
              <ul className='grid grid-cols-3'>
                <div className='space-y-4 p-4'>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      About Us
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Library
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Resources
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Pro Version
                    </a>
                  </li>
                </div>
                <div className='space-y-4 p-4'>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Contact Us
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Support Center
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Terms
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Blog
                    </a>
                  </li>
                </div>
                <div className='space-y-4 p-4'>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Newsletter
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      Playground
                    </a>
                  </li>
                  <li>
                    <a
                      href='#'
                      className='hover:text-primary-600 dark:hover:text-primary-500'>
                      License
                    </a>
                  </li>
                </div>
              </ul>
            </MegaMenuDropdown>
            <NavbarLink href='#'>Team</NavbarLink>
          </NavbarCollapse>
        </div>
      </MegaMenu>
    </div>
  )
}

export default MegamenuIconCode

import FullLogo from '@/app/(DashboardLayout)/layout/shared/logo/FullLogo'
import {
  MegaMenu,
  MegaMenuDropdown,
  MegaMenuDropdownToggle,
  Navbar,
  NavbarCollapse,
  NavbarLink,
  NavbarToggle,
} from 'flowbite-react'
import { HiChevronDown } from 'react-icons/hi'

const FullWidthMegamenuCode = () => {
  return (
    <div>
      <MegaMenu className='rounded-md'>
        <FullLogo />
        <NavbarToggle />
        <NavbarCollapse>
          <NavbarLink href='/'>Home</NavbarLink>
          <NavbarLink>
            <MegaMenuDropdownToggle>
              Company
              <HiChevronDown className='ml-2' />
            </MegaMenuDropdownToggle>
          </NavbarLink>
          <NavbarLink href='/'>Marketplace</NavbarLink>
          <NavbarLink href='/'>Resources</NavbarLink>
          <NavbarLink href='/'>Contact</NavbarLink>
        </NavbarCollapse>
        <MegaMenuDropdown>
          <ul className='mx-auto mt-6 grid max-w-screen-xl border-y border-border dark:border-darkborder px-4 py-5 sm:grid-cols-2 md:grid-cols-3 md:px-6'>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Online Stores</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Segmentation</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Marketing CRM</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Online Stores</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Segmentation</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Marketing CRM</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Audience Management</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Creative Tools</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700'>
                <div className='font-semibold'>Marketing Automation</div>
                <span className='text-sm text-gray-500 dark:text-gray-400'>
                  Connect with third-party tools that you're already using.
                </span>
              </a>
            </li>
          </ul>
        </MegaMenuDropdown>
      </MegaMenu>
    </div>
  )
}

export default FullWidthMegamenuCode