nav fixes

client/src/adapters/auth.ts

@@ -91,4 +91,3 @@ export async function login(username: string, password: string): Promise<boolean
         throw e;
     }
 }
-

client/src/components/graphs/LineGraph/index.tsx

+export default function LineGraph() {
+    return (
+        <div className="line-graph">
+            <svg viewBox="0 0 260 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.2015 75.7723C20.1112 70.0477 37.6267 81.5131 63.9321 78.3076C90.2375 75.102 102.251 20.7496 131.038 17.2416C159.825 13.7336 179.555 30.9736 198.912 28.6147C218.269 26.2559 235.267 4.54031 256.113 2.00004" stroke="url(#paint0_linear)" stroke-width="4" />
+                <defs>
+                    <linearGradient id="paint0_linear" x1="262" y1="2" x2="21" y2="85" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="white" />
+                        <stop offset="1" stop-color="white" stop-opacity="0.61" />
+                    </linearGradient>
+                </defs>
+            </svg>
+        </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 (
         <nav className="site-nav">
-            <img src={background} alt="Background" className="background" />
             <NavLink to="/tasks" activeClassName="active" className="nav-link">
                 <span className="icon material-icons-outlined">
                     home

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

@@ -11,20 +11,13 @@
     align-items: center;
     justify-content: center;
     z-index: 200;
+    background: s.$white;
+    box-shadow: 0 0 25px rgba(s.$black, 0.1);
 
     @include mx.breakpoint(medium) {
         display: none;
     }
 
-    .background {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: auto;
-        z-index: -1;
-    }
-
     .nav-link {
         color: s.$body-color;
         position: relative;

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

 import Navigation from 'components/ui/Navigation';
+import avatar from 'images/daniel-planoetscher.jpg';
+import LineGraph from 'components/graphs/LineGraph';
+import { Link, useHistory } from 'react-router-dom';
+import { clearToken } from 'adapters/auth';
 import './sidebar.scss';
 
 interface Props {
     mobileShown: boolean;
 }
 
-export default function Sidebar({mobileShown}: Props) {
+export default function Sidebar({ mobileShown }: Props) {
+
+    const history = useHistory();
+
+    const logout = () => {
+        clearToken();
+        history.push('/login');
+    }
+
     return (
         <aside className={'site-aside' + (mobileShown ? ' shown' : '')}>
-            <div className="profile-section">
-                
+            <div className="top">
+                <div className="profile">
+                    <div className="avatar">
+                        <img src={avatar} alt="Profile" />
+                    </div>
+                    <span className="name">Daniel Planötscher</span>
+                    <span className="team">ryoko</span>
+                </div>
+                <Navigation />
+                <nav className="secondary-nav">
+                    <Link to="/team" className="nav-link">
+                        Team
+                </Link>
+                    <Link to="/settings" className="nav-link">
+                        Settings
+                </Link>
+                    <button className="nav-link" onClick={logout}>
+                        Logout
+                </button>
+                </nav>
+            </div>
+            <div className="stats">
+                <LineGraph />
+                <div className="comment">You are doing well!</div>
             </div>
-            <Navigation />
-            
         </aside>
     );
 }
\ No newline at end of file

client/src/components/ui/Sidebar/sidebar.scss

 @use 'styles/settings.scss'as s;
 @use 'styles/mixins.scss'as mx;
+@use 'styles/functions.scss'as fn;
 
 .site-aside {
     position: fixed;
@@ -16,6 +17,12 @@
     border-bottom-right-radius: 25px;
     transform: translateX(-100%);
     visibility: hidden;
+    padding: 60px 30px;
+    color: s.$white;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     &.shown {
         transform: translateX(0);
@@ -30,14 +37,82 @@
 
     }
 
+
+    .profile {
+        margin-bottom: 50px;
+
+        .avatar {
+            width: 130px;
+            height: 130px;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-bottom: 20px;
+
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+
+        .name {
+            font-size: fn.toRem(20);
+            font-weight: s.$weight-semi-bold;
+            display: block;
+        }
+
+        .team {
+            font-size: fn.toRem(14);
+        }
+    }
+
+    .nav-link {
+        display: flex;
+        align-items: center;
+        color: s.$white;
+        opacity: 0.7;
+
+        .icon {
+            padding-right: 10px;
+        }
+
+        &.active,
+        &:hover {
+            opacity: 1;
+        }
+    }
+
     .site-nav {
-        display: block;
-        position: static;
+        display: none;
+        position: relative;
+        background: transparent;
+        box-shadow: none;
+        height: auto;
+        padding-bottom: 30px;
+        margin-bottom: 30px;
+
+        @include mx.breakpoint(medium) {
+            display: block;
+        }
+
+        &:after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 2px;
+            width: 40px;
+            background: rgba(s.$white, 0.1);
+
+        }
 
         .nav-link {
-            color: s.$white;
+            padding: 10px 0;
+
             .label {
+                position: static;
+                transform: none;
                 opacity: 1;
+                font-size: fn.toRem(20);
             }
         }
 
@@ -46,4 +121,25 @@
         }
     }
 
-}
\ No newline at end of file
+    .secondary-nav {
+        display: block;
+
+        .nav-link {
+            font-size: fn.toRem(18);
+            padding: 5px 0;
+        }
+    }
+
+    .stats {
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        font-size: fn.toRem(14);
+        font-weight: s.$weight-semi-bold;
+        .line-graph {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+    }
+}

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

-<svg viewBox="0 0 411 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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"/>
-</svg>

client/src/index.scss

@@ -21,10 +21,17 @@ body {
 
 }
 
-a {
-    font-weight: s.$weight-bold;
+button {
+    background: none;
+    border: none;
+    outline: none;
+}
+
+a, button {
+    font-weight: s.$weight-semi-bold;
     color: s.$primary;
     text-decoration: none;
+    cursor: pointer;
 
     &:hover {
         color: rgba(s.$primary, 0.5);
@@ -140,7 +147,7 @@ h4 {
             filter: blur(300px);
             opacity: 0.75;
         }
-        
+
         @include mx.breakpoint(large) {
             width: 500px;
             height: 500px;
@@ -158,4 +165,4 @@ h4 {
             background: s.$accent;
         }
     }
-}
+}
\ No newline at end of file

client/src/pages/Login/index.tsx

@@ -2,11 +2,12 @@ import Page from 'components/ui/Page';
 import { Link, useHistory } from 'react-router-dom';
 import LoginForm from 'components/forms/LoginForm';
 import './login.scss';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { login } from 'adapters/auth';
 
 export default function Login() {
     const history = useHistory();
+    const [error, setError] = useState<string>('');
     const handleSubmit = useCallback(async (username: string, password: string) => {
         try {
             if (await login(username, password)) {
@@ -18,6 +19,7 @@ export default function Login() {
     return (
         <div className="login-page-container">
             <Page className="login-page">
+            
                 <div className="content-container">
                     <h1 className="underlined">Login</h1>
                     <LoginForm onSubmit={handleSubmit} />