diff --git a/client/src/App.tsx b/client/src/App.tsx
index d3835a341539790863f6888ae25a77f7aa9c35fb..38ea359fb60fce8f888b6dae8dfcccc2ed6f4e68 100644
--- a/client/src/App.tsx
+++ b/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} />
diff --git a/client/src/components/helpers/Rerouters/ProtectedRoute.tsx b/client/src/components/helpers/Rerouters/ProtectedRoute.tsx
index 1d9ff0078a61f77f72bb79270f5b49f46637a4ea..c3f3daeb8e0d5f5cabaab8ac164a46f8526fed88 100644
--- a/client/src/components/helpers/Rerouters/ProtectedRoute.tsx
+++ b/client/src/components/helpers/Rerouters/ProtectedRoute.tsx
@@ -1,17 +1,29 @@
-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 (
diff --git a/client/src/components/ui/Header/header.scss b/client/src/components/ui/Header/header.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4d137387d1c6b19dd9d52d0998bbef6d5e25bc06 100644
--- a/client/src/components/ui/Header/header.scss
+++ b/client/src/components/ui/Header/header.scss
@@ -0,0 +1,7 @@
+.site-header {
+ display: flex;
+ justify-content: space-between;
+ img {
+ padding: 35px;
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Header/index.tsx b/client/src/components/ui/Header/index.tsx
index 27334428a9835f2f642cc1e55cb167def708c26e..22257f96381524142f394bbab0ee8e299d48e709 100644
--- a/client/src/components/ui/Header/index.tsx
+++ b/client/src/components/ui/Header/index.tsx
@@ -1,7 +1,12 @@
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
diff --git a/client/src/components/ui/Navigation/index.tsx b/client/src/components/ui/Navigation/index.tsx
index 2eeebf05ad8a0c6a45049be16227ff89e0f41faa..4a019f25a2382ee193855389775eea4aa0001a05 100644
--- a/client/src/components/ui/Navigation/index.tsx
+++ b/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
diff --git a/client/src/components/ui/Navigation/navigation.scss b/client/src/components/ui/Navigation/navigation.scss
index 5edd637059e3a54900f5d19ffbda243a61215587..5d192c40213dbd3ad8f0ab6d3994748567a1ceb9 100644
--- a/client/src/components/ui/Navigation/navigation.scss
+++ b/client/src/components/ui/Navigation/navigation.scss
@@ -1,5 +1,54 @@
-.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
diff --git a/client/src/images/svg/hamburger.svg b/client/src/images/svg/hamburger.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b370555eb1a10f494e4d81dec8ff5ccd16421568
--- /dev/null
+++ b/client/src/images/svg/hamburger.svg
@@ -0,0 +1,5 @@
+<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>
diff --git a/client/src/images/svg/profile.svg b/client/src/images/svg/profile.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c4a4f4ee334d48fadf34dfcffa551aa5f8162b2e
--- /dev/null
+++ b/client/src/images/svg/profile.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/client/src/index.scss b/client/src/index.scss
index 526bfefb7f908d5789fc1a139c8fc00ae6155db4..46b3eb5ab99157beba7219048888796cfca70a7b 100644
--- a/client/src/index.scss
+++ b/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 {
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 83935611405705560f5860375c2d9acf8ef16d31..6e12d538b58dc19f9ac96dc2076d4737cb7bb82b 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -1,13 +1,14 @@
-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