fix: add sticky header and fixed sidenav

src/components/Chart.jsx

@@ -47,7 +47,7 @@ export const Chart = (props) => {
     };
 
     return (
-        <KendoChart style={{ height: 350 }} onRefresh={onRefresh}>
+        <KendoChart style={{ height: 300 }} onRefresh={onRefresh}>
             <ChartLegend position="bottom" orientation="horizontal" background={'#f4f5f8'} padding={{ left: 80 }} labels={{padding: { right: 80 }}}/>
             <ChartTooltip render={ChartTooltipRender} />
             <ChartSeries>

src/pages/Dashboard.jsx

@@ -122,7 +122,7 @@ const Dashboard = () => {
                 </div>
                 <span></span>
                 <div className="card-component">
-                    <Grid data={filterBy(data, gridFilterExpression)} style={{ height: 480, maxWidth: window.innerWidth - 20 }} onDataChange={data => setData(data)}>
+                    <Grid data={filterBy(data, gridFilterExpression)} style={{ height: 450, maxWidth: window.innerWidth - 20 }} onDataChange={data => setData(data)}>
                         <Column title={localizationService.toLanguageString('custom.employee')} groupable={false}>
                             <Column field={'fullName'} title={localizationService.toLanguageString('custom.contactName')} columnMenu={ColumnMenu} width={230} cell={FullNameCell} />
                             <Column field={'jobTitle'} title={localizationService.toLanguageString('custom.jobTitle')} columnMenu={ColumnMenu} width={230} />

src/styles/_common.scss

@@ -20,6 +20,21 @@ a {
         box-shadow: 0 0 10px rgba(0,0,0,.2);
         border-right-width: 0 !important;
     }
+
+    .k-drawer-wrapper {
+        position: fixed;
+    }
+
+    &.k-drawer-expanded .k-drawer-wrapper {
+        width: 240px !important;
+    }
+
+    & .k-drawer-wrapper {
+        width: 50px !important;
+        opacity: 1;
+        transition: all 200ms ease 0s;
+    }
+
     .k-drawer-item {
         user-select: none;
 
@@ -32,6 +47,7 @@ a {
             mask-repeat: no-repeat;
             background-color: #656565;
             width: 20px;
+            height: 25px;
 
             &.dashboard-icon {
                 -webkit-mask-image: url('./../assets/dashboard-icon.svg');
@@ -174,6 +190,9 @@ a {
 // Header
 .header {
     height: 80px;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
 
     .nav-container {
         display: flex;