- designing the builder

- designing the left navbar and sidebar

gatsby-browser.js

@@ -1,16 +1,17 @@
-import React from "react";
-import { MuiThemeProvider, createMuiTheme } from "@material-ui/core";
-import "firebase/auth";
+import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
 import "firebase/analytics";
+import "firebase/auth";
 import "firebase/firestore";
+import React from "react";
 import { ModalProvider } from "./src/contexts/ModalContext";
+import { ResumeProvider } from "./src/contexts/ResumeContext";
 import { ThemeProvider } from "./src/contexts/ThemeContext";
 import { UserProvider } from "./src/contexts/UserContext";
-
 import "./src/styles/colors.css";
-import "./src/styles/tailwind.css";
 import "./src/styles/global.css";
-import { ResumeProvider } from "./src/contexts/ResumeContext";
+import "./src/styles/shadows.css";
+import "./src/styles/tailwind.css";
+import "./src/styles/toastify.css";
 
 const theme = createMuiTheme({
   typography: {

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

src/pages/app.js

@@ -1,15 +1,17 @@
+import { Redirect, Router } from "@reach/router";
 import React from "react";
-import { Router, Redirect } from "@reach/router";
-import Wrapper from "../components/shared/Wrapper";
-import Dashboard from "./app/dashboard";
 import PrivateRoute from "../components/router/PrivateRoute";
+import Wrapper from "../components/shared/Wrapper";
 import NotFound from "./404";
+import Builder from "./app/builder";
+import Dashboard from "./app/dashboard";
 
 const App = () => (
   <Wrapper>
     <Router>
       <Redirect noThrow from="/app" to="/app/dashboard" exact />
       <PrivateRoute path="/app/dashboard" component={Dashboard} />
+      <PrivateRoute path="/app/builder/:id" component={Builder} />
       <NotFound default />
     </Router>
   </Wrapper>

src/pages/app/builder.js

@@ -0,0 +1,19 @@
+import React from "react";
+import LeftSidebar from "../../components/builder/left/LeftSidebar";
+import Wrapper from "../../components/shared/Wrapper";
+
+const Builder = ({ id }) => {
+  return (
+    <Wrapper>
+      <div className="h-screen grid grid-cols-12">
+        <div className="col-span-3">
+          <LeftSidebar />
+        </div>
+        <div className="col-span-6"></div>
+        <div className="col-span-3"></div>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default Builder;

src/styles/global.css

@@ -1,5 +1,4 @@
 @import "~react-loader-spinner/dist/loader/css/react-spinner-loader.css";
-@import "./toastify.css";
 
 :root {
   @apply transition-colors duration-200 ease-in-out;
@@ -23,3 +22,7 @@ a {
 a:hover {
   @apply underline;
 }
+
+hr {
+  @apply w-full h-1;
+}

src/styles/shadows.css

@@ -0,0 +1,6 @@
+:root {
+  --shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
+  --shadow-strong: 0 0 8px 0 rgba(0, 0, 0, 0.08);
+  --left-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.04);
+  --bottom-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.04);
+}