- creating the right sidebar

- designing the artboard
- optimizing dark mode performance
- optimizing input onChange handler

src/components/builder/right/RightNavbar.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { MdPerson } from "react-icons/md";
+import styles from "./RightNavbar.module.css";
+
+const RightNavbar = () => {
+  return (
+    <div className={styles.container}>
+      <div className="grid grid-cols-1 gap-6">
+        <MdPerson
+          className="text-secondary-dark hover:text-primary"
+          size="20px"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default RightNavbar;

src/components/builder/right/RightNavbar.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 75px;
+  z-index: 20;
+  box-shadow: var(--right-shadow);
+  @apply px-4 py-6 h-screen flex flex-col items-center;
+}

src/components/builder/right/RightSidebar.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Profile from "../sections/Profile";
+import RightNavbar from "./RightNavbar";
+import styles from "./RightSidebar.module.css";
+
+const RightSidebar = () => {
+  return (
+    <div className="flex">
+      <div className={styles.container}>
+        <Profile />
+      </div>
+
+      <RightNavbar />
+    </div>
+  );
+};
+
+export default RightSidebar;

src/components/builder/right/RightSidebar.module.css

@@ -0,0 +1,5 @@
+.container {
+  z-index: 10;
+  box-shadow: var(--right-shadow);
+  @apply w-full h-screen p-8;
+}