feat: menu dropdown on mobile

src/components/button.jsx

@@ -1,17 +1,22 @@
 import { Link } from "react-router-dom";
 
-function Button(props) {
+function Button({
+  href,
+  className,
+  onClick,
+  w,
+  children,
+  color = "bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800",
+}) {
   return (
-    <Link to={props.href} className={props.className}>
+    <Link to={href} className={className}>
       <div
-        onClick={props.onClick}
+        onClick={onClick}
         className={`transition-transform ${
-          props.w ? props.w : "w-48"
-        } ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105  p-2 pl-6 text-lg bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800 rounded-2xl ${
-          props.className
-        }`}
+          w ? w : "w-48"
+        } ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105  p-2 pl-6 text-lg ${color} rounded-2xl ${className}`}
       >
-        {props.children}
+        {children}
       </div>
     </Link>
   );
@@ -41,6 +46,7 @@ function ButtonWithIcon(props) {
       className={props.className}
       onClick={props.onClick}
       w={props.w}
+      color={props.color}
     >
       <IconWithText
         reverse={props.reverse}

src/components/menu.jsx

@@ -4,27 +4,47 @@ import {
   PencilIcon,
   ExclamationCircleIcon,
   Cog6ToothIcon,
+  ChevronDownIcon,
 } from "@heroicons/react/24/outline";
+import { useState } from "react";
 
 function Menu() {
+  const [hidden, setHidden] = useState(window.innerWidth < 1024 ? true : false);
+  console.log(window.innerWidth);
   return (
     <div className="grid grid-cols-2 lg:grid-cols-1 col-span-4 lg:col-span-1 gap-2 mt-4 lg:m-4 place-content-start justify-self-center justify-center">
-      <ButtonWithIcon
-        icon={MagnifyingGlassCircleIcon}
-        text={locals.Notes}
-        href="/notes"
-      />
-      <ButtonWithIcon icon={PencilIcon} text={locals.Write} href="/" />
-      <ButtonWithIcon
-        icon={Cog6ToothIcon}
-        text={locals.Settings}
-        href="/settings"
-      />
-      <ButtonWithIcon
-        icon={ExclamationCircleIcon}
-        text={locals.About}
-        href="/about"
-      />
+      {window.innerWidth < 1024 && (
+        <ButtonWithIcon
+          icon={ChevronDownIcon}
+          text={"Menu"}
+          reverse
+          className="col-span-2 lg:col-span-1 justify-self-center"
+          color="bg-sky-600 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-900 text-white"
+          onClick={() => {
+            setHidden(!hidden);
+          }}
+        />
+      )}
+      {!hidden && (
+        <>
+          <ButtonWithIcon
+            icon={MagnifyingGlassCircleIcon}
+            text={locals.Notes}
+            href="/notes"
+          />
+          <ButtonWithIcon icon={PencilIcon} text={locals.Write} href="/" />
+          <ButtonWithIcon
+            icon={Cog6ToothIcon}
+            text={locals.Settings}
+            href="/settings"
+          />
+          <ButtonWithIcon
+            icon={ExclamationCircleIcon}
+            text={locals.About}
+            href="/about"
+          />
+        </>
+      )}
     </div>
   );
 }

src/localisation/en.js

@@ -54,6 +54,7 @@ let en = {
   NoNotesFound: "No notes found",
   LocalNote: "Local",
   PublicNote: "Public",
+  Menu: "Menu",
 };
 
 export default en;

src/localisation/eo.js

@@ -57,6 +57,7 @@ let eo = {
   NoNotesFound: "Neniuj notoj trovitaj",
   LocalNote: "Loka",
   PublicNote: "Publika",
+  Menu: "Menuo",
 };
 
 export default eo;

src/localisation/es.js

@@ -57,6 +57,7 @@ let es = {
   NoNotesFound: "No se encontraron notas",
   LocalNote: "Local",
   PublicNote: "Pública",
+  Menu: "Menú",
 };
 
 export default es;

src/localisation/ru.js

@@ -55,6 +55,7 @@ let ru = {
   NoNotesFound: "Заметок не найдено",
   LocalNote: "Локальная",
   PublishNote: "Публичная",
+  Menu: "Меню",
 };
 
 export default ru;