fix(navbar): update navbar design (#297)

* fix(navbar): navbar logo fix

* fix(navbar): fix inner wrapper and children overflows and adjust spacing

#287

* fix(navbar): fix navbar spacing issues and right icon color

Author: rishichawda

doc/src/components/common/componentData/Navbar/index.js

@@ -145,10 +145,6 @@ export const componentData = {
 
       render() {
 
-        const MenuIcon = () => (
-          <svg xmlns="http://www.w3.org/2000/svg" height="30px" id="Layer_1"  version="1.1" viewBox="0 0 30 30" width="30px"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
-        );
-
         return (
           <div>
             <PreviewBlock header="Default Navbar">
@@ -160,7 +156,7 @@ export const componentData = {
             <PreviewBlock header="Navbar with leftIcon">
 
             {/* Navbar with icon on left set with leftIcon prop */}
-              <Navbar leftIcon={<MenuIcon />} title="logo" />
+              <Navbar leftIcon={match} title="logo" />
 
             </PreviewBlock>
             <PreviewBlock header="Flat Navbar (No box shadow)">

lib/navbar/theme.module.scss

@@ -2,11 +2,10 @@
 
 :local(.navbarWrapper) {
   z-index: 2;
+  display: flex;
   box-sizing: border-box;
   width: 100%;
-  height: 81px;
-  height: fit-content;
-  height: -moz-fit-content;
+  height: 5rem;
   font-family: 'Roboto';
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
   .clearfix {
@@ -15,8 +14,10 @@
 }
 :local(.innerWrapper) {
   display: flex;
+  padding: 0% 2%;
   z-index: 2;
   justify-content: space-between;
+  align-items: center;
   height: 100%;
   width: 100%;
   position: relative;
@@ -31,6 +32,8 @@
   box-sizing: border-box;
   padding: 2%;
   display: flex;
+  width: fit-content;
+  width: -moz-fit-content;
   align-items: center;
 }
 :local(.title) {
@@ -39,7 +42,6 @@
   height: 33px;
   font-size: 24px;
   font-weight: bold;
-  text-transform: uppercase;
   color: $white;
   margin-right: 15px;
   white-space: nowrap;
@@ -58,17 +60,12 @@
   cursor: pointer;
   svg, img {
     width: auto;
-    height: 100%;
+    height: 70%;
     color: $white;
     fill: $white;
   }
 }
-:local(.leftIcon) {
-  margin-right: 15px;
-}
-:local(.rightIcon) {
-  margin-left: 15px;
-}
+
 :local(.fixedPosition) {
   position: fixed;
   top: 0;
@@ -122,8 +119,7 @@
 @media only screen and (max-width: 768px) {
   .icon-menu {
     display: block;
-    background: white;
-    color: $cool-blue;
+    color: white;
   }
 
   :local(.navlinks) {