- 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;
+}

src/components/dashboard/ResumePreview.js

@@ -1,4 +1,5 @@
 import { Menu, MenuItem } from "@material-ui/core";
+import { navigate } from "gatsby";
 import moment from "moment";
 import React, { useContext, useState } from "react";
 import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
@@ -12,9 +13,7 @@ const ResumePreview = ({ resume }) => {
   const { createResumeModal } = useContext(ModalContext);
   const { deleteResume } = useContext(ResumeContext);
 
-  const handleOpen = () => {
-    console.log("Hello, World!");
-  };
+  const handleOpen = () => navigate(`/app/builder/${resume.id}`);
 
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);

src/components/dashboard/TopNavbar.js

@@ -1,11 +1,12 @@
+import { Link, navigate } from "gatsby";
 import React, { useContext } from "react";
-import Logo from "../shared/Logo";
 import UserContext from "../../contexts/UserContext";
+import Avatar from "../shared/Avatar";
+import Logo from "../shared/Logo";
 import styles from "./TopNavbar.module.css";
-import { navigate, Link } from "gatsby";
 
 const TopNavbar = () => {
-  const { user, logout } = useContext(UserContext);
+  const { logout } = useContext(UserContext);
 
   const handleLogout = async () => {
     await logout();
@@ -27,11 +28,7 @@ const TopNavbar = () => {
             Logout
           </button>
 
-          <img
-            className="ml-8 h-12 rounded-full"
-            src={user.photoURL}
-            alt={user.displayName}
-          />
+          <Avatar className="ml-8" />
         </div>
       </div>
     </div>

src/components/dashboard/TopNavbar.module.css

@@ -1,6 +1,7 @@
 .navbar {
   height: 65px;
-  @apply w-full shadow;
+  box-shadow: var(--bottom-shadow);
+  @apply w-full;
 }
 
 .navbar > div {

src/components/shared/Avatar.js

@@ -0,0 +1,18 @@
+import cx from "classnames";
+import React, { useContext } from "react";
+import UserContext from "../../contexts/UserContext";
+import styles from "./Avatar.module.css";
+
+const Avatar = ({ className }) => {
+  const { user } = useContext(UserContext);
+
+  return (
+    <img
+      className={cx(styles.container, className)}
+      src={user.photoURL}
+      alt={user.displayName}
+    />
+  );
+};
+
+export default Avatar;

src/components/shared/Avatar.module.css

@@ -0,0 +1,3 @@
+.container {
+  @apply w-12 h-12 rounded-full;
+}

src/components/shared/Input.js

@@ -1,3 +1,4 @@
+import cx from "classnames";
 import React from "react";
 import { v4 as uuidv4 } from "uuid";
 import styles from "./Input.module.css";
@@ -8,13 +9,14 @@ const Input = ({
   value,
   error,
   onChange,
+  className,
   placeholder,
   type = "text",
 }) => {
   const uuid = uuidv4();
 
   return (
-    <div className={styles.container}>
+    <div className={cx(styles.container, className)}>
       <label htmlFor={uuid}>
         <span>{label}</span>
         <input

src/components/shared/Input.module.css

@@ -1,3 +1,7 @@
+.container {
+  @apply w-full;
+}
+
 .container > label {
   @apply flex flex-col;
 }
@@ -11,5 +15,5 @@
 }
 
 .container > label > input:focus {
-  @apply outline-none border-gray-500;
+  @apply outline-none border-gray-400;
 }

src/components/shared/Logo.js

@@ -1,6 +1,8 @@
-import React from "react";
-import { useStaticQuery, graphql } from "gatsby";
+import cx from "classnames";
+import { graphql, useStaticQuery } from "gatsby";
 import GatsbyImage from "gatsby-image";
+import React from "react";
+import styles from "./Logo.module.css";
 
 const Logo = ({ size = "256px", className }) => {
   const { file } = useStaticQuery(graphql`
@@ -18,7 +20,7 @@ const Logo = ({ size = "256px", className }) => {
   return (
     <GatsbyImage
       loading="eager"
-      className={`rounded ${className}`}
+      className={cx(styles.logo, className)}
       style={{ width: size, height: size }}
       fluid={file.childImageSharp.fluid}
     />

src/components/shared/Logo.module.css

@@ -0,0 +1,8 @@
+.logo {
+  box-shadow: var(--shadow);
+  @apply rounded;
+}
+
+.logo:hover {
+  box-shadow: var(--shadow-strong);
+}