changes to route and first steps for tasks page

client/src/App.tsx

@@ -16,9 +16,9 @@ export default function App() {
         <Router>
             <Suspense fallback={false}>
                 <Switch>
-                    <ProtectedRoute path="/tasks" component={Tasks} />
-                    <ProtectedRoute path="/projects" component={Projects} />
-                    <ProtectedRoute path="/stats" component={Stats} />
+                    <ProtectedRoute path="/tasks" component={<Tasks />} />
+                    <ProtectedRoute path="/projects" component={<Projects />} />
+                    <ProtectedRoute path="/stats" component={<Stats />} />
                     <LoginRoute path="/login" component={Login} />
                     <LoginRoute path="/register" component={Register} />
                     <Route path="/" component={Home} />

client/src/components/helpers/Rerouters/ProtectedRoute.tsx

 
-import { ComponentType } from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import { isLoggedIn } from 'adapters/api';
+import Navigation from 'components/ui/Navigation';
+import Header from 'components/ui/Header';
 
 interface Props {
     path: string,
     exact?: boolean,
-    component: ComponentType<any>
+    component: JSX.Element
 }
+
+
 export default function ProtectedRoute({ path, exact, component }: Props) {
+    console.log(component);
+
+
     if (isLoggedIn()) {
         return (
-            <Route path={path} exact={exact} component={component} />
+            <Route path={path} exact={exact} render={() =>
+                <>
+                    <Header />
+                    <Navigation />
+                    { component }
+                </>
+            } />
         );
     }
     return (

client/src/components/ui/Header/header.scss

+.site-header {
+    display: flex;
+    justify-content: space-between;
+    img {
+        padding: 35px;
+    }
+}
\ No newline at end of file

client/src/components/ui/Header/index.tsx

 import './header.scss';
+import hamburger from 'images/svg/hamburger.svg';
+import profile from 'images/svg/profile.svg';
 
 export default function Header() {
    return (
-       <div></div>
+       <header className="site-header">
+           <img src={hamburger} alt="Navigation"/>
+           <img src={profile} alt="Profile"/>
+       </header>
    );
 }
\ No newline at end of file

client/src/components/ui/Navigation/index.tsx

@@ -6,7 +6,7 @@ import background from 'images/svg/nav-bg.svg';
 
 export default function Navigation() {
     return (
-        <nav>
+        <nav className="site-nav">
             <NavLink to="/tasks" activeClassName="active" className="nav-link">
                 <span className="icon material-icons-outlined">
                     home

client/src/components/ui/Navigation/navigation.scss

-.active {
-    .icon {
-        font-family: 'Material Icons';
+@use 'styles/settings.scss'as s;
+
+.site-nav {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .background {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        max-width: 100%;
+        height: auto;
+        z-index: -1;
     }
-} 
+
\ No newline at end of file
+    .nav-link {
+        color: s.$body-color;
+        position: relative;
+        padding: 10px 30px;
+        display: flex;
+
+        .icon {
+            font-size: 24px;
+            line-height: 1;
+        }
+
+        .label {
+            position: absolute;
+            opacity: 0;
+            font-size: 12px;
+            top: 50%;
+            left: 60px;
+            transform: translateY(-50%);
+            z-index: -1;
+        }
+
+        &.active {
+            padding-right: 60px;
+            .icon {
+                font-family: 'Material Icons';
+            }
+
+            .label {
+                opacity: 1;
+            }
+        }
+    }
+}
\ No newline at end of file

client/src/images/svg/hamburger.svg

+<svg width="31" height="24" viewBox="0 0 31 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="31" height="4" rx="2" fill="#3A5255"/>
+<rect y="10" width="24" height="4" rx="2" fill="#3A5255"/>
+<rect y="20" width="12" height="4" rx="2" fill="#3A5255"/>
+</svg>

client/src/images/svg/profile.svg

+<svg width="21" height="25" viewBox="0 0 21 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" width="15" height="15" rx="7.5" fill="#3A5255"/>
+<rect y="18" width="21" height="7" rx="3.5" fill="#3A5255"/>
+</svg>

client/src/index.scss

@@ -46,7 +46,7 @@ a {
     max-width: 1280px;
     width: 100%;
     margin: 0 auto;
-    padding: 20px;
+    padding: 30px;
 }
 
 h1, h2, h3, h4, h5, h6 {

client/src/pages/Tasks/index.tsx

-import Navigation from 'components/ui/Navigation';
 import './tasks.scss';
 
 export default function Tasks() {
     return (
-        <div className="tasks-page">
-            <Navigation />
-            <main>
-                <h1>Tasks</h1>
-            </main>
-        </div>
+        <>
+            <div className="tasks-page page-container">
+                <main className="content-container">
+                    <h1>Tasks</h1>
+                    <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
+                </main>
+            </div>
+        </>
     );
 }
\ No newline at end of file