fix: skeletons for headers to avoid data fetching

components/Current/Header/MainMenu/mainMenu.module.css

@@ -27,11 +27,9 @@
 .navBar {
   display: grid;
   grid-template-columns: 1fr 80px 1fr;
-  grid-template-columns: auto auto 1fr auto;
   grid-template-areas: "expanderBtn logoLink . buttonContainer";
   grid-template-rows: 100%;
   height: 100%;
-  padding: 0 var(--Spacing-x2);
 }
 
 .expanderBtn {
@@ -50,7 +48,7 @@
   background: #757575;
   border-radius: 2.3px;
   display: inline-block;
-  height: 3px;
+  height: 5px;
   position: relative;
   transition: 0.3s;
   width: 32px;
@@ -107,7 +105,6 @@
   align-items: center;
   height: 100%;
   width: 80px;
-  padding-left: var(--Spacing-x1);
 }
 
 .logo {
@@ -241,6 +238,12 @@
   display: none;
 }
 
+.skeletonWrapper {
+  padding: 4px 10px;
+  height: 100%;
+  align-content: center;
+}
+
 @media (min-width: 1367px) {
   .navBar {
     grid-template-columns: 140px auto 1fr;