major improvements to nav system

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

@@ -5,8 +5,8 @@ export default function LineGraph() {
                 <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" />
+                        <stop stopColor="white" />
+                        <stop offset="1" stop-color="white" stopOpacity="0.61" />
                     </linearGradient>
                 </defs>
             </svg>

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

 @use 'styles/mixins'as mx;
 
-@include mx.breakpoint(large) {
-    .has-sidebar {
+
+.full-width {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.page-wrapper {
+    &.moved {
+        transform: translateX(340px) scale(.9);
+    }
+    @include mx.breakpoint(large) {
         padding-left: 340px;
 
         .page-container {
@@ -24,4 +34,4 @@
     img {
         padding: 35px 30px 20px 30px;
     }
-}
\ No newline at end of file
+}

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

@@ -3,18 +3,27 @@ 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';
+import { ReactNode, useState } from 'react';
 
-export default function Header() {
+interface Props {
+    children?: ReactNode
+}
+
+export default function Header({ children }: Props) {
     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>
+            <div className="full-width">
+                <Sidebar mobileShown={showSidebar} />
+                <div className={'page-wrapper' + (showSidebar ? ' moved' : '')} onClick={() => showSidebar && setShowSidebar(false)}>
+                    <header className="site-header">
+                        <img src={hamburger} alt="Navigation" onClick={() => !showSidebar && setShowSidebar(true)} />
+                        <img src={profile} alt="Profile" />
+                    </header>
+                    {children}
+                    <Navigation />
+                </div>
+            </div>
         </>
     );
 }
\ No newline at end of file

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

@@ -17,7 +17,7 @@
     border-bottom-right-radius: 25px;
     transform: translateX(-100%);
     visibility: hidden;
-    padding: 60px 30px;
+    padding: 50px 30px;
     color: s.$white;
     overflow: auto;
     display: flex;

client/src/index.scss

@@ -18,7 +18,6 @@ body {
     color: s.$body-color;
     position: relative;
     background: #fff;
-
 }
 
 button {

client/src/pages/AppWrapper.tsx

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