From 0e544c2ea680319e5dd142d598dbcb830449a351 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Wed, 7 Jun 2023 23:36:59 +0200
Subject: [PATCH] feat: add burger menu + add link btn

---
 src/components/ButtonLink.tsx          |  6 ++--
 src/components/Links/Links.tsx         | 25 +++++++++++--
 src/components/Modal/modal.module.scss |  8 +++++
 src/pages/index.tsx                    | 50 +++++++++++++-------------
 4 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx
index 08c83b8..b9e5091 100644
--- a/src/components/ButtonLink.tsx
+++ b/src/components/ButtonLink.tsx
@@ -1,21 +1,23 @@
 import Link from "next/link";
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 export default function ButtonLink({
   href = "#",
   onClick,
   children,
+  style = {},
 }: {
   href?: string;
   onClick?: (...args: any) => any;
   children: ReactNode;
+  style?: CSSProperties;
 }) {
   const handleClick = (event) => {
     event.preventDefault();
     onClick && onClick();
   };
   return (
-    <Link href={href} onClick={handleClick}>
+    <Link href={href} onClick={handleClick} style={style}>
       {children}
     </Link>
   );
diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
index e87365e..1466955 100644
--- a/src/components/Links/Links.tsx
+++ b/src/components/Links/Links.tsx
@@ -1,3 +1,4 @@
+import { motion } from "framer-motion";
 import LinkTag from "next/link";
 
 import { Category, Link } from "types";
@@ -6,15 +7,21 @@ import EditItem from "components/QuickActions/EditItem";
 import RemoveItem from "components/QuickActions/RemoveItem";
 import LinkItem from "./LinkItem";
 
-import { motion } from "framer-motion";
+import ButtonLink from "components/ButtonLink";
+import CreateItem from "components/QuickActions/CreateItem";
+import { RxHamburgerMenu } from "react-icons/rx";
 import styles from "./links.module.scss";
 
 export default function Links({
   category,
   toggleFavorite,
+  isMobile,
+  openMobileModal,
 }: {
   category: Category;
   toggleFavorite: (linkId: Link["id"]) => void;
+  isMobile: boolean;
+  openMobileModal: () => void;
 }) {
   if (category === null) {
     return (
@@ -29,13 +36,27 @@ export default function Links({
   return (
     <div className={styles["links-wrapper"]}>
       <h2 className={styles["category-header"]}>
-        <span className={styles["category-name"]}>
+        <span
+          className={styles["category-name"]}
+          style={{ display: "flex", alignItems: "center", gap: ".25em" }}
+        >
+          {isMobile && (
+            <ButtonLink
+              style={{
+                display: "flex",
+              }}
+              onClick={openMobileModal}
+            >
+              <RxHamburgerMenu size={"1.5em"} style={{ marginRight: ".5em" }} />
+            </ButtonLink>
+          )}
           {name}
           {links.length > 0 && (
             <span className={styles["links-count"]}> — {links.length}</span>
           )}
         </span>
         <span className={styles["category-controls"]}>
+          <CreateItem type="link" categoryId={category.id} />
           <EditItem type="category" id={id} />
           <RemoveItem type="category" id={id} />
         </span>
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index cfa2310..e4909b8 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -49,3 +49,11 @@
   align-items: center;
   flex-direction: column;
 }
+
+@media (max-width: 768px) {
+  .modal-container {
+    width: calc(100% - 2em);
+    min-width: unset;
+    margin-top: 1em;
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ad12794..444cfd6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,20 +3,21 @@ import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
+import BlockWrapper from "components/BlockWrapper/BlockWrapper";
 import Links from "components/Links/Links";
 import Modal from "components/Modal/Modal";
 import PageTransition from "components/PageTransition";
 import SearchModal from "components/SearchModal/SearchModal";
+import Categories from "components/SideMenu/Categories/Categories";
 import SideMenu from "components/SideMenu/SideMenu";
 
 import * as Keys from "constants/keys";
 import PATHS from "constants/paths";
-import useModal from "hooks/useModal";
-import { Category, Link, SearchItem } from "types";
-
 import { useMediaQuery } from "hooks/useMediaQuery";
+import useModal from "hooks/useModal";
 import getUserCategories from "lib/category/getUserCategories";
 import getUser from "lib/user/getUser";
+import { Category, Link, SearchItem } from "types";
 import { pushStateVanilla } from "utils/link";
 import { getSession } from "utils/session";
 
@@ -104,15 +105,17 @@ function Home(props: HomePageProps) {
   const handleSelectCategory = (category: Category) => {
     setCategoryActive(category);
     pushStateVanilla(`${PATHS.HOME}?categoryId=${category.id}`);
+    mobileModal.close();
   };
 
+  const areHokeysEnabled = { enabled: !searchModal.isShowing };
   useHotkeys(
     Keys.OPEN_SEARCH_KEY,
     (event) => {
       event.preventDefault();
       searchModal.open();
     },
-    { enabled: !searchModal.isShowing }
+    areHokeysEnabled
   );
   useHotkeys(Keys.CLOSE_SEARCH_KEY, searchModal.close, {
     enabled: searchModal.isShowing,
@@ -124,40 +127,32 @@ function Home(props: HomePageProps) {
     () => {
       router.push(`${PATHS.LINK.CREATE}?categoryId=${categoryActive.id}`);
     },
-    {
-      enabled: !searchModal.isShowing,
-    }
+    areHokeysEnabled
   );
   useHotkeys(
     Keys.OPEN_CREATE_CATEGORY_KEY,
     () => {
       router.push("/category/create");
     },
-    {
-      enabled: !searchModal.isShowing,
-    }
+    areHokeysEnabled
   );
 
   return (
     <PageTransition className="App">
       {isMobile ? (
-        <>
-          <button onClick={mobileModal.open}>open mobile modal</button>
-          <AnimatePresence>
-            {mobileModal.isShowing && (
-              <Modal close={mobileModal.close}>
-                <SideMenu
+        <AnimatePresence>
+          {mobileModal.isShowing && (
+            <Modal close={mobileModal.close}>
+              <BlockWrapper style={{ minHeight: "0", flex: "1" }}>
+                <Categories
                   categories={categories}
-                  favorites={favorites}
-                  handleSelectCategory={handleSelectCategory}
                   categoryActive={categoryActive}
-                  openSearchModal={searchModal.open}
-                  isModalShowing={searchModal.isShowing}
+                  handleSelectCategory={handleSelectCategory}
                 />
-              </Modal>
-            )}
-          </AnimatePresence>
-        </>
+              </BlockWrapper>
+            </Modal>
+          )}
+        </AnimatePresence>
       ) : (
         <SideMenu
           categories={categories}
@@ -168,7 +163,12 @@ function Home(props: HomePageProps) {
           isModalShowing={searchModal.isShowing}
         />
       )}
-      <Links category={categoryActive} toggleFavorite={toggleFavorite} />
+      <Links
+        category={categoryActive}
+        toggleFavorite={toggleFavorite}
+        isMobile={isMobile}
+        openMobileModal={mobileModal.open}
+      />
       <AnimatePresence>
         {searchModal.isShowing && (
           <SearchModal