freesewing/sites/org/components/navigation/modal-menu.mjs

import { SectionsMenu } from 'shared/components/navigation/sections-menu.mjs'
import { useTranslation } from 'next-i18next'
import { ActiveSection, ns as primaryNs } from 'shared/components/navigation/primary.mjs'
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
import { NavLinks, Breadcrumbs } from 'shared/components/navigation/sitenav.mjs'
import { PageLink } from 'shared/components/page-link.mjs'

export const ns = primaryNs

export const ModalMenu = () => {
  const { t } = useTranslation(ns)

  return (
    <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="left">
      <div className="max-w-full">
        <div
          className={`
        py-4 lg:py-16 w-full m-auto
        flex flex-col-reverse gap-0 flex-wrap justify-between
        lg:max-w-6xl lg:flex-nowrap lg:gap-8 lg:flex-row
      `}
        >
          <div className="w-full lg:w-1/2">
            <SectionsMenu />
          </div>
          <div className="w-full lg:w-1/2">
            <div className="flex flex-row gap-2 mb-4 items-center justify-center">
              <PageLink href="/" txt={t('sections:home')} />
              <span>|</span>
              <PageLink href="/search" txt={t('sections:search')} />
              <span>|</span>
              <PageLink href="/sitemap" txt={t('sections:sitemap')} />
              <span>|</span>
              <PageLink href="/support" txt={t('sections:support')} />
            </div>
            <Breadcrumbs lead />
            <NavLinks />
            <ActiveSection bare />
          </div>
        </div>
      </div>
    </ModalWrapper>
  )
}