From f4ba12fbfed993b0ac29e0b4a2a9560403d814a4 Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Fri, 3 Jun 2022 00:45:22 +0530
Subject: [PATCH] fixed header and sidebar added

---
 src/frontend/styles/components/header.pcss |  5 ++++-
 src/frontend/styles/layout.pcss            |  8 ++++++--
 src/frontend/styles/main.pcss              | 24 +++++++++++-----------
 src/frontend/styles/vars.pcss              | 21 +++++++++----------
 4 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss
index 8ddd495..41c6e56 100644
--- a/src/frontend/styles/components/header.pcss
+++ b/src/frontend/styles/components/header.pcss
@@ -6,7 +6,10 @@
   border-bottom: 1px solid var(--color-line-gray);
   font-size: 18px;
   flex-wrap: wrap;
-  position: relative;
+  position: fixed;
+  width: 100%;
+  z-index: 2;
+  background: white;
 
   @media (--mobile) {
     line-height: 40px;
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index 2a601fb..0885419 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -1,6 +1,5 @@
 .docs {
   display: flex;
-
   @media (--mobile) {
     flex-wrap: wrap;
   }
@@ -8,7 +7,11 @@
   &__aside {
     width: var(--layout-width-aside);
     padding: 0px 22px;
-    border-right: solid 1px #e8e8eb;
+    border-right: solid 1px var(--color-line-gray);
+    position: fixed;
+    height: calc(
+      100vh - var(--layout-padding-vertical) - var(--layout-height-header)
+    );
 
     @media (--mobile) {
       width: 100%;
@@ -37,6 +40,7 @@
   &__aside,
   &__content {
     padding-top: var(--layout-padding-vertical);
+    margin-top: var(--layout-height-header);
 
     @media (--mobile) {
       padding: 20px 0;
diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss
index 29c7df5..d942ca0 100644
--- a/src/frontend/styles/main.pcss
+++ b/src/frontend/styles/main.pcss
@@ -1,14 +1,14 @@
-@import 'normalize.css';
-@import './vars.pcss';
-@import './layout.pcss';
-@import './carbon.pcss';
-@import './components/header.pcss';
-@import './components/aside.pcss';
-@import './components/writing.pcss';
-@import './components/page.pcss';
-@import './components/landing.pcss';
-@import './components/auth.pcss';
-@import './components/button.pcss';
+@import "normalize.css";
+@import "./vars.pcss";
+@import "./layout.pcss";
+@import "./carbon.pcss";
+@import "./components/header.pcss";
+@import "./components/aside.pcss";
+@import "./components/writing.pcss";
+@import "./components/page.pcss";
+@import "./components/landing.pcss";
+@import "./components/auth.pcss";
+@import "./components/button.pcss";
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;
@@ -23,5 +23,5 @@ svg {
 
 a {
   text-decoration: none;
-  color: inherit
+  color: inherit;
 }
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index 1c2060b..1009992 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -3,28 +3,28 @@
   --color-text-second: #5d6068;
   --color-line-gray: #e8e8eb;
   --color-link-active: #2071cc;
-  --color-link-hover: #F3F6F8;
+  --color-link-hover: #f3f6f8;
   --color-bg-light: #f8f7fa;
   --color-page-active: #ff1767;
 
-  --color-button-primary: #3389FF;
-  --color-button-primary-hover: #2E7AE6;
-  --color-button-primary-active: #296DCC;
+  --color-button-primary: #3389ff;
+  --color-button-primary-hover: #2e7ae6;
+  --color-button-primary-active: #296dcc;
 
   --color-button-secondary: #717682;
-  --color-button-secondary-hover: #5D6068;
-  --color-button-secondary-active: #4B4F5B;
-
-  --color-button-warning: #EF5C5C;
-  --color-button-warning-hover: #D65151;
-  --color-button-warning-active: #BD4848;
+  --color-button-secondary-hover: #5d6068;
+  --color-button-secondary-active: #4b4f5b;
 
+  --color-button-warning: #ef5c5c;
+  --color-button-warning-hover: #d65151;
+  --color-button-warning-active: #bd4848;
 
   /**
    * Site layout sizes
    */
   --layout-padding-horizontal: 16px;
   --layout-padding-vertical: 30px;
+  --layout-height-header: 57px;
   --layout-width-aside: 300px;
   --layout-width-main-col: 650px;
 
@@ -61,7 +61,6 @@
     }
   }
 
-
   --button-primary {
     background: var(--color-link-active);
     color: #fff;