- designing the builder

- designing the left navbar and sidebar

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;