toggeling sidebar

Prajwal0225 · Jan 2, 2023 · 13c1fa9 · 13c1fa9
1 parent 4903f4c
commit 13c1fa9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.7.1",
     "typescript": "4.9.4"
   },
   "devDependencies": {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,10 +1,17 @@
+import React, { useState } from "react";
 import Head from "next/head";
 import { Inter } from "@next/font/google";
 import { Collaps } from "../components/Collaps";
 import { dataList } from "../types";
+import { FaBars } from 'react-icons/fa'
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
+  const [sidebar, setSidebar] = useState(false)
+  const toggleSidebar = () => {
+    setSidebar((prev) => !prev)
+  }
+
   return (
     <>
       <Head>
@@ -14,10 +21,15 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        <div className="flex flex-wrap justify-between">
-          <div className="w-1/5 bg-base-300 p-4 min-h-screen">
+        <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>
-            <div className="flex flex-col gap-1 my-2">
+
+            <FaBars className="text-2xl cursor-pointer lg:hidden" onClick={toggleSidebar} />
+            </div>
+           <div className={`lg:block ${sidebar ? "block" : "hidden"} transition-all ease-in duration-300`}>
+           <div className="flex flex-col gap-1 my-2">
               <h2 className="uppercase font-bold text-xl">frontend</h2>
               <Collaps title={'Images & Illustrations'} elements={data} />
               <Collaps title={'Fonts'} elements={data} />
@@ -30,6 +42,12 @@ export default function Home() {
               <Collaps title={'Validators'} elements={data} />
               <Collaps title={'Security'} elements={data} />
             </div>
+           </div>
+          </div>
+
+          <div className="lg:w-4/5 text-center mt-12">
+              <h2 className="lg:text-8xl 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-3xl mt-12">...coming soon</p>
           </div>
         </div>
       </main>