Updated header/add "More from SUSE" dropdown

docusaurus.config.js

@@ -46,30 +46,55 @@ const config = {
         src: "img/logo_horizontal.svg",
       },
       items: [
+          {
+            href: "https://docs.harvesterhci.io/",
+            position: "right",
+            label: "Docs",
+            className: "navbar__docs",
+          },
+          {
+            href: "https://github.com/harvester/harvester",
+            label: "GitHub",
+            position: "right",
+            className: "navbar__github btn btn-secondary icon-github",
+          },
         {
-          href: "https://docs.harvesterhci.io/",
-          position: "right",
-          label: "Docs",
-          className: "navbar__docs",
-        },
-        {
-          href: "https://www.suse.com/c/?s=harvester",
-          position: "right",
-          label: "Blog",
-          className: "navbar__blog",
-        },
-        {
-          to: "kb",
-          position: "right",
-          label: "Knowledge Base",
-          className: "navbar__kb",
-        },
-        {
-          href: "https://github.com/harvester/harvester",
-          label: "GitHub",
-          position: "right",
-          className: "navbar__github btn btn-secondary icon-github",
-        },
+          type: 'dropdown',
+          label: 'More from SUSE',
+          position: 'right',
+          items: [
+            {
+              href: 'https://www.rancher.com',
+              label: 'Rancher',
+              className: 'navbar__icon navbar__rancher',
+            },
+            {
+              href: 'https://elemental.docs.rancher.com/',
+              label: 'Elemental',
+              className: 'navbar__icon navbar__elemental',
+            },
+            {
+              href: 'https://epinio.io/',
+              label: 'Epinio',
+              className: 'navbar__icon navbar__epinio',
+            },
+            {
+              href: 'https://fleet.rancher.io/',
+              label: 'Fleet',
+              className: 'navbar__icon navbar__fleet',
+            },
+            {
+              href: 'https://opni.io/',
+              label: 'Opni',
+              className: 'navbar__icon navbar__opni',
+            },
+            {
+              href: 'https://opensource.suse.com/',
+              label: 'More Projects...',
+              className: 'navbar__icon navbar__suse',
+            },
+          ],
+      },
       ],
     },
     colorMode: {

src/css/custom.css

@@ -5,6 +5,8 @@
  * work well for content-centric websites.
  */
 
+@import "icon_dropdown.css";
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #25c2a0;

src/css/icon_dropdown.css

@@ -0,0 +1,73 @@
+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/icon-rancher-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-top: 21px;
+    padding-bottom: 10px;
+    background-color: #2e68e9;
+  }
+
+  .navbar__elemental:before {
+    mask: url(/static/img/icon-elemental-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-top: 21px;
+    padding-bottom: 7px;
+    background-color: #7100D4;
+  }
+
+  .navbar__epinio:before {
+    mask: url(/static/img/icon-epinio-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-top: 21px;
+    padding-bottom: 7px;
+    background-color: #004d93;
+  }
+
+  .navbar__fleet:before {
+    mask: url(/static/img/icon-fleet-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-top: 21px;
+    padding-bottom: 7px;
+    background-color: #00b056;
+  }
+
+  .navbar__opni:before {
+    mask: url(/static/img/icon-opni-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-top: 21px;
+    padding-bottom: 7px;
+    background-color: #a453b9;
+  }
+
+  .navbar__suse:before {
+    mask: url(/static/img/icon-suse-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-top: 14px;
+    padding-bottom: 7px;
+    background-color: #30ba78;
+  }