refactor(gh-pages): add share button to header

exadel-inc · May 18, 2023 · 2fdaf4d · 2fdaf4d
1 parent be7aa83
commit 2fdaf4d
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 7 deletions.
diff --git a/pages/src/navigation/header/header.less b/pages/src/navigation/header/header.less
@@ -15,12 +15,6 @@
     height: @header-height-desktop;
   }
 
-  @media @md-xl {
-    .landing-layout & {
-      background-color: transparent;
-    }
-  }
-
   &-container {
     display: flex;
     align-items: center;
@@ -90,6 +84,17 @@
     }
   }
 
+  &-share-popup.esl-popup {
+    &, & > .esl-popup-arrow {
+      background: @landing-bg-color;
+      border-color: gray;
+    }
+    > .esl-share {
+      margin: .75rem;
+      gap: .25rem;
+    }
+  }
+
   &-utility {
     display: flex;
     align-items: center;

diff --git a/pages/src/navigation/sidebar/sidebar-primary-nav.less b/pages/src/navigation/sidebar/sidebar-primary-nav.less
@@ -13,6 +13,28 @@ esl-d-sidebar {
     margin-bottom: 5px;
   }
 
+  // Share item
+  .sidebar-nav-item-share {
+    margin-top: 20px;
+    @media @md-xl {
+      display: none;
+    }
+
+    .esl-share-list {
+      gap: 15px;
+    }
+    .esl-share-button {
+      width: 30px;
+      height: 30px;
+    }
+    .sidebar-nav-item-heading {
+      gap: 15px;
+      @media @sm {
+        flex-direction: column;
+      }
+    }
+  }
+
   // Primary Heading
   .sidebar-nav-item-heading {
     position: relative;

diff --git a/pages/src/page/landing-layout.less b/pages/src/page/landing-layout.less
@@ -33,7 +33,6 @@
     100% { background-position: 100vw 0; opacity: 1; }
   }
 
-
   .main-scroll {
     position: absolute;
     z-index: 5;
@@ -50,4 +49,10 @@
       background: #2e2f35;
     }
   }
+
+  @media @md-xl {
+    .header {
+      background-color: transparent;
+    }
+  }
 }
diff --git a/pages/static/assets/common/header-share.svg b/pages/static/assets/common/header-share.svg
diff --git a/pages/static/assets/share/config.json b/pages/static/assets/share/config.json
@@ -165,6 +165,10 @@
     }
   ],
   "groups": [
+    {
+      "name": "site",
+      "list": "facebook twitter linkedin telegram copy"
+    },
     {
       "name": "demo",
       "list": "facebook twitter linkedin wykop copy"

diff --git a/pages/views/_includes/navigation/header.njk b/pages/views/_includes/navigation/header.njk
@@ -23,6 +23,20 @@
           {% include 'static/assets/common/header-search.svg' %}
         </esl-trigger>
       </li>
+      <li class="header-nav-item">
+        <esl-trigger target="::next" mode="toggle" track-click track-hover class="header-link icon-link">
+          {% include 'static/assets/common/header-share.svg' %}
+        </esl-trigger>
+        <esl-popup id="site-share-popup"
+                   class="header-share-popup"
+                   position="bottom"
+                   default-params="{hideDelay: 500}"
+                   close-on-esc
+                   close-on-outside-action>
+          <esl-share list="group:site"></esl-share>
+          <span class="esl-popup-arrow"></span>
+        </esl-popup>
+      </li>
     </ul>
     <div class="header-utility">
       <a class="header-btn btn btn-lg btn-sec-blue" href="{{ '/introduction' | url }}">Get started</a>

diff --git a/pages/views/_includes/navigation/sidebar.njk b/pages/views/_includes/navigation/sidebar.njk
@@ -42,6 +42,12 @@
             {{ navitem ('Drafts', 'draft', 'static/assets/common/flask.svg') }}
           </li>
         {% endif %}
+        <li class="sidebar-nav-item sidebar-nav-item-share">
+          <div class='sidebar-nav-item-heading'>
+            <span>Share us with:</span>
+            <esl-share list="group:site"></esl-share>
+          </div>
+        </li>
       </ul>
 
       <esl-scrollbar class="sidebar-scrollbar" target="::prev"></esl-scrollbar>