Add 'More from SUSE' dropdown to header

docusaurus.config.js

@@ -57,6 +57,51 @@ module.exports = {
           className: 'header-slack-link',
           'aria-label': 'Slack Channel',
         },
+        {
+          type: 'dropdown',
+          label: 'More from SUSE',
+          position: 'right',
+          items: [
+            {
+              href: 'https://www.rancher.com',
+              label: 'Rancher',
+              className: 'navbar__icon navbar__rancher',
+            },
+            {
+              type: 'html',
+              value: '<hr style="margin: 0.3rem 0;">',
+            },
+            {
+              href: 'https://epinio.io/',
+              label: 'Epinio',
+              className: 'navbar__icon navbar__epinio',
+            },
+            {
+              href: 'https://harvesterhci.io',
+              label: 'Harvester',
+              className: 'navbar__icon navbar__harvester',
+            },
+            {
+              href: 'https://opni.io',
+              label: 'Opni',
+              className: 'navbar__icon navbar__opni',
+            },
+            {
+              href: 'https://rancherdesktop.io',
+              label: 'Rancher Desktop',
+              className: 'navbar__icon navbar__rd',
+            },
+            {
+              type: 'html',
+              value: '<hr style="margin: 0.3rem 0;">',
+            },
+            {
+              href: 'https://opensource.suse.com',
+              label: 'More Projects...',
+              className: 'navbar__icon navbar__suse',
+            },
+          ]
+        }
       ],
     },
     footer: {

src/css/custom.css

@@ -6,6 +6,9 @@
  */
 /* Import fonts. */
 
+/* CSS for SUSE projects icons */
+@import "icon_dropdown.css";
+
 /* poppins */
 @font-face {
   font-family: 'Work Sans';

src/css/icon_dropdown.css

@@ -0,0 +1,65 @@
+.navbar__icon {
+    font-family: poppins,sans-serif;
+    font-size: 16px;
+  }
+
+  .navbar__icon:before {
+    content: "";
+    display: inline-flex;
+    height: 20px;
+    width: 20px;
+    margin-right: 4px;
+    background-color: var(--ifm-navbar-link-color);
+  }
+
+  .navbar__rancher:before {
+    mask: url(/static/img/header/icon-rancher-mask.png) no-repeat 100% 100%;
+    mask-size: contain;
+    width: 35px;
+    background-color: #2e68e9;
+  }
+
+  .navbar__epinio:before {
+    mask: url(/static/img/header/icon-epinio-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 22px;
+    padding-bottom: 7px;
+    background-color: #004d93;
+  }
+
+  .navbar__harvester:before {
+    mask: url(/static/img/header/icon-harvester-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 22px;
+    padding-bottom: 7px;
+    background-color: #00a580;
+  }
+
+  .navbar__opni:before {
+    mask: url(/static/img/header/icon-opni-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 22px;
+    padding-bottom: 7px;
+    background-color: #A453B9;
+  }
+
+  .navbar__rd:before {
+    mask: url(/static/img/header/icon-rd-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 22px;
+    padding-bottom: 7px;
+    background-color: #0081be;
+  }
+
+  .navbar__suse:before {
+    mask: url(/static/img/header/icon-suse-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-bottom: 7px;
+    background-color: #30ba78;
+  }