Skip to content

Commit 9d2651c

Browse files
bgravenorstbgravenorst
authored
Update dropdown to add descriptions. (#2039)
* Update dropdown to add descriptions. Signed-off-by: bgravenorst <[email protected]> * Stylesheet updates to enforce not underlining text. Signed-off-by: bgravenorst <[email protected]> * Clean up stylesheet to remove duplication. Signed-off-by: bgravenorst <[email protected]> * Fix styling. Signed-off-by: bgravenorst <[email protected]> * Update padding. Signed-off-by: bgravenorst <[email protected]> * Update SVG location. Signed-off-by: bgravenorst <[email protected]> * Typo. Signed-off-by: bgravenorst <[email protected]> * Update mobile display. Signed-off-by: bgravenorst <[email protected]> --------- Signed-off-by: bgravenorst <[email protected]>
1 parent 61c40ef commit 9d2651c

File tree

3 files changed

+154
-7
lines changed

3 files changed

+154
-7
lines changed

‎docusaurus.config.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @ts-check
22
// Note: type annotations allow type checking and IDEs autocompletion
33

4+
import fs from "fs";
45
require('dotenv').config()
56
const { themes } = require('prism-react-renderer')
67
const { REF_ALLOW_LOGIN_PATH } = require('./src/lib/constants')
@@ -13,7 +14,7 @@ const {
1314
const codeTheme = themes.dracula
1415
const remarkCodesandbox = require('remark-codesandbox')
1516
const isProd = process.env.NODE_ENV === 'production'
16-
17+
const helpDropdown = fs.readFileSync("./src/components/NavDropdown/DeveloperTools.html", "utf-8");
1718
/** @type {import('@docusaurus/types').Config} */
1819
const config = {
1920
title: 'MetaMask developer documentation',
@@ -212,14 +213,11 @@ const config = {
212213
{
213214
type: 'dropdown',
214215
label: 'Developer tools',
216+
to: 'developer-tools/dashboard',
215217
items: [
216218
{
217-
label: 'Developer dashboard',
218-
to: 'developer-tools/dashboard',
219-
},
220-
{
221-
label: 'Faucet',
222-
to: 'developer-tools/faucet',
219+
type: "html",
220+
value: helpDropdown,
223221
},
224222
],
225223
},

‎src/components/NavDropdown/DeveloperTools.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<span class="resources-dropdown-menu">
2+
<ul>
3+
<li>
4+
<a href="/developer-tools/dashboard/">
5+
<span>
6+
<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
7+
<rect x="0" y="0" width="8" height="6" rx="1" fill="currentColor"/>
8+
<rect x="10" y="0" width="8" height="10" rx="1" fill="currentColor"/>
9+
<rect x="0" y="8" width="8" height="10" rx="1" fill="currentColor"/>
10+
<rect x="10" y="12" width="8" height="6" rx="1" fill="currentColor"/>
11+
</svg>
12+
</span>
13+
<div>
14+
<h2>Developer dashboard</h2>
15+
<p>View documentation to manage Infura API keys, monitor usage, and access account details.</p>
16+
</div>
17+
</a>
18+
</li>
19+
<li>
20+
<a href="/developer-tools/faucet/">
21+
<span>
22+
<svg class="svg-inline--fa fa-droplet fa-w-12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 384 512" role="img">
23+
<path fill="currentColor" d="M192 480c-88.4 0-160-71.6-160-160c0-16.2 6.1-39.2 18.3-67.5c11.9-27.6 28.5-57.5 46.6-86.8c35.9-58 76.4-110.9 94.5-133.7l1.3 0c18.1 22.9 58.6 75.7 94.5 133.7c18.1 29.2 34.6 59.1 46.6 86.8C345.9 280.8 352 303.8 352 320c0 88.4-71.6 160-160 160zM0 320C0 426 86 512 192 512s192-86 192-192c0-91.2-130.2-262.3-166.6-308.3C211.4 4.2 202.5 0 192.9 0l-1.8 0c-9.6 0-18.5 4.2-24.5 11.7C130.2 57.7 0 228.8 0 320zm112 0c0-8.8-7.2-16-16-16s-16 7.2-16 16c0 61.9 50.1 112 112 112c8.8 0 16-7.2 16-16s-7.2-16-16-16c-44.2 0-80-35.8-80-80z"/>
24+
</svg>
25+
</span>
26+
<div>
27+
<h2>Faucet</h2>
28+
<p>Use the faucet to obtain Ethereum Sepolia or Linea Sepolia testnet tokens.</p>
29+
</div>
30+
</a>
31+
</li>
32+
</ul>
33+
</span>

‎src/scss/custom.scss

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -653,3 +653,119 @@ ol {
653653
padding: 0 var(--ifm-pre-padding);
654654
border-left: 3px solid #1aff0080;
655655
}
656+
657+
.resources-dropdown-menu {
658+
display: flex;
659+
flex-direction: row;
660+
align-items: center;
661+
justify-content: space-between;
662+
padding: 16px;
663+
gap: var(--ifm-spacing-horizontal);
664+
border-radius: 8px;
665+
666+
ul {
667+
display: flex;
668+
flex-direction: column;
669+
gap: 4px;
670+
padding: 0;
671+
list-style: none;
672+
color: var(--ifm-navbar-link-color);
673+
}
674+
675+
a {
676+
position: relative; // Needed for ::before to be positioned correctly
677+
display: flex;
678+
flex-direction: row;
679+
justify-content: flex-start;
680+
align-items: flex-start;
681+
width: 240px;
682+
padding-left: 0;
683+
margin: 0;
684+
color: var(--ifm-navbar-link-color);
685+
border-radius: 8px;
686+
text-decoration: none !important;
687+
gap: 10px;
688+
689+
&::before {
690+
content: "";
691+
position: absolute;
692+
left: -6px;
693+
top: 0;
694+
bottom: 0;
695+
width: 3px;
696+
background-color: var(--ifm-color-primary);
697+
opacity: 0;
698+
transition: opacity 0.2s ease;
699+
border-radius: 1px;
700+
}
701+
702+
&:hover::before {
703+
opacity: 1;
704+
}
705+
706+
div {
707+
display: flex;
708+
flex-direction: column;
709+
justify-content: center;
710+
align-items: flex-start;
711+
text-align: left;
712+
padding: 0;
713+
}
714+
715+
span {
716+
display: flex;
717+
align-items: flex-start;
718+
justify-content: center;
719+
padding: 5px;
720+
background-color: var(--w3a-color-icon-background);
721+
border-radius: 8px;
722+
723+
svg {
724+
display: inline-block;
725+
vertical-align: top;
726+
width: 24px;
727+
height: 24px;
728+
color: var(--w3a-color-icon-gray);
729+
transition: color 0.2s ease;
730+
}
731+
}
732+
733+
&:hover span {
734+
background-color: var(--w3a-color-icon-active-background);
735+
736+
svg {
737+
color: var(--ifm-color-primary);
738+
}
739+
}
740+
741+
h2 {
742+
@extend .dropdown__link;
743+
text-decoration: none !important;
744+
margin: 0 0 4px 0;
745+
color: inherit;
746+
}
747+
748+
p {
749+
font-size: 14px;
750+
line-height: 18px;
751+
font-weight: 400 !important;
752+
color: var(--w3a-color-icon-gray);
753+
text-decoration: none !important;
754+
margin: 0;
755+
}
756+
}
757+
}
758+
759+
.resources-dropdown-menu a:hover h2 {
760+
color: inherit !important;
761+
}
762+
763+
@include bp-max('tablet') {
764+
.resources-dropdown-menu ul {
765+
gap: 16px; // More spacing between items on mobile
766+
}
767+
768+
.resources-dropdown-menu a {
769+
width: 100%; // Makes each box take full width of dropdown
770+
}
771+
}

0 commit comments

Comments
 (0)