add: demo links and navbar images

nightly-labs · Mar 4, 2024 · feb155a · feb155a
1 parent e4566af
commit feb155a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/sdk/apps/docs/docs/demo.md b/sdk/apps/docs/docs/demo.md
diff --git a/sdk/apps/docs/docusaurus.config.js b/sdk/apps/docs/docusaurus.config.js
@@ -65,18 +65,21 @@ const config = {
           },
           {
             to: 'docs/solana/solana/start',
+            className: 'solana_navlink navlink',
             activeBasePath: 'docs/solana/solana/start',
             label: 'Solana',
             position: 'left'
           },
           {
             to: 'docs/sui/sui/start',
+            className: 'sui_navlink navlink',
             activeBasePath: 'docs/sui/sui/start',
             label: 'Sui',
             position: 'left'
           },
           {
             to: 'docs/substrate/substrate/start',
+            className: 'substrate_navlink navlink',
             activeBasePath: 'docs/substrate/substrate/start',
             label: 'Substrate',
             position: 'left'
@@ -94,9 +97,14 @@ const config = {
             position: 'left'
           },
           {
-            href: 'https://example.connect.nightly.app/',
+            type: 'dropdown',
             label: 'Demo',
-            position: 'right'
+            position: 'right',
+            items: [
+              { href: 'https://solana-web3-template.nightly.app', label: 'Solana template' },
+              { href: 'https://sui-web3-template.nightly.app', label: 'Sui template' },
+              { href: 'https://aleph-zero-web3-template.nightly.app', label: 'Substrate template' }
+            ]
           },
           {
             href: 'https://twitter.com/NightlyConnect',
@@ -128,7 +136,7 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'home',
+                label: 'Home',
                 to: 'docs/'
               }
             ]
@@ -156,6 +164,7 @@ const config = {
             ]
           }
         ],
+
         copyright: `Copyright © ${new Date().getFullYear()} Nightly | Built with Docusaurus.`
       },
       prism: {

diff --git a/sdk/apps/docs/src/css/custom.css b/sdk/apps/docs/src/css/custom.css
@@ -160,3 +160,42 @@ img[src*='#connectImage'] {
   border: solid var(--ifm-color-primary) 2px;
   background: linear-gradient(45deg, rgba(96, 103, 249, 0.1), transparent);
 }
+
+.navbar__items a {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.navbar__items > .navlink {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.navbar__items > .navlink::before {
+  content: '';
+  background-size: cover;
+  height: 20px;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+}
+
+.navbar__items > .solana_navlink::before {
+  background-image: url('https://upload.wikimedia.org/wikipedia/en/b/b9/Solana_logo.png');
+}
+
+.navbar__items > .sui_navlink::before {
+  background-image: url('https://registry.nightly.app/networks/sui.png');
+}
+
+.navbar__items > .substrate_navlink::before {
+  background-image: url('https://registry.nightly.app/networks/polkadot.png');
+}
+
+@media screen and (max-width: 996px) {
+  .navlink {
+    display: none !important;
+  }
+}