- designing the builder

- designing the left navbar and sidebar

src/components/builder/left/LeftNavbar.js

@@ -0,0 +1,23 @@
+import { Link } from "gatsby";
+import React from "react";
+import Avatar from "../../shared/Avatar";
+import Logo from "../../shared/Logo";
+import styles from "./LeftNavbar.module.css";
+
+const LeftNavbar = () => {
+  return (
+    <div className={styles.container}>
+      <Link to="/app/dashboard">
+        <Logo size="40px" />
+      </Link>
+
+      <hr className="my-4" />
+
+      <hr className="mt-auto my-4" />
+
+      <Avatar />
+    </div>
+  );
+};
+
+export default LeftNavbar;

src/components/builder/left/LeftNavbar.module.css

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

src/components/builder/left/LeftSidebar.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Input from "../../shared/Input";
+import LeftNavbar from "./LeftNavbar";
+import styles from "./LeftSidebar.module.css";
+
+const LeftSidebar = () => {
+  return (
+    <div className="flex">
+      <LeftNavbar />
+
+      <div className={styles.container}>
+        <section>
+          <h2 className="text-4xl mb-8">Profile</h2>
+          <div className="flex items-center">
+            <div className={styles.circle}></div>
+            <Input label="Photograph" className="ml-6" />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default LeftSidebar;

src/components/builder/left/LeftSidebar.module.css

@@ -0,0 +1,12 @@
+.container {
+  z-index: 10;
+  box-shadow: var(--left-shadow);
+  @apply w-full h-screen p-8;
+}
+
+.circle {
+  width: 60px;
+  height: 60px;
+  flex: 0 0 60px;
+  @apply bg-gray-300 rounded-full;
+}