still sidebar

src/App.jsx

@@ -2,18 +2,7 @@ import React from "react";
 import Layout from "./components/Layout";
 
 const App = () => {
-  return (
-    <Layout>
-      {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
-        <p key={i} className="text-white">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quas,
-          nisi vero deserunt aliquid recusandae, nostrum molestias asperiores
-          aspernatur pariatur illo consequuntur nobis! Fuga tempore expedita
-          nam! Doloremque, deserunt harum!
-        </p>
-      ))}
-    </Layout>
-  );
+  return <Layout></Layout>;
 };
 
 export default App;

src/components/Burger.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const Burger = ({ showSidebar, setShowSidebar }) => {
+  return (
+    <button
+      onClick={() => setShowSidebar((prev) => !prev)}
+      className="fixed z-[1000] top-[45px] right-[45px] group flex justify-center items-center flex-col gap-[4px]
+        px-1 py-2"
+    >
+      <div
+        className={`w-[18px] bg-white h-[1px] group-hover:bg-primary ${
+          showSidebar
+            ? "rotate-[45deg] translate-y-[1px]"
+            : "rotate-0 translate-y-0"
+        } transition-all duration-300 ease-in-out`}
+      ></div>
+      <div
+        className={`w-[18px]  bg-white group-hover:bg-primary ${
+          showSidebar
+            ? "rotate-[-45deg] translate-y-[-4px] h-[1px]"
+            : "rotate-0 h-[0.5px]"
+        } transition-all duration-300 ease-in-out`}
+      ></div>
+    </button>
+  );
+};
+
+export default Burger;

src/components/Layout.jsx

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 
 import Cursor from "./Cursor";
+import Sidebar from "./Sidebar";
+import Burger from "./Burger";
 
 const Layout = ({ children }) => {
-  const [showSidebar, setShowSidebar] = useState(false);
+  const [showSidebar, setShowSidebar] = useState(true);
 
   return (
     <div>
@@ -19,6 +21,10 @@ const Layout = ({ children }) => {
             <div className="w-[70%]">{children}</div>
           </div>
         </div>
+
+        <Burger showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
+
+        <Sidebar showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
       </div>
     </div>
   );

src/components/Sidebar.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { TfiLocationPin } from "react-icons/tfi";
+import { sidebarData, socialData } from "../utils/data";
+import { Link } from "react-router-dom";
+import SidebarItemContainer from "./SidebarItemContainer";
+
+const Sidebar = ({ showSidebar, setShowSidebar }) => {
+  const itemShowAndHide = (delay) => {
+    return `${!showSidebar && "translate-y-[20px] delay-0"} ${
+      showSidebar ? `trasnlate-y-0 ${delay}` : "translate-y-[20px]"
+    }  transition-all duration-500 ease `;
+  };
+
+  return (
+    <>
+      <div
+        className={`absolute top-0 left-0 w-full h-full bg-[#000] bg-opacity-50  ${
+          showSidebar ? "block" : "hidden delay-1000"
+        } `}
+      ></div>
+      <div
+        className={`h-full w-[30%] bg-[#ebf6f7] absolute top-0 right-0 backdrop-blur-[7px] bg-opacity-5 ${
+          showSidebar ? "translate-x-0" : "translate-x-[100%] delay-500 "
+        } transition-all duration-500 ease-in-out flex justify-start items-center pl-[50px]`}
+      >
+        <div className="flex flex-col justify-start gap-[40px]">
+          <div className="flex flex-col">
+            <SidebarItemContainer>
+              <h3
+                className={`text-[17px] text-secondary font-[500] ${itemShowAndHide(
+                  "delay-[300ms]"
+                )} `}
+              >
+                Menu
+              </h3>
+            </SidebarItemContainer>
+
+            <div className="flex flex-col justify-start gap-[18px] mt-[20px]">
+              {sidebarData.map(({ Icon, name, delay }, index) => (
+                <SidebarItemContainer index={index}>
+                  <button
+                    key={index}
+                    className={`flex items-center gap-[10px] group ${itemShowAndHide(
+                      delay
+                    )}`}
+                  >
+                    <Icon
+                      size={18}
+                      className="text-secondary group-hover:text-primary transition-all duration-500 ease-in-out"
+                    />
+                    <h3 className="text-[15px] text-secondary group-hover:text-primary transition-all duration-500 ease-in-out ">
+                      {name}
+                    </h3>
+                  </button>
+                </SidebarItemContainer>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-col">
+            <SidebarItemContainer>
+              <h3
+                className={`text-[17px] text-secondary font-[500] ${itemShowAndHide(
+                  "delay-[900ms]"
+                )}`}
+              >
+                Social
+              </h3>
+            </SidebarItemContainer>
+
+            <div className="flex items-center gap-[20px] mt-[20px]">
+              {socialData.map(({ link, Icon }, index) => (
+                <SidebarItemContainer index={index}>
+                  <Link to={link}>
+                    <Icon
+                      className={`text-secondary hover:text-primary transition-all duration-500 ease-in-out 
+                      ${itemShowAndHide("delay-[1000ms]")}`}
+                      size={16}
+                    />
+                  </Link>
+                </SidebarItemContainer>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Sidebar;

src/components/SidebarItemContainer.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const SidebarItemContainer = ({ index, children }) => {
+  return (
+    <div key={index ? index : 1} className="w-full h-[20px] overflow-hidden">
+      {children}
+    </div>
+  );
+};
+
+export default SidebarItemContainer;

src/main.jsx

@@ -2,9 +2,10 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./App.css";
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <>
+  <BrowserRouter>
     <App />
-  </>
+  </BrowserRouter>
 );

src/utils/data.js

@@ -0,0 +1,44 @@
+import {
+  TfiLocationPin,
+  TfiInstagram,
+  TfiTwitter,
+  TfiFacebook,
+} from "react-icons/tfi";
+import { MdOutlinePersonOutline } from "react-icons/md";
+import { CgMenuLeft } from "react-icons/cg";
+import { BsUiChecksGrid } from "react-icons/bs";
+import { TbMessages } from "react-icons/tb";
+
+export const sidebarData = [
+  {
+    Icon: TfiLocationPin,
+    name: "Home",
+    delay: "delay-[400ms]",
+  },
+  {
+    Icon: MdOutlinePersonOutline,
+    name: "Contact",
+    delay: "delay-[500ms]",
+  },
+  {
+    Icon: CgMenuLeft,
+    name: "Resume",
+    delay: "delay-[600ms]",
+  },
+  {
+    Icon: BsUiChecksGrid,
+    name: "Portfolio",
+    delay: "delay-[700ms]",
+  },
+  {
+    Icon: TbMessages,
+    name: "Contact",
+    delay: "delay-[800ms]",
+  },
+];
+
+export const socialData = [
+  { link: "https://www.instagram.com", Icon: TfiInstagram },
+  { link: "https://www.twitter.com", Icon: TfiTwitter },
+  { link: "https://www.facebook.com", Icon: TfiFacebook },
+];

tailwind.config.cjs

@@ -4,7 +4,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        secondary: "#FDC60C",
+        secondary: "#7C7C7C",
         primary: "#c90076",
       },
     },