From 6b0b29f11d00f3bc703c24e6f2e8f8927f4e1a4a Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Thu, 7 Jan 2021 17:49:00 +0100
Subject: [PATCH] feat: toggle open/close footer menu sections

---
 src/components/Footer.jsx | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 4f2b505..7f8337e 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,7 +1,14 @@
-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>
-- 
GitLab