Change list of menus and add hover effect of menu (#189)

* feat: change list of menus and add hover effect of menu

* fix: fix hover effect

* fix: fix wrong font size, height, padding and etc to same as Figma

* fix: fix class name

* fix: fix wrong css values

* fix: fix typo

* Delete package-lock.json

* fix: change menu height as much as button height and padding

* fix: fix logo and menu items on header

* fix: fix --layout-padding-horizontal value

* fix: remove irrelevant var

Co-authored-by: Umang G. Patel <23169768+robonetphy@users.noreply.github.com>

.codexdocsrc.sample

@@ -3,9 +3,7 @@
   "description": "A block-styled editor with clean JSON output",
   "menu": [
     "Guides",
-    "API",
-    "Plugins",
-    {"title": "Support Project", "uri": "/support"}
+    {"title": "CodeX", "uri": "https://codex.so"}
   ],
   "landingFrameSrc": "https://codex.so/editor?frame=1",
   "startPage": "",

src/frontend/styles/components/header.pcss

@@ -1,10 +1,10 @@
 .docs-header {
   display: flex;
+  justify-content: space-between;
   flex-shrink: 0;
-  padding: 0 var(--layout-padding-horisontal);
+  padding: 12px var(--layout-padding-horizontal);
   border-bottom: 1px solid var(--color-line-gray);
-  font-size: 15.8px;
-  line-height: 50px;
+  font-size: 18px;
   flex-wrap: wrap;
   position: relative;
 
@@ -15,17 +15,34 @@
   &__menu-link,
   &__logo {
     display: inline-block;
+    text-decoration: none;
+    align-self: center;
+    line-height: 24px;
   }
 
   &__logo {
+    padding: 4px 0;
     font-weight: bold;
     color: inherit;
   }
 
+  &__menu-link {
+    padding: 4px 10px;
+    font-weight: 500;
+    border-radius: 8px;
+    transition: background-color .13s;
+
+    &:hover {
+      background-color: var(--color-link-hover);
+    }
+  }
+
   &__menu {
     display: flex;
-    margin: 0 0 0 auto;
+    margin: 0;
+    gap: 10px;
     padding-left: 0;
+    font-size: 16px;
 
     @media (--mobile) {
       flex-basis: 100%;
@@ -36,7 +53,6 @@
       display: inline-flex;
       align-items: center;
       list-style: none;
-      margin-left: 20px;
 
       @media (--mobile) {
         margin-left: 0;
@@ -66,11 +82,5 @@
         }
       }
     }
-
-    &-link {
-      &:hover {
-        color: var(--color-link-active);
-      }
-    }
   }
 }

src/frontend/styles/layout.pcss

@@ -1,6 +1,6 @@
 .docs {
   display: flex;
-  padding: 0 var(--layout-padding-horisontal);
+  padding: 0 var(--layout-padding-horizontal);
 
   @media (--mobile) {
     flex-wrap: wrap;
@@ -12,8 +12,8 @@
     @media (--mobile) {
       width: 100%;
       flex-basis: 100%;
-      padding: 20px var(--layout-padding-horisontal) !important;
-      margin: 0 calc(-1 * var(--layout-padding-horisontal));
+      padding: 20px var(--layout-padding-horizontal) !important;
+      margin: 0 calc(-1 * var(--layout-padding-horizontal));
       border-bottom: 1px solid var(--color-line-gray);
     }
   }

src/frontend/styles/vars.pcss

@@ -3,6 +3,7 @@
   --color-text-second: #5d6068;
   --color-line-gray: #E8E8EB;
   --color-link-active: #2071cc;
+  --color-link-hover: #F3F6F8;
   --color-bg-light: #f8f7fa;
   --color-page-active: #ff1767;
 
@@ -22,13 +23,13 @@
   /**
    * Site layout sizes
    */
-  --layout-padding-horisontal: 30px;
+  --layout-padding-horizontal: 16px;
   --layout-padding-vertical: 30px;
   --layout-width-aside: 300px;
   --layout-width-main-col: 650px;
 
   @media (--mobile) {
-    --layout-padding-horisontal: 15px;
+    --layout-padding-horizontal: 15px;
     --layout-padding-vertical: 15px;
   }