Merge pull request #117 from etherlinkcom/social-icons

Move social icons to navbar

docusaurus.config.js

@@ -112,9 +112,22 @@ const config = {
         },
         items: [
           {
-            href: 'https://github.com/etherlinkcom/docs',
-            label: 'GitHub',
+            to: 'https://discord.gg/etherlink',
             position: 'right',
+            target: '_blank',
+            className: 'discord-link',
+          },
+          {
+            to: 'https://x.com/etherlink',
+            position: 'right',
+            target: '_blank',
+            className: 'x-link',
+          },
+          {
+            to: 'https://github.com/etherlinkcom/docs',
+            position: 'right',
+            target: '_blank',
+            className: 'github-link',
           },
         ],
       },

sidebars.js

@@ -2,29 +2,12 @@
 
 const sidebars = {
   documentationSidebar: [
-    {
-      type: 'category',
-      label: 'Welcome 👋',
-      collapsed: false,
-      items: [
-        'index',
-        {
-          type: 'link',
-          href: 'https://discord.gg/etherlink',
-          label: 'Join our Discord',
-        },
-        {
-          type: 'link',
-          href: 'https://twitter.com/etherlink',
-          label: 'Follow us on Twitter',
-        },
-      ],
-    },
     {
       type: 'category',
       label: 'Get started 🚀',
       collapsed: false,
       items: [
+        'index',
         'get-started/using-your-wallet',
         'get-started/network-information',
         'get-started/getting-testnet-tokens',

src/css/custom.css

@@ -129,6 +129,62 @@ nav.navbar {
   background-color: #171717;
 }
 
+/* Header icons */
+
+/* Full-size screen */
+@media screen and (min-width: 996px) {
+  .discord-link {
+    align-items: center;
+    display: flex;
+  }
+
+  .discord-link::before {
+    background-image: url("/img/discord-logo-white.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    content: '';
+    display: inline-flex;
+    height: 24px;
+    width: 24px;
+    margin-right: 0.5rem;
+  }
+
+  .x-link {
+    align-items: center;
+    display: flex;
+  }
+
+  .x-link::before {
+    background-image: url("/img/x-logo-white.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    content: '';
+    display: inline-flex;
+    height: 24px;
+    width: 24px;
+    margin-right: 0.5rem;
+  }
+
+  .github-link {
+    align-items: center;
+    display: flex;
+  }
+
+  .github-link::before {
+    background-image: url("/img/github-mark-white.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    content: '';
+    display: inline-flex;
+    height: 24px;
+    width: 24px;
+    margin-right: 0.5rem;
+    color: var(--ifm-navbar-link-color);
+  }
+}
 
 .dropdown__menu {
   background-color: #030405;