diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 36ce3c0d866..ae568c8f9f7 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -214,29 +214,32 @@ module.exports = { style: 'dark', items: [ { - label: 'Guides', - type: 'doc', - docId: 'getting-started', - position: 'right', - }, - { - label: 'Components', - type: 'doc', - docId: 'components-and-apis', + label: 'Development', + type: 'dropdown', position: 'right', - }, - { - label: 'API', - type: 'doc', - docId: 'accessibilityinfo', - position: 'right', - }, - { - label: 'Architecture', - type: 'doc', - docId: 'architecture-overview', - position: 'right', - docsPluginId: 'architecture', + items: [ + { + label: 'Guides', + type: 'doc', + docId: 'getting-started', + }, + { + label: 'Components', + type: 'doc', + docId: 'components-and-apis', + }, + { + label: 'APIs', + type: 'doc', + docId: 'accessibilityinfo', + }, + { + label: 'Architecture', + type: 'doc', + docId: 'architecture-overview', + docsPluginId: 'architecture', + }, + ], }, { type: 'doc', @@ -245,6 +248,11 @@ module.exports = { position: 'right', docsPluginId: 'contributing', }, + { + to: '/showcase', + label: 'Showcase', + position: 'right', + }, { to: '/blog', label: 'Blog', @@ -274,23 +282,23 @@ module.exports = { style: 'dark', links: [ { - title: 'Docs', + title: 'Development', items: [ { - label: 'Getting Started', + label: 'Guides', to: 'docs/getting-started', }, { - label: 'Tutorial', - to: 'docs/tutorial', + label: 'Components', + to: 'docs/components-and-apis', }, { - label: 'Components and APIs', - to: 'docs/components-and-apis', + label: 'APIs', + to: 'docs/accessibilityinfo', }, { - label: 'More Resources', - to: 'docs/more-resources', + label: 'Architecture', + to: 'architecture/overview', }, ], }, @@ -298,20 +306,20 @@ module.exports = { title: 'Community', items: [ { - label: 'The React Native Community', - to: 'help', + label: 'Showcase', + to: 'showcase', }, { - label: "Who's using React Native?", - to: 'showcase', + label: 'Contributing', + to: 'contributing/overview', }, { - label: 'Ask Questions on Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/react-native', + label: 'The React Native Community', + to: 'help', }, { - label: 'DEV Community', - href: 'https://dev.to/t/reactnative', + label: 'Ask Questions on Stack Overflow', + href: 'https://stackoverflow.com/questions/tagged/react-native', }, ], }, @@ -336,7 +344,7 @@ module.exports = { title: 'More', items: [ { - label: 'React', + label: 'ReactJS', href: 'https://reactjs.org/', }, { diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 432346de123..33451794f50 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -596,7 +596,7 @@ a[class*="tagRegular"] { user-select: none; } - &.dropdown { + &.dropdown:not(.dropdown--right) { a { font-weight: 400; font-size: 14px; @@ -607,6 +607,18 @@ a[class*="tagRegular"] { left: 0; } } + + &.dropdown--right { + .dropdown__menu { + min-width: 168px; + } + } + } + + .dropdown > .navbar__link:after { + margin-left: 8px; + top: 1px; + opacity: 0.75; } .navbar__logo { @@ -887,7 +899,6 @@ aside[class^="theme-doc-sidebar-container"] { .menu__link--sublist { font-size: 15px; - font-weight: 600; padding: 4px 12px !important; color: var(--light); @@ -897,6 +908,10 @@ aside[class^="theme-doc-sidebar-container"] { } } + .menu__link--sublist-caret { + font-size: 17px; + } + .menu__list { .menu__link { line-height: 20px;