basic sidebar integration

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

+@use 'styles/mixins'as mx;
+
+@include mx.breakpoint(large) {
+    .has-sidebar {
+        padding-left: 340px;
+
+        .page-container {
+            max-width: 940px;
+        }
+
+    }
+}
+
 .site-header {
     display: flex;
     justify-content: space-between;
+    background: rgba(255, 255, 255, 0.4);
+    backdrop-filter: blur(30px);
+
+    @include mx.breakpoint(large) {
+        display: none;
+    }
+
     img {
         padding: 35px 30px 20px 30px;
     }

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

 import './header.scss';
 import hamburger from 'images/svg/hamburger.svg';
 import profile from 'images/svg/profile.svg';
+import Navigation from 'components/ui/Navigation';
+import Sidebar from 'components/ui/Sidebar';
+import { useState } from 'react';
 
 export default function Header() {
-   return (
-       <header className="site-header">
-           <img src={hamburger} alt="Navigation"/>
-           <img src={profile} alt="Profile"/>
-       </header>
-   );
+    const [showSidebar, setShowSidebar] = useState<boolean>(false);
+    return (
+        <>
+            <Navigation />
+            <Sidebar mobileShown={showSidebar} />
+            <header className="site-header">
+                <img src={hamburger} alt="Navigation" onClick={() => setShowSidebar(state => !state)} />
+                <img src={profile} alt="Profile" />
+            </header>
+        </>
+    );
 }
\ No newline at end of file

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

 @use 'styles/settings.scss'as s;
+@use 'styles/mixins.scss'as mx;
 
 .site-nav {
     position: fixed;
@@ -11,6 +12,10 @@
     justify-content: center;
     z-index: 200;
 
+    @include mx.breakpoint(medium) {
+        display: none;
+    }
+
     .background {
         position: absolute;
         bottom: 0;
@@ -43,6 +48,7 @@
 
         &.active {
             padding-right: 60px;
+
             .icon {
                 font-family: 'Material Icons';
             }

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

 
 import { ReactNode } from 'react';
 
-import Header from 'components/ui/Header';
 import './page.scss';
 
 interface Props {
     children?: ReactNode,
     className?: string,
-    header?: boolean
 }
 
-export default function Page({ children, className, header }: Props) {
-    header = header ?? true;
+export default function Page({ children, className }: Props) {
     return (
-        <>
-            <main className={'page-container ' + (className ?? '')}>
-                {header && <Header />}
-                {children}
-            </main>
-        </>
+        <main className={'page-container ' + (className ?? '')}>
+            {children}
+        </main>
     );
 }
 

client/src/components/ui/Page/page.scss

-
+@use 'styles/mixins' as mx;
+body {
+    @include mx.breakpoint(xlarge) {
+        padding: 5rem 0;
+    }
+}
 .page-container {
     max-width: 1440px;
     min-height: 100vh;

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

+import Navigation from 'components/ui/Navigation';
+import './sidebar.scss';
+
+interface Props {
+    mobileShown: boolean;
+}
+
+export default function Sidebar({mobileShown}: Props) {
+    return (
+        <aside className={'site-aside' + (mobileShown ? ' shown' : '')}>
+            <div className="profile-section">
+                
+            </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;
+
+.site-aside {
+    position: fixed;
+    left: 0;
+    top: 0;
+    max-width: 340px;
+    width: 100%;
+    height: 100vh;
+    background: linear-gradient(170.15deg, #1A0D24 0%, rgba(s.$black, 0.95) 100%);
+    box-shadow: 0px 0px 25px rgba(s.$black, 0.1);
+    border-radius: 0px;
+    z-index: 2000;
+    border-top-right-radius: 25px;
+    border-bottom-right-radius: 25px;
+    transform: translateX(-100%);
+    visibility: hidden;
+
+    &.shown {
+        transform: translateX(0);
+        visibility: visible;
+    }
+
+    @include mx.breakpoint(large) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        transform: translateX(0);
+        visibility: visible;
+
+    }
+
+    .site-nav {
+        display: block;
+        position: static;
+
+        .nav-link {
+            color: s.$white;
+            .label {
+                opacity: 1;
+            }
+        }
+
+        .background {
+            display: none;
+        }
+    }
+
+}
\ No newline at end of file

client/src/index.scss

@@ -87,9 +87,7 @@ h2 {
 
     @include mx.breakpoint(large) {
         font-size: fn.toRem(36);
-        margin: 0 auto fn.toRem(24) auto;
-        max-width: 560px;
-        text-align: center;
+        margin-bottom: fn.toRem(24);
     }
 
     &.left {
@@ -134,13 +132,13 @@ h4 {
         height: 300px;
         position: absolute;
         filter: blur(150px);
-        opacity: 0.5;
+        opacity: 0.6;
 
         @include mx.breakpoint(medium) {
             width: 400px;
             height: 400px;
             filter: blur(300px);
-            opacity: 0.6;
+            opacity: 0.75;
         }
         
         @include mx.breakpoint(large) {

client/src/pages/AppWrapper.tsx

 
 import { Suspense, lazy } from 'react';
 
-import ProtectedRoute from 'components/helpers/ProtectedRoute'; 
-import Navigation from 'components/ui/Navigation';
+import ProtectedRoute from 'components/helpers/ProtectedRoute';
+import Header from 'components/ui/Header';
 
 const Tasks = lazy(() => import('pages/Tasks'));
 const Projects = lazy(() => import('pages/Projects'));
@@ -10,12 +10,14 @@ const Stats = lazy(() => import('pages/Stats'));
 
 export default function AppWrapper() {
     return (<>
-        <Navigation />
-        <Suspense fallback={false}>
-            <ProtectedRoute path="/tasks" component={Tasks} />
-            <ProtectedRoute path="/projects" component={Projects} />
-            <ProtectedRoute path="/stats" component={Stats} />
-        </Suspense>
+        <Header />
+        <div className="has-sidebar">
+            <Suspense fallback={false}>
+                <ProtectedRoute path="/tasks" component={Tasks} />
+                <ProtectedRoute path="/projects" component={Projects} />
+                <ProtectedRoute path="/stats" component={Stats} />
+            </Suspense>
+        </div>
     </>);
 }
 

client/src/pages/Home/home.scss

@@ -6,10 +6,16 @@
 .landing-page {
     //General
 
-    @include mx.breakpoint(xlarge) {
-        padding: 5rem 0;
+    h2 {
+
+        @include mx.breakpoint(large) {
+            margin: 0 auto fn.toRem(24) auto;
+            max-width: 560px;
+            text-align: center;
+        }
     }
 
+
     section {
         margin-bottom: 70px;
 
@@ -430,4 +436,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file

client/src/pages/Home/index.tsx

@@ -10,7 +10,7 @@ import ImageDaniel from 'images/daniel-planoetscher.jpg';
 
 export default function Home() {
     return (<>
-        <Page className="landing-page" header={false}>
+        <Page className="landing-page">
             <section className="hero-section" id="hero">
                 <div className="hero-container">
                     <header>

client/src/pages/Login/index.tsx

@@ -17,7 +17,7 @@ export default function Login() {
 
     return (
         <div className="login-page-container">
-            <Page className="login-page" header={false}>
+            <Page className="login-page">
                 <div className="content-container">
                     <h1 className="underlined">Login</h1>
                     <LoginForm onSubmit={handleSubmit} />

client/src/pages/Register/index.tsx

@@ -21,7 +21,7 @@ export default function Register() {
 
     return (
         <div className="register-page-container">
-            <Page className="register-page" header={false}>
+            <Page className="register-page">
                 <div className="content-container">
                     <h1 className="underlined">Register</h1>
                     <RegisterForm onSubmit={handleSubmit} />