Merge pull request #56 from IgorKowalczyk/mobile-menu-fix

Fix mobile menu
IgorKowalczyk · Jul 17, 2022 · 590e4b9 · 590e4b9
2 parents 09c9783 + 078e80c
commit 590e4b9
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/components/elements/MobileNav.jsx b/components/elements/MobileNav.jsx
@@ -23,16 +23,16 @@ export default function MobileNav() {
  isMenuOpen ? setIsMenuOpen(false) : setIsMenuOpen(true);
  }}
  >
- <MenuAlt2Icon data-hide={isMenuOpen} className="absolute top-1/2 left-1/2 h-5 w-5 -translate-y-1/2 -translate-x-1/2 scale-100 text-gray-900 opacity-100 duration-200 motion-reduce:transition-none dark:text-gray-100" />
- <XIcon data-hide={!isMenuOpen} className="absolute top-1/2 left-1/2 h-5 w-5 -translate-y-1/2 -translate-x-1/2 scale-100 text-gray-900 opacity-100 duration-200 motion-reduce:transition-none dark:text-gray-100" />
+ <MenuAlt2Icon data-hide={isMenuOpen} className="absolute top-1/2 left-1/2 h-5 w-5 -translate-y-1/2 -translate-x-1/2 scale-100 text-gray-900 !opacity-100 duration-200 motion-reduce:transition-none dark:text-gray-100" />
+ <XIcon data-hide={!isMenuOpen} className="absolute top-1/2 left-1/2 h-5 w-5 -translate-y-1/2 -translate-x-1/2 scale-100 text-gray-900 !opacity-100 duration-200 motion-reduce:transition-none dark:text-gray-100" />
  </button>
  {isMounted && (
- <div className={`${isRendered ? "rendered opacity-100" : ""} absolute left-0 top-0 z-[1001] mt-[73px] flex h-screen w-3/4 flex-col opacity-0 backdrop-blur-[9px] duration-200 motion-reduce:transition-none md:hidden`}>
+ <div className={`${isRendered ? "rendered !opacity-100" : ""} absolute left-0 top-0 z-[1001] mt-[73px] flex h-screen w-3/4 flex-col opacity-0 backdrop-blur-[9px] duration-200 motion-reduce:transition-none md:hidden`}>
  <div className="h-full border-r-[1px] border-black/[10%] bg-white bg-opacity-70 px-3.5 shadow duration-200 firefox:bg-opacity-100 motion-reduce:transition-none dark:border-white/[15%] dark:bg-[#08152b] dark:bg-opacity-70 dark:shadow-2xl dark:firefox:bg-opacity-100">
  <div className="mt-3">
  {menuItems.map((item, index) => {
  return (
- <p key={index} className={`${isRendered ? "w-full translate-x-0 border-gray-200 opacity-100 dark:border-gray-700/75" : "w-0 border-transparent dark:border-transparent"} group translate-x-[-16px] whitespace-nowrap border-b text-sm font-semibold text-gray-900 opacity-0 duration-200 motion-reduce:transition-none dark:text-gray-100`} style={{ transitionDelay: `${150 * index - 50}ms` }}>
+ <p key={index} className={`${isRendered ? "w-full translate-x-0 border-gray-200 !opacity-100 dark:border-gray-700/75" : "w-0 border-transparent dark:border-transparent"} group translate-x-[-16px] whitespace-nowrap border-b text-sm font-semibold text-gray-900 opacity-0 duration-200 motion-reduce:transition-none dark:text-gray-100`} style={{ transitionDelay: `${150 * index - 50}ms` }}>
  <Link href={item.href} key={index}>
  <a
  className="flex w-auto p-4 pb-4 duration-200 group-hover:pl-6 motion-reduce:transition-none"