mobile menu with animation

app/components/animatedHamburger.css

@@ -0,0 +1,40 @@
+svg.mc-animated-hamburger {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 1.5;
+    cursor:pointer;
+}
+
+svg.mc-animated-hamburger path {
+    fill: none;
+    stroke-width: 1px;
+}
+
+svg.mc-animated-hamburger #top,
+svg.mc-animated-hamburger #bottom {
+  stroke-dasharray: 30, 75.39;
+  transition: all 0.6s cubic-bezier(0.6, 0.33, 0.67, 1.29);
+}
+
+svg.mc-animated-hamburger.active #top,
+svg.mc-animated-hamburger.active #bottom {
+    stroke-dasharray: 75.39;
+    stroke-dashoffset: -60;
+}
+
+svg.mc-animated-hamburger:nth-child(2) {
+    transform: rotate(0deg);
+    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+svg.mc-animated-hamburger:nth-child(2) path {
+    transition: all 0.4s ease-in-out 0.6s;
+}
+
+svg.mc-animated-hamburger:nth-child(2).active {
+    transform: rotate(180deg);
+}
+
+svg.mc-animated-hamburger  #top {
+    stroke-dasharray: 30, 88;
+}

app/components/animatedHamburger.tsx

@@ -0,0 +1,44 @@
+import type { FC } from "react";
+
+import type { SvgProps } from "./icons";
+
+import "./animatedHamburger.css";
+
+type AnimatedHamburgerProps = SvgProps & {
+  open?: boolean | undefined;
+};
+
+export const AnimatedHamburger: FC<AnimatedHamburgerProps> = ({
+  className,
+  dimension,
+  open,
+}) => (
+  <svg
+    height={dimension ?? 24}
+    width={dimension ?? 24}
+    className={`${className ?? ""} fill-none mc-animated-hamburger ${
+      open ? "active" : ""
+    }`}
+    viewBox="0 0 60 40"
+  >
+    <g transform="matrix(1,0,0,1,-389.5,-264.004)">
+      <g>
+        <g transform="matrix(1,0,0,1,0,5)">
+          <path
+            id="top"
+            className="className"
+            d="M390,270L420,270L420,270C420,270 420.195,250.19 405,265C389.805,279.81 390,279.967 390,279.967"
+          />
+        </g>
+        <g transform="matrix(1,1.22465e-16,1.22465e-16,-1,0.00024296,564.935)">
+          <path
+            id="bottom"
+            className="className"
+            d="M390,270L420,270L420,270C420,270 420.195,250.19 405,265C389.805,279.81 390,279.967 390,279.967"
+          />
+        </g>
+        <path className="className" id="middle" d="M390,284.967L420,284.967" />
+      </g>
+    </g>
+  </svg>
+);

app/components/icons.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 
-interface SvgProps {
+export interface SvgProps {
   className?: string | undefined;
   dimension?: number | undefined;
 }

app/components/layout.tsx

@@ -1,7 +1,9 @@
 import { NavLink } from "@remix-run/react";
 import type { LinkProps } from "@remix-run/react";
+import { useReducer } from "react";
 import type { FC, PropsWithChildren } from "react";
 
+import { AnimatedHamburger } from "./animatedHamburger";
 import {
   Phone,
   Mail,
@@ -45,22 +47,52 @@ export const Layout: FC<PropsWithChildren<LyoutProps>> = ({
   style,
   children,
 }) => {
+  const [isOpen, toggleOpen] = useReducer((v: boolean) => !v, false);
   return (
     <div className="h-screen flex flex-col">
-      <header className="w-full bg-indigo-400 sticky shadow-lg -top-5">
-        <nav className="flex justify-around py-6" aria-label="Hlavné">
-          <ul className="flex gap-6 text-cyan-50">
+      <header className="w-full bg-indigo-400 sticky shadow-lg -top-5 text-cyan-50">
+        <nav className="hidden md:flex justify-around py-6" aria-label="Hlavné">
+          <ul className="flex gap-6">
             <MenuItem to="/">Domov</MenuItem>
             <MenuItem to="/o-nas">O nás</MenuItem>
             <MenuItem to="/kontakt">Kontakt</MenuItem>
             <MenuItem to="/podpora">Podporte nás</MenuItem>
           </ul>
         </nav>
+        <nav
+          className="w-full p-2 flex md:hidden left-0 flex-col"
+          aria-label="Hlavné"
+        >
+          <h1 className="font-light py-2 text-2xl">Mc Mamina</h1>
+          <button
+            className="stroke-indigo-100 absolute right-0"
+            onClick={toggleOpen}
+            aria-label="Open menu"
+          >
+            <AnimatedHamburger open={isOpen} dimension={46} />
+          </button>
+          {
+            <ul
+              className={`${
+                isOpen ? "visible" : "hidden"
+              } flex flex-col gap-6 absoluten static text-cyan-50 transition-transform transform ${
+                isOpen
+                  ? "translate-y-0 opacity-100"
+                  : "-translate-y-full opacity-0"
+              }`}
+            >
+              <MenuItem to="/">Domov</MenuItem>
+              <MenuItem to="/o-nas">O nás</MenuItem>
+              <MenuItem to="/kontakt">Kontakt</MenuItem>
+              <MenuItem to="/podpora">Podporte nás</MenuItem>
+            </ul>
+          }
+        </nav>
       </header>
       <main className={`${className} flex-grow`} style={style}>
         {children}
       </main>
-      <footer className="w-full flex pt-10 px-6 pb-16 content-center justify-around bg-neutral-900 h-min-40 text-indigo-100 lg:sticky lg:-bottom-48 ">
+      <footer className="w-full flex pt-10 px-6 pb-16 shadow-xl content-center justify-around bg-neutral-900 h-min-40 text-indigo-100 lg:sticky lg:-bottom-48 ">
         <div className="grid grid-cols-12 gap-6">
           <address className="col-span-12 sm:col-span-6 lg:col-span-6 not-italic font-thin text-sm">
             <h2 className="font-bold leading-10 underline underline-offset-4">