mobile-nav-button.tsx

import {
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react'
import { useState, type ReactElement } from 'react'
import clsx from 'clsx'
import bars2Icon from '@iconify/icons-heroicons/bars-2-20-solid'
import xMarkIcon from '@iconify/icons-heroicons/x-mark-20-solid'
import { Icon } from '@/components/icon'
import { MobileNav } from './mobile-nav'

interface MobileNavButtonProps {
  dark?: boolean
}

/**
 * Sticky Mobile Nav Button with Sidebar Dialog
 * Opens mobile navigation in a sliding sidebar dialog