Develop > main (rupali-codes#6)

* feat: made dynamic sidebar and removed unused code

* split into different components (rupali-codes#5)

* feat: split into different components

* feat: sidebar element updated

Co-authored-by: rohitdasu <dasurohit123@gmail.com>
Co-authored-by: Rohit <48400770+rohitdasu@users.noreply.github.com>

components/MainContainer/MainContainer.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const MainContainer = () => {
+  return (
+    <div className="min-h-screen flex flex-row items-center justify-center">
+      <h2 className="text-6xl font-bold text-violet-200">
+        <span className="border-b-8 border-violet-500">Links</span>
+        <span className="text-violet-500">Hub</span>
+      </h2>
+      <p className="uppercase font-semibold text-xl mt-6">...coming soon</p>
+    </div>
+  );
+};

components/MainContainer/index.ts

@@ -0,0 +1 @@
+export { MainContainer } from "./MainContainer";

components/SideNavbar/SideNavbar.tsx

@@ -0,0 +1,74 @@
+import classNames from "classnames";
+import React, { useState } from "react";
+import { data, sidebarData } from "../../database/data";
+import { SideNavbarElement } from "./SideNavbarElement";
+
+export const SideNavbar = () => {
+  const [isSidebarActive, setIsSidebarActive] = useState(false);
+
+  const toggleSidebar = () => {
+    setIsSidebarActive((prev) => !prev);
+  };
+
+  return (
+    <div className={`lg:w-1/5 bg-base-300 p-4 lg:min-h-screen`}>
+      <div className="flex justify-between">
+        <h1 className="text-3xl font-bold mb-4">
+          <span className="border-b-4 border-violet-500 text-violet-200">
+            Links
+          </span>
+          <span className="text-violet-500">Hub</span>
+        </h1>
+
+        <label className="btn btn-circle swap swap-rotate lg:hidden">
+          <input
+            type="checkbox"
+            onClick={toggleSidebar}
+            className="lg:hidden"
+          />
+
+          <svg
+            className="swap-off fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 512 512"
+          >
+            <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+          </svg>
+
+          <svg
+            className="swap-on fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 512 512"
+          >
+            <polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+          </svg>
+        </label>
+      </div>
+      <div
+        className={classNames(
+          "lg:block transition-all ease-in duration-300",
+          isSidebarActive ? "block" : "hidden"
+        )}
+      >
+        <div className="py-4 flex flex-col justify-center gap-8">
+          {sidebarData.map((item, index) => {
+            return (
+              <div key={index}>
+                <h2 key={index} className="uppercase font-bold text-xl">
+                  {item.category}
+                </h2>
+                {item.subcategory.map((s, i) => {
+                  return <SideNavbarElement key={i} title={s} />;
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};

components/SideNavbar/SideNavbarElement.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { ISideNavbarElement } from "../../types";
+
+export const SideNavbarElement = ({ title }: ISideNavbarElement) => {
+  return (
+    <div className="collapse border-b border-base-100">
+      <div className="collapse-title text-md font-medium uppercase">
+        {title}
+      </div>
+    </div>
+  );
+};

components/SideNavbar/index.ts

@@ -0,0 +1 @@
+export { SideNavbar } from "./SideNavbar";

package.json

@@ -13,6 +13,7 @@
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
+    "classnames": "^2.3.2",
     "daisyui": "^2.46.1",
     "eslint": "8.31.0",
     "eslint-config-next": "13.1.1",

pages/index.tsx

@@ -1,17 +1,9 @@
-import React, { useState } from "react";
+import React from "react";
 import Head from "next/head";
-import { Inter } from "@next/font/google";
-import { Collaps } from "../components/Collaps";
-import { dataList } from "../types";
-import { data, sidebarData } from "../database/data";
-const inter = Inter({ subsets: ["latin"] });
+import { SideNavbar } from "../components/SideNavbar";
+import { MainContainer } from "../components/MainContainer";
 
 export default function Home() {
-  const [sidebar, setSidebar] = useState(false);
-  const toggleSidebar = () => {
-    setSidebar((prev) => !prev);
-  };
-
   return (
     <>
       <Head>
@@ -20,78 +12,12 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/icon.ico" className="rounded-full" />
       </Head>
-      <main>
-        <div className="lg:flex flex-wrap justify-between">
-          <div className={`lg:w-1/5 bg-base-300 p-4 lg:min-h-screen`}>
-            <div className="flex justify-between">
-              <h1 className="text-3xl font-bold mb-4">
-                <span className="border-b-4 border-violet-500 text-violet-200">
-                  Links
-                </span>
-                <span className="text-violet-500">Hub</span>
-              </h1>
-
-              <label className="btn btn-circle swap swap-rotate lg:hidden">
-                <input
-                  type="checkbox"
-                  onClick={toggleSidebar}
-                  className="lg:hidden"
-                />
-
-                <svg
-                  className="swap-off fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 512 512"
-                >
-                  <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-                </svg>
-
-                <svg
-                  className="swap-on fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 512 512"
-                >
-                  <polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
-                </svg>
-              </label>
-            </div>
-            <div
-              className={`lg:block ${
-                sidebar ? "block" : "hidden"
-              } transition-all ease-in duration-300`}
-            >
-              <div className="py-4 flex flex-col items-center justify-center gap-8">
-                {sidebarData.map((item, index) => {
-                  return (
-                    <div key={index}>
-                      <h2 key={index} className="uppercase font-bold text-xl">
-                        {item.category}
-                      </h2>
-                      {item.subcategory.map((s, i) => {
-                        return <Collaps key={i} title={s} elements={data} />;
-                      })}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-
-          <div className="lg:w-4/5 text-center mt-12">
-            <h2 className="text-6xl font-bold text-violet-200">
-              <span className="border-b-8 border-violet-500">Links</span>
-              <span className="text-violet-500">Hub</span>
-            </h2>
-            <p className="uppercase font-semibold text-xl mt-6">
-              ...coming soon
-            </p>
-          </div>
-        </div>
-      </main>
+      <div className="lg:flex flex-wrap justify-between">
+        <SideNavbar />
+        <main className="flex-1">
+          <MainContainer />
+        </main>
+      </div>
     </>
   );
 }