responsive sidenav + code refactoring

2023-05-01 00:24:40 +03:30 · 2023-05-01 00:24:40 +03:30 · c1d1d4a4a2
parent 57b2e36abd
commit c1d1d4a4a2
13 changed files with 279 additions and 173 deletions
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@ -13,11 +13,14 @@ import {
  faSliders,
  faArrowRightFromBracket,
  faChevronDown,
+  faBars,
 } from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import Dropdown from "@/components/Dropdown";
 import Modal from "./Modal";
 import AddLink from "./Modal/AddLink";
+import ClickAwayHandler from "./ClickAwayHandler";
+import Sidebar from "./Sidebar";

 export default function () {
  const { data: session } = useSession();
@ -27,6 +30,13 @@ export default function () {
  const user = session?.user;

  const [linkModal, setLinkModal] = useState(false);
+  const [sidebar, setSidebar] = useState(false);
+
+  window.addEventListener("resize", () => setSidebar(false));
+
+  const toggleSidebar = () => {
+    setSidebar(!sidebar);
+  };

  const toggleLinkModal = () => {
    setLinkModal(!linkModal);
@ -34,6 +44,12 @@ export default function () {

  return (
    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b">
+      <div
+        onClick={toggleSidebar}
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-1 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
+      >
+        <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+      </div>
      <div className="flex items-center relative">
        <label
          htmlFor="search-box"
@ -74,7 +90,9 @@ export default function () {
              className="h-5 w-5 pointer-events-none"
            />
            <div className="flex items-center gap-1 pointer-events-none">
-              <p className="font-bold leading-3">{user?.name}</p>
+              <p className="font-bold leading-3 hidden sm:block">
+                {user?.name}
+              </p>
              <FontAwesomeIcon icon={faChevronDown} className="h-3 w-3" />
            </div>
          </div>
@ -101,6 +119,16 @@ export default function () {
              className="absolute top-8 right-0 z-20 w-36"
            />
          ) : null}
+
+          {sidebar ? (
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
+              <ClickAwayHandler onClickOutside={toggleSidebar}>
+                <div className="slide-right">
+                  <Sidebar />
+                </div>
+              </ClickAwayHandler>
+            </div>
+          ) : null}
        </div>
      </div>
    </div>
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@ -21,7 +21,7 @@ export default function () {
  const { tags } = useTagStore();

  return (
-    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20">
+    <div className="bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20">
      <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
        Linkwarden
      </p>
--- a/hooks/useRedirection.tsx
+++ b/hooks/useRedirection.tsx
@ -3,7 +3,7 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.

-import { ReactNode, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";

--- a/layouts/AuthRedirect.tsx
+++ b/layouts/AuthRedirect.tsx
@ -0,0 +1,45 @@
+// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
+// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { ReactNode } from "react";
+import { useSession } from "next-auth/react";
+import Loader from "../components/Loader";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import getInitialData from "@/lib/client/getInitialData";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function ({ children }: Props) {
+  const router = useRouter();
+  const { status } = useSession();
+  const [redirect, setRedirect] = useState(true);
+
+  getInitialData();
+
+  useEffect(() => {
+    if (
+      status === "authenticated" &&
+      (router.pathname === "/login" || router.pathname === "/register")
+    ) {
+      router.push("/").then(() => {
+        setRedirect(false);
+      });
+    } else if (
+      status === "unauthenticated" &&
+      !(router.pathname === "/login" || router.pathname === "/register")
+    ) {
+      router.push("/login").then(() => {
+        setRedirect(false);
+      });
+    } else if (status === "loading") setRedirect(true);
+    else setRedirect(false);
+  }, [status]);
+
+  if (status !== "loading" && !redirect) return <>{children}</>;
+  else return <Loader />;
+}
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@ -8,9 +8,8 @@ import Sidebar from "@/components/Sidebar";
 import { ReactNode } from "react";
 import { useSession } from "next-auth/react";
 import Loader from "../components/Loader";
-import useRedirection from "@/hooks/useRedirection";
+import useRedirect from "@/hooks/useRedirect";
 import { useRouter } from "next/router";
-import getInitialData from "@/lib/client/getInitialData";

 interface Props {
  children: ReactNode;
@ -19,22 +18,23 @@ interface Props {
 export default function ({ children }: Props) {
  const { status } = useSession();
  const router = useRouter();
-  const redirection = useRedirection();
+  const redirect = useRedirect();
  const routeExists = router.route === "/_error" ? false : true;

-  getInitialData();
-
-  if (status === "authenticated" && !redirection && routeExists)
+  if (status === "authenticated" && !redirect && routeExists)
    return (
-      <>
-        <Sidebar />
-        <div className="ml-80">
+      <div className="flex">
+        <div className="hidden lgblock">
+          <Sidebar />
+        </div>
+
+        <div className="w-full">
          <Navbar />
          {children}
        </div>
-      </>
+      </div>
    );
-  else if ((status === "unauthenticated" && !redirection) || !routeExists)
+  else if ((status === "unauthenticated" && !redirect) || !routeExists)
    return <>{children}</>;
  else return <Loader />;
 }
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -4,11 +4,11 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.

 import React from "react";
-import MainLayout from "@/layouts/MainLayout";
 import "@/styles/globals.css";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import AuthRedirect from "@/layouts/AuthRedirect";

 export default function App({ Component, pageProps }: AppProps) {
  return (
@ -35,9 +35,9 @@ export default function App({ Component, pageProps }: AppProps) {
        />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
-      <MainLayout>
+      <AuthRedirect>
        <Component {...pageProps} />
-      </MainLayout>
+      </AuthRedirect>
    </SessionProvider>
  );
 }
--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
@ -32,16 +32,12 @@ export const authOptions: AuthOptions = {
          },
        });

-        console.log(findUser);
-
        let passwordMatches: boolean = false;

        if (findUser?.password) {
          passwordMatches = bcrypt.compareSync(password, findUser.password);
        }

-        console.log(passwordMatches);
-
        if (passwordMatches) {
          return {
            id: findUser?.id,
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@ -22,6 +22,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import Dashboard from "@/layouts/Dashboard";

 export default function () {
  const router = useRouter();
@ -61,89 +62,90 @@ export default function () {
  }, [links, router, collections]);

  return (
-    // ml-80
-    <div className="p-5 flex flex-col gap-5 w-full">
-      <div className="flex gap-3 items-center">
-        <div className="flex gap-2 items-center">
-          <FontAwesomeIcon icon={faFolder} className="w-5 h-5 text-sky-300" />
-          <p className="text-lg text-sky-900">{activeCollection?.name}</p>
-        </div>
-        <div className="relative">
-          <div
-            onClick={() => setExpandDropdown(!expandDropdown)}
-            id="edit-dropdown"
-            className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
-          >
-            <FontAwesomeIcon
-              icon={faEllipsis}
-              id="edit-dropdown"
-              className="w-4 h-4 text-gray-500"
-            />
+    <Dashboard>
+      <div className="p-5 flex flex-col gap-5 w-full">
+        <div className="flex gap-3 items-center">
+          <div className="flex gap-2 items-center">
+            <FontAwesomeIcon icon={faFolder} className="w-5 h-5 text-sky-300" />
+            <p className="text-lg text-sky-900">{activeCollection?.name}</p>
          </div>
-          {expandDropdown ? (
-            <Dropdown
-              items={[
-                {
-                  name: "Add Link Here",
-                  icon: <FontAwesomeIcon icon={faAdd} />,
-                  onClick: () => {
-                    toggleLinkModal();
-                    setExpandDropdown(false);
-                  },
-                },
-                {
-                  name: "Edit Collection",
-                  icon: <FontAwesomeIcon icon={faPenToSquare} />,
-                  onClick: () => {
-                    toggleEditCollectionModal();
-                    setExpandDropdown(false);
-                  },
-                },
-                {
-                  name: "Delete Collection",
-                  icon: <FontAwesomeIcon icon={faTrashCan} />,
-                  onClick: () => {
-                    toggleDeleteCollectionModal();
-                    setExpandDropdown(false);
-                  },
-                },
-              ]}
-              onClickOutside={(e: Event) => {
-                const target = e.target as HTMLInputElement;
-                if (target.id !== "edit-dropdown") setExpandDropdown(false);
-              }}
-              className="absolute top-7 left-0 z-10 w-44"
-            />
-          ) : null}
-
-          {linkModal ? (
-            <Modal toggleModal={toggleLinkModal}>
-              <AddLink toggleLinkModal={toggleLinkModal} />
-            </Modal>
-          ) : null}
-
-          {editCollectionModal && activeCollection ? (
-            <Modal toggleModal={toggleEditCollectionModal}>
-              <EditCollection
-                toggleCollectionModal={toggleEditCollectionModal}
-                collection={activeCollection}
+          <div className="relative">
+            <div
+              onClick={() => setExpandDropdown(!expandDropdown)}
+              id="edit-dropdown"
+              className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+            >
+              <FontAwesomeIcon
+                icon={faEllipsis}
+                id="edit-dropdown"
+                className="w-4 h-4 text-gray-500"
              />
-            </Modal>
-          ) : null}
-
-          {deleteCollectionModal && activeCollection ? (
-            <Modal toggleModal={toggleDeleteCollectionModal}>
-              <DeleteCollection
-                collection={activeCollection}
-                toggleCollectionModal={toggleDeleteCollectionModal}
+            </div>
+            {expandDropdown ? (
+              <Dropdown
+                items={[
+                  {
+                    name: "Add Link Here",
+                    icon: <FontAwesomeIcon icon={faAdd} />,
+                    onClick: () => {
+                      toggleLinkModal();
+                      setExpandDropdown(false);
+                    },
+                  },
+                  {
+                    name: "Edit Collection",
+                    icon: <FontAwesomeIcon icon={faPenToSquare} />,
+                    onClick: () => {
+                      toggleEditCollectionModal();
+                      setExpandDropdown(false);
+                    },
+                  },
+                  {
+                    name: "Delete Collection",
+                    icon: <FontAwesomeIcon icon={faTrashCan} />,
+                    onClick: () => {
+                      toggleDeleteCollectionModal();
+                      setExpandDropdown(false);
+                    },
+                  },
+                ]}
+                onClickOutside={(e: Event) => {
+                  const target = e.target as HTMLInputElement;
+                  if (target.id !== "edit-dropdown") setExpandDropdown(false);
+                }}
+                className="absolute top-7 left-0 z-10 w-44"
              />
-            </Modal>
-          ) : null}
+            ) : null}
+
+            {linkModal ? (
+              <Modal toggleModal={toggleLinkModal}>
+                <AddLink toggleLinkModal={toggleLinkModal} />
+              </Modal>
+            ) : null}
+
+            {editCollectionModal && activeCollection ? (
+              <Modal toggleModal={toggleEditCollectionModal}>
+                <EditCollection
+                  toggleCollectionModal={toggleEditCollectionModal}
+                  collection={activeCollection}
+                />
+              </Modal>
+            ) : null}
+
+            {deleteCollectionModal && activeCollection ? (
+              <Modal toggleModal={toggleDeleteCollectionModal}>
+                <DeleteCollection
+                  collection={activeCollection}
+                  toggleCollectionModal={toggleDeleteCollectionModal}
+                />
+              </Modal>
+            ) : null}
+          </div>
        </div>
+        {linksByCollection.map((e, i) => {
+          return <LinkList key={i} link={e} count={i} />;
+        })}
      </div>
-      {linksByCollection.map((e, i) => {
-        return <LinkList key={i} link={e} count={i} />;
-      })}
-    </div>
+    </Dashboard>
  );
 }
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@ -16,6 +16,7 @@ import Dropdown from "@/components/Dropdown";
 import { useState } from "react";
 import Modal from "@/components/Modal";
 import AddCollection from "@/components/Modal/AddCollection";
+import Dashboard from "@/layouts/Dashboard";

 export default function () {
  const { collections } = useCollectionStore();
@ -29,64 +30,66 @@ export default function () {

  return (
    // ml-80
-    <div className="p-5">
-      <div className="flex gap-3 items-center mb-5">
-        <div className="flex gap-2 items-center">
-          <FontAwesomeIcon icon={faBox} className="w-5 h-5 text-sky-300" />
-          <p className="text-lg text-sky-900">All Collections</p>
-        </div>
-        <div className="relative">
-          <div
-            onClick={() => setExpandDropdown(!expandDropdown)}
-            id="edit-dropdown"
-            className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
-          >
-            <FontAwesomeIcon
-              icon={faEllipsis}
-              id="edit-dropdown"
-              className="w-4 h-4 text-gray-500"
-            />
+    <Dashboard>
+      <div className="p-5">
+        <div className="flex gap-3 items-center mb-5">
+          <div className="flex gap-2 items-center">
+            <FontAwesomeIcon icon={faBox} className="w-5 h-5 text-sky-300" />
+            <p className="text-lg text-sky-900">All Collections</p>
          </div>
-          {expandDropdown ? (
-            <Dropdown
-              items={[
-                {
-                  name: "New",
-                  icon: <FontAwesomeIcon icon={faAdd} />,
-                  onClick: () => {
-                    toggleCollectionModal();
-                    setExpandDropdown(false);
+          <div className="relative">
+            <div
+              onClick={() => setExpandDropdown(!expandDropdown)}
+              id="edit-dropdown"
+              className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+            >
+              <FontAwesomeIcon
+                icon={faEllipsis}
+                id="edit-dropdown"
+                className="w-4 h-4 text-gray-500"
+              />
+            </div>
+            {expandDropdown ? (
+              <Dropdown
+                items={[
+                  {
+                    name: "New",
+                    icon: <FontAwesomeIcon icon={faAdd} />,
+                    onClick: () => {
+                      toggleCollectionModal();
+                      setExpandDropdown(false);
+                    },
                  },
-                },
-              ]}
-              onClickOutside={(e: Event) => {
-                const target = e.target as HTMLInputElement;
-                if (target.id !== "edit-dropdown") setExpandDropdown(false);
-              }}
-              className="absolute top-7 left-0 w-36"
-            />
+                ]}
+                onClickOutside={(e: Event) => {
+                  const target = e.target as HTMLInputElement;
+                  if (target.id !== "edit-dropdown") setExpandDropdown(false);
+                }}
+                className="absolute top-7 left-0 w-36"
+              />
+            ) : null}
+          </div>
+
+          {linkModal ? (
+            <Modal toggleModal={toggleCollectionModal}>
+              <AddCollection toggleCollectionModal={toggleCollectionModal} />
+            </Modal>
          ) : null}
        </div>
+        <div className="flex flex-wrap gap-5">
+          {collections.map((e, i) => {
+            return <CollectionCard key={i} collection={e} />;
+          })}

-        {linkModal ? (
-          <Modal toggleModal={toggleCollectionModal}>
-            <AddCollection toggleCollectionModal={toggleCollectionModal} />
-          </Modal>
-        ) : null}
-      </div>
-      <div className="flex flex-wrap gap-5">
-        {collections.map((e, i) => {
-          return <CollectionCard key={i} collection={e} />;
-        })}
-
-        <div
-          className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col gap-4 justify-center items-center cursor-pointer hover:bg-gray-50 duration-100"
-          onClick={toggleCollectionModal}
-        >
-          <p className="text-sky-900">New Collection</p>
-          <FontAwesomeIcon icon={faPlus} className="w-8 h-8 text-sky-500" />
+          <div
+            className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col gap-4 justify-center items-center cursor-pointer hover:bg-gray-50 duration-100"
+            onClick={toggleCollectionModal}
+          >
+            <p className="text-sky-900">New Collection</p>
+            <FontAwesomeIcon icon={faPlus} className="w-8 h-8 text-sky-500" />
+          </div>
        </div>
      </div>
-    </div>
+    </Dashboard>
  );
 }
--- a/pages/links.tsx
+++ b/pages/links.tsx
@ -4,6 +4,7 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.

 import LinkList from "@/components/LinkList";
+import Dashboard from "@/layouts/Dashboard";
 import useLinkStore from "@/store/links";
 import { faBookmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -12,16 +13,21 @@ export default function Links() {
  const { links } = useLinkStore();

  return (
-    <div className="p-5 flex flex-col gap-5 w-full">
-      <div className="flex gap-3 items-center">
-        <div className="flex gap-2 items-center">
-          <FontAwesomeIcon icon={faBookmark} className="w-5 h-5 text-sky-300" />
-          <p className="text-lg text-sky-900">All Links</p>
+    <Dashboard>
+      <div className="p-5 flex flex-col gap-5 w-full">
+        <div className="flex gap-3 items-center">
+          <div className="flex gap-2 items-center">
+            <FontAwesomeIcon
+              icon={faBookmark}
+              className="w-5 h-5 text-sky-300"
+            />
+            <p className="text-lg text-sky-900">All Links</p>
+          </div>
        </div>
+        {links.map((e, i) => {
+          return <LinkList key={i} link={e} count={i} />;
+        })}
      </div>
-      {links.map((e, i) => {
-        return <LinkList key={i} link={e} count={i} />;
-      })}
-    </div>
+    </Dashboard>
  );
 }
--- a/pages/login.tsx
+++ b/pages/login.tsx
@ -5,6 +5,7 @@

 import { signIn } from "next-auth/react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useState } from "react";

 interface FormData {
@ -13,6 +14,8 @@ interface FormData {
 }

 export default function () {
+  const router = useRouter();
+
  const [form, setForm] = useState<FormData>({
    email: "",
    password: "",
@ -24,16 +27,12 @@ export default function () {
      const res = await signIn("credentials", {
        email: form.email,
        password: form.password,
+        redirect: false,
      });

-      console.log(res?.status);
+      console.log(res);

-      if (res?.ok) {
-        setForm({
-          email: "",
-          password: "",
-        });
-      } else {
+      if (!res?.ok) {
        console.log("User not found or password does not match.", res);
      }
    } else {
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@ -3,6 +3,7 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.

+import Dashboard from "@/layouts/Dashboard";
 import { useRouter } from "next/router";

 export default function () {
@ -10,5 +11,9 @@ export default function () {

  const tagId = Number(router.query.id);

-  return <div>{"HI"}</div>;
+  return (
+    <Dashboard>
+      <div>{"HI"}</div>
+    </Dashboard>
+  );
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -27,14 +27,17 @@
  hyphens: auto;
 }

-.slide-up {
-  animation: slide-up-animation 70ms;
-}
-
 .fade-in {
  animation: fade-in-animation 100ms;
 }

+/* Bug: "lg:block" just didn't work... */
+@media (min-width: 1024px) {
+  .lgblock {
+    display: block;
+  }
+}
+
@keyframes fade-in-animation {
  0% {
    opacity: 0;
@ -44,6 +47,10 @@
  }
 }

+.slide-up {
+  animation: slide-up-animation 70ms;
+}
+
@keyframes slide-up-animation {
  0% {
    transform: translateY(15%);
@ -54,3 +61,18 @@
    opacity: 1;
  }
 }
+
+.slide-right {
+  animation: slide-right-animation 100ms;
+}
+
+@keyframes slide-right-animation {
+  0% {
+    transform: translateX(-25%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}