feat: toggle open/close footer menu sections

src/components/Footer.jsx

-import React from "react";
+import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
+import useWindowSize from "@rooks/use-window-size";
+import classNames from "classnames";
 
 const Footer = () => {
+  const { innerWidth } = useWindowSize();
+  const [showCfMenu, setShowCfMenu] = useState(false);
+  const [showOtherMenu, setShowOtherMenu] = useState(false);
+  const isLg = innerWidth >= 1024;
+
   return (
     <footer className="footer bg-grey-700 text-white">
       <div className="footer__main py-4 lg:py-16 container container--default">
@@ -19,10 +26,18 @@ const Footer = () => {
         <section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-2 gap-4">
           <div className="pt-8 pb-4 lg:py-0">
             <div className="footer-collapsible">
-              <span className="text-xl uppercase text-white footer-collapsible__toggle">
+              <span
+                className={classNames(
+                  "text-xl uppercase text-white footer-collapsible__toggle",
+                  {
+                    "footer-collapsible__toggle--open": showCfMenu,
+                  }
+                )}
+                onClick={() => setShowCfMenu(!showCfMenu)}
+              >
                 CF 2021
               </span>{" "}
-              <div className="">
+              <div className={showCfMenu || isLg ? "" : "hidden"}>
                 <ul className="mt-6 space-y-2 text-grey-200">
                   <li>
                     <NavLink to="/">Přímý přenos</NavLink>
@@ -42,10 +57,18 @@ const Footer = () => {
           </div>
           <div className="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
             <div className="footer-collapsible">
-              <span className="text-xl uppercase text-white footer-collapsible__toggle">
+              <span
+                className={classNames(
+                  "text-xl uppercase text-white footer-collapsible__toggle",
+                  {
+                    "footer-collapsible__toggle--open": showOtherMenu,
+                  }
+                )}
+                onClick={() => setShowOtherMenu(!showOtherMenu)}
+              >
                 Otevřenost
               </span>{" "}
-              <div className="">
+              <div className={showOtherMenu || isLg ? "" : "hidden"}>
                 <ul className="mt-6 space-y-2 text-grey-200">
                   <li>
                     <a href="https://ucet.pirati.cz">Transparentní účet</a>