basic nav for in app

client/public/index.html

@@ -16,6 +16,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> 
     <title>ryoko | plan your projects like a journey</title>
 </head>
 

client/src/App.tsx

@@ -8,6 +8,8 @@ const Home = lazy(() => import('pages/Home'));
 const Login = lazy(() => import('pages/Login'));
 const Register = lazy(() => import('pages/Register'));
 const Tasks = lazy(() => import('pages/Tasks'));
+const Projects = lazy(() => import('pages/Projects'));
+const Stats = lazy(() => import('pages/Stats'));
 
 export default function App() {
     return (
@@ -15,6 +17,8 @@ export default function App() {
             <Suspense fallback={false}>
                 <Switch>
                     <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/ui/Header/index.tsx

+import './header.scss';
+
+export default function Header() {
+   return (
+       <div></div>
+   );
+}
\ No newline at end of file

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

+import { NavLink } from 'react-router-dom';
+
 import './navigation.scss';
+import background from 'images/svg/nav-bg.svg';
+
 
 export default function Navigation() {
     return (
-        <main>
-            <h1>Navigation</h1>
-        </main>
+        <nav>
+            <NavLink to="/tasks" activeClassName="active" className="nav-link">
+                <span className="icon material-icons-outlined">
+                    home
+                </span>
+                <span className="label">Home</span>
+            </NavLink>
+            <NavLink to="/projects" activeClassName="active" className="nav-link">
+                <span className="icon material-icons-outlined">
+                    public
+                </span>
+                <span className="label">Projects</span>
+            </NavLink>
+            <NavLink to="/stats" activeClassName="active" className="nav-link">
+                <span className="icon material-icons-outlined">
+                    public
+                </span>
+                <span className="label">Stats</span>
+            </NavLink>
+            <img src={background} alt="Background" className="background" />
+        </nav>
     );
 }
\ No newline at end of file

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

+.active {
+    .icon {
+        font-family: 'Material Icons';
+    }
+} 
\ No newline at end of file

client/src/images/svg/nav-bg.svg

+<svg width="411" height="78" viewBox="0 0 411 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_b)">
+<path d="M208.5 1.00001C35.5 -4.4826 -0.5 25.5 -0.5 25.5V77.5H411V27C411 27 381.5 6.48262 208.5 1.00001Z" fill="white"/>
+</g>
+</svg>

client/src/pages/Projects/index.tsx

+
+import Navigation from 'components/ui/Navigation';
+import './projects.scss';
+
+export default function Tasks() {
+    return (
+        <div className="projects-page">
+            <Navigation />
+            <main>
+                <h1>Projects</h1>
+            </main>
+        </div>
+    );
+}
\ No newline at end of file

client/src/pages/Stats/index.tsx

+
+import Navigation from 'components/ui/Navigation';
+import './stats.scss';
+
+export default function Tasks() {
+    return (
+        <div className="stats-page">
+            <Navigation />
+            <main>
+                <h1>Stats</h1>
+            </main>
+        </div>
+    );
+}
\ No newline at end of file