Improve docs sidebar style (#1185)

* Improve docs sidebar style * tweak color
MetaMask · Mar 6, 2024 · 971292a · 971292a
1 parent a7da4f5
commit 971292a
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 4 deletions.
diff --git a/snaps/index.mdx b/snaps/index.mdx
@@ -7,8 +7,8 @@ import YoutubeEmbed from '@site/src/components/YoutubeEmbed'
 
 # Extend the functionality of MetaMask using Snaps
 
-MetaMask Snaps is an open source system that allows anyone to safely extend the functionality of MetaMask,
-creating new web3 end user experiences.
+Snaps is an open source system that allows anyone to safely extend the functionality of
+[MetaMask](https://metamask.io/), creating new web3 end user experiences.
 Get started building your own Snaps by [installing MetaMask Flask](get-started/install-flask.md).
 
 ## What can you do with a Snap?

diff --git a/snaps/reference/keyring-api/account-management/events.md b/snaps/reference/keyring-api/account-management/events.md
@@ -2,6 +2,8 @@
 sidebar_position: 2
 toc_max_heading_level: 2
 sidebar_label: Events
+tags:
+  - Keyring API
 ---
 
 # Account Management API events

diff --git a/snaps/reference/keyring-api/account-management/index.md b/snaps/reference/keyring-api/account-management/index.md
@@ -1,5 +1,7 @@
 ---
 sidebar_position: 1
+tags:
+  - Keyring API
 ---
 
 import Tabs from '@theme/Tabs';

diff --git a/snaps/reference/keyring-api/account-management/objects.md b/snaps/reference/keyring-api/account-management/objects.md
@@ -2,6 +2,8 @@
 sidebar_position: 1
 toc_max_heading_level: 2
 sidebar_label: Objects
+tags:
+  - Keyring API
 ---
 
 # Account Management API objects

diff --git a/snaps/reference/keyring-api/chain-methods.md b/snaps/reference/keyring-api/chain-methods.md
@@ -1,5 +1,7 @@
 ---
 sidebar_position: 2
+tags:
+  - Keyring API
 ---
 
 import Tabs from '@theme/Tabs';

diff --git a/src/components/WalletSection.tsx b/src/components/WalletSection.tsx
@@ -30,7 +30,7 @@ export default function WalletSection(): JSX.Element {
     <section className="container margin-top--md">
       <h1>Integrate your dapp with the MetaMask wallet</h1>
       <p>
-        Your dapp can use MetaMask SDK and the MetaMask APIs to request users&apos; Ethereum accounts, read data from
+        Your dapp can use the Wallet API and MetaMask SDK to request users&apos; Ethereum accounts, read data from
         connected blockchains, suggest that the user sign messages and transactions,
         and perform other functions on MetaMask from multiple dapp platforms.
       </p>

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -14,6 +14,7 @@
   --ifm-color-primary-light: var(--brand-colors-blue-blue400);
   --ifm-color-primary-lighter: var(--brand-colors-blue-blue300);
   --ifm-color-primary-lightest: var(--brand-colors-blue-blue200);
+  --ifm-menu-color: var(--ifm-heading-color);
   --ifm-code-font-size: var(--font-size-3);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --mm-flask-background-color: hsl(280, 45%, 85%);
@@ -29,6 +30,7 @@
   --ifm-color-primary-darkest: var(--brand-colors-blue-blue700);
   --ifm-color-primary-light: var(--brand-colors-blue-blue300);
   --ifm-color-primary-lightest: var(--brand-colors-blue-blue200);
+  --ifm-menu-color: #fff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --mm-flask-background-color: hsl(280, 45%, 30%);
   --mm-flask-color: hsl(280, 45%, 85%);
@@ -180,4 +182,27 @@ svg {
 
 .table-of-contents code {
   font-size: inherit;
+}
+
+.menu__link {
+  font-weight: 600;
+  font-size: 1.1em;
+}
+
+.menu__list .menu__list {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.menu__list .menu__list .menu__list-item {
+  margin: 0;
+}
+
+.menu__list .menu__list .menu__list-item .menu__link {
+  font-size: 0.9em;
+  font-weight: normal;
+}
+
+.menu__list .menu__list .menu__caret {
+  opacity: 0.7;
 }
diff --git a/wallet-sidebar.js b/wallet-sidebar.js
@@ -8,6 +8,7 @@ const sidebar = {
       type: "category",
       label: "Quickstart",
       link: { type: "generated-index", slug: "/quickstart" },
+      collapsed: false,
       items: [{ type: "autogenerated", dirName: "quickstart" }],
     },
     {

diff --git a/wallet/index.mdx b/wallet/index.mdx
@@ -6,7 +6,7 @@ import CardList from '@site/src/components/CardList'
 
 # Integrate your dapp with the MetaMask wallet
 
-Integrate your dapp with the MetaMask wallet using the [Wallet API](reference/json-rpc-api).
+Integrate your dapp with [MetaMask](https://metamask.io/) using the [Wallet API](reference/json-rpc-api).
 You can interact with your users' Ethereum accounts, performing tasks such as the following:
 
 <CardList