Navbar menu More from SUSE created

docusaurus.config.js

@@ -91,6 +91,51 @@ const config = {
             className: 'header-slack-link',
             'aria-label': 'Slack Channel',
           },
+          {
+            type: 'dropdown',
+            label: 'More From SUSE',
+            position: 'right',
+            items: [
+              {
+                label: 'Rancher',
+                to: 'https://www.rancher.com',
+                className: 'navbar__icon navbar__rancher',
+              },
+              {
+                type: 'html',
+                value: '<hr style="margin: 0.3rem 0;">',
+              },
+              {
+                label: 'Epinio',
+                to: "http://epinio.io",
+                className: 'navbar__icon navbar__epinio',
+              },
+              {
+                label: 'Fleet',
+                to: "http://fleet.rancher.io",
+                className: 'navbar__icon navbar__fleet',
+              },
+              {
+                label: 'Harvester',
+                to: "http://harvesterhci.io",
+                className: 'navbar__icon navbar__harvester',
+              },
+              {
+                label: 'Rancher Desktop',
+                to: "https://rancherdesktop.io",
+                className: 'navbar__icon navbar__rd',
+              },
+              {
+                type: 'html',
+                value: '<hr style="margin: 0.3rem 0;">',
+              },
+              {
+                label: 'More Projects...',
+                to: "https://opensource.suse.com",
+                className: 'navbar__icon navbar__suse',
+              },
+            ],
+          },
         ],
       },
       footer: {

src/css/custom.css

@@ -4,6 +4,9 @@
  * work well for content-centric websites.
  */
 
+/* CSS for SUSE projects icons */
+@import "icon_dropdown.css";
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #2e8555;

src/css/icon_dropdown.css

@@ -0,0 +1,66 @@
+.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;
+    padding-bottom: 10px;
+    background-color: #2e68e9;
+  }
+
+  .navbar__rd:before {
+    mask: url(/static/img/icon-rd-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 22px;
+    padding-bottom: 7px;
+    background-color: #0081be;
+  }
+
+  .navbar__epinio:before {
+    mask: url(/static/img/icon-epinio-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 22px;
+    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: 22px;
+    padding-bottom: 7px;
+    background-color: #00b056;
+  }
+
+  .navbar__harvester:before {
+    mask: url(/static/img/icon-harvester-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 22px;
+    padding-bottom: 7px;
+    background-color: #00a580;
+  }
+
+  .navbar__suse:before {
+    mask: url(/static/img/icon-suse-mask.png) no-repeat 100% 100%;
+    mask-size: cover;
+    width: 35px;
+    height: 13px;
+    padding-bottom: 7px;
+    background-color: #30ba78;
+  }