@docusaurus/theme-classic 2.0.0-beta.138b4c997 → 2.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (349) hide show
  1. package/README.md +1 -1
  2. package/lib/admonitions.css +35 -0
  3. package/lib/deps.d.ts +13 -0
  4. package/lib/index.js +16 -15
  5. package/lib/prism-include-languages.js +9 -5
  6. package/{lib-next/types.d.ts → lib/theme-classic.d.ts} +374 -150
  7. package/lib/translations.js +16 -7
  8. package/lib/types.d.ts +0 -587
  9. package/lib/validateThemeConfig.js +232 -246
  10. package/lib-next/theme/Admonition/index.js +101 -0
  11. package/lib-next/theme/AnnouncementBar/index.js +7 -12
  12. package/lib-next/theme/AnnouncementBar/styles.module.css +23 -32
  13. package/lib-next/theme/BackToTopButton/index.js +131 -0
  14. package/lib-next/theme/BackToTopButton/styles.module.css +42 -0
  15. package/lib-next/theme/BlogArchivePage/index.js +80 -0
  16. package/lib-next/theme/BlogLayout/index.js +40 -0
  17. package/lib-next/theme/BlogListPage/index.js +17 -25
  18. package/lib-next/theme/BlogPostAuthor/index.js +46 -0
  19. package/{lib/theme/MDXPage → lib-next/theme/BlogPostAuthor}/styles.module.css +4 -2
  20. package/lib-next/theme/BlogPostAuthors/index.js +34 -0
  21. package/{lib/theme/IconExternalLink → lib-next/theme/BlogPostAuthors}/styles.module.css +3 -4
  22. package/lib-next/theme/BlogPostItem/index.js +79 -86
  23. package/lib-next/theme/BlogPostPage/index.js +70 -35
  24. package/lib-next/theme/BlogSidebar/index.js +11 -13
  25. package/lib-next/theme/BlogSidebar/styles.module.css +2 -2
  26. package/lib-next/theme/BlogTagsListPage/index.js +14 -55
  27. package/lib-next/theme/BlogTagsPostsPage/index.js +29 -39
  28. package/lib-next/theme/CodeBlock/index.js +23 -149
  29. package/lib-next/theme/CodeBlock/styles.module.css +12 -9
  30. package/lib-next/theme/Details/index.js +20 -0
  31. package/lib-next/theme/Details/styles.module.css +13 -0
  32. package/lib-next/theme/DocCard/index.js +80 -0
  33. package/lib-next/theme/DocCard/styles.module.css +43 -0
  34. package/lib-next/theme/DocCardList/index.js +19 -0
  35. package/lib-next/theme/DocCategoryGeneratedIndexPage/index.js +49 -0
  36. package/lib-next/theme/DocCategoryGeneratedIndexPage/styles.module.css +18 -0
  37. package/lib-next/theme/DocItem/index.js +40 -51
  38. package/lib-next/theme/DocItem/styles.module.css +5 -9
  39. package/lib-next/theme/DocItemFooter/index.js +79 -0
  40. package/{lib/theme/DocItem → lib-next/theme/DocItemFooter}/styles.module.css +1 -9
  41. package/lib-next/theme/DocPage/index.js +46 -49
  42. package/lib-next/theme/DocPage/styles.module.css +5 -6
  43. package/lib-next/theme/DocPaginator/index.js +5 -33
  44. package/lib-next/theme/DocPaginatorNavLink/index.js +36 -0
  45. package/lib-next/theme/DocSidebar/index.js +65 -285
  46. package/lib-next/theme/DocSidebar/styles.module.css +0 -18
  47. package/lib-next/theme/DocSidebarItem/index.js +217 -0
  48. package/{lib/theme/ThemedImage → lib-next/theme/DocSidebarItem}/styles.module.css +10 -9
  49. package/lib-next/theme/DocTagDocListPage/index.js +89 -0
  50. package/lib-next/theme/DocTagsListPage/index.js +38 -0
  51. package/lib-next/theme/DocVersionBadge/index.js +27 -0
  52. package/lib-next/theme/DocVersionBanner/index.js +28 -14
  53. package/lib-next/theme/EditThisPage/index.js +6 -1
  54. package/lib-next/theme/ErrorPageContent.js +35 -0
  55. package/lib-next/theme/Footer/index.js +100 -40
  56. package/lib-next/theme/Heading/index.js +24 -29
  57. package/lib-next/theme/Heading/styles.css +5 -6
  58. package/lib-next/theme/Heading/styles.module.css +9 -5
  59. package/lib-next/theme/IconArrow/index.js +2 -2
  60. package/lib-next/theme/IconClose/index.js +23 -0
  61. package/lib-next/theme/IconEdit/index.js +2 -2
  62. package/lib-next/theme/IconExternalLink/index.js +2 -2
  63. package/lib-next/theme/IconLanguage/index.js +2 -2
  64. package/lib-next/theme/IconMenu/index.js +2 -2
  65. package/lib-next/theme/LastUpdated/index.js +3 -2
  66. package/lib-next/theme/Layout/index.js +3 -1
  67. package/lib-next/theme/LayoutHead/index.js +18 -23
  68. package/lib-next/theme/LayoutProviders/index.js +9 -3
  69. package/lib-next/theme/Logo/index.js +25 -21
  70. package/lib-next/theme/MDXComponents/index.js +34 -7
  71. package/{lib/theme/hooks → lib-next/theme/MDXComponents}/styles.css +3 -2
  72. package/lib-next/theme/MDXPage/index.js +10 -2
  73. package/lib-next/theme/Navbar/index.js +193 -56
  74. package/lib-next/theme/Navbar/styles.module.css +10 -3
  75. package/lib-next/theme/NavbarItem/DefaultNavbarItem.js +45 -147
  76. package/lib-next/theme/NavbarItem/DocNavbarItem.js +7 -7
  77. package/lib-next/theme/NavbarItem/DocsVersionDropdownNavbarItem.js +31 -19
  78. package/lib-next/theme/NavbarItem/DropdownNavbarItem.js +158 -0
  79. package/lib-next/theme/NavbarItem/{LocaleDropdownNavbarItem.js → LocaleDropdownNavbarItem/index.js} +4 -12
  80. package/lib-next/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +11 -0
  81. package/lib-next/theme/NavbarItem/index.js +25 -12
  82. package/lib-next/theme/{SearchMetadatas → SearchMetadata}/index.js +1 -1
  83. package/lib-next/theme/Seo/index.js +11 -7
  84. package/lib-next/theme/SkipToContent/index.js +5 -2
  85. package/lib-next/theme/TOC/index.js +12 -36
  86. package/lib-next/theme/TOC/styles.module.css +1 -1
  87. package/lib-next/theme/TOCCollapsible/index.js +54 -0
  88. package/lib-next/theme/TOCCollapsible/styles.module.css +50 -0
  89. package/lib-next/theme/TOCInline/index.js +10 -28
  90. package/lib-next/theme/TOCItems/index.js +85 -0
  91. package/lib-next/theme/Tabs/__tests__/index.test.js +142 -0
  92. package/lib-next/theme/Tabs/index.js +103 -48
  93. package/lib-next/theme/Tabs/styles.module.css +0 -13
  94. package/lib-next/theme/Tag/index.js +27 -0
  95. package/lib-next/theme/Tag/styles.module.css +70 -0
  96. package/lib-next/theme/TagsListByLetter/index.js +42 -0
  97. package/lib-next/theme/TagsListByLetter/styles.module.css +11 -0
  98. package/lib-next/theme/TagsListInline/index.js +31 -0
  99. package/lib-next/theme/TagsListInline/styles.module.css +15 -0
  100. package/lib-next/theme/ThemeProvider/index.js +10 -7
  101. package/lib-next/theme/ThemedImage/index.js +5 -5
  102. package/lib-next/theme/Toggle/index.js +34 -37
  103. package/lib-next/theme/Toggle/styles.module.css +91 -3
  104. package/lib-next/theme/UserPreferencesProvider/index.js +9 -6
  105. package/lib-next/theme/hooks/useHideableNavbar.js +31 -44
  106. package/lib-next/theme/hooks/useTheme.js +4 -5
  107. package/lib-next/theme/hooks/useWindowSize.js +34 -20
  108. package/lib-next/theme/prism-include-languages.js +2 -1
  109. package/package.json +27 -25
  110. package/src/admonitions.css +35 -0
  111. package/src/deps.d.ts +13 -0
  112. package/src/index.ts +23 -20
  113. package/{lib-next/prism-include-languages.js → src/prism-include-languages.ts} +0 -0
  114. package/src/theme/Admonition/index.tsx +106 -0
  115. package/src/theme/AnnouncementBar/index.tsx +8 -12
  116. package/src/theme/AnnouncementBar/styles.module.css +23 -32
  117. package/src/theme/BackToTopButton/index.tsx +142 -0
  118. package/src/theme/BackToTopButton/styles.module.css +42 -0
  119. package/src/theme/BlogArchivePage/index.tsx +91 -0
  120. package/src/theme/BlogLayout/index.tsx +44 -0
  121. package/src/theme/BlogListPage/index.tsx +18 -25
  122. package/src/theme/BlogPostAuthor/index.tsx +49 -0
  123. package/{lib/theme/IconEdit → src/theme/BlogPostAuthor}/styles.module.css +4 -3
  124. package/src/theme/BlogPostAuthors/index.tsx +39 -0
  125. package/src/theme/BlogPostAuthors/styles.module.css +11 -0
  126. package/src/theme/BlogPostItem/index.tsx +70 -80
  127. package/src/theme/BlogPostPage/index.tsx +72 -35
  128. package/src/theme/BlogSidebar/index.tsx +11 -13
  129. package/src/theme/BlogSidebar/styles.module.css +2 -2
  130. package/src/theme/BlogTagsListPage/index.tsx +14 -57
  131. package/src/theme/BlogTagsPostsPage/index.tsx +29 -39
  132. package/src/theme/CodeBlock/index.tsx +27 -151
  133. package/src/theme/CodeBlock/styles.module.css +12 -9
  134. package/src/theme/Details/index.tsx +24 -0
  135. package/src/theme/Details/styles.module.css +13 -0
  136. package/src/theme/DocCard/index.tsx +100 -0
  137. package/src/theme/DocCard/styles.module.css +43 -0
  138. package/src/theme/DocCardList/index.tsx +27 -0
  139. package/src/theme/DocCategoryGeneratedIndexPage/index.tsx +53 -0
  140. package/src/theme/DocCategoryGeneratedIndexPage/styles.module.css +18 -0
  141. package/src/theme/DocItem/index.tsx +43 -51
  142. package/src/theme/DocItem/styles.module.css +5 -9
  143. package/src/theme/DocItemFooter/index.tsx +91 -0
  144. package/{lib/theme/BlogPostItem → src/theme/DocItemFooter}/styles.module.css +8 -8
  145. package/src/theme/DocPage/index.tsx +44 -42
  146. package/src/theme/DocPage/styles.module.css +5 -6
  147. package/src/theme/DocPaginator/index.tsx +5 -33
  148. package/src/theme/DocPaginatorNavLink/index.tsx +38 -0
  149. package/src/theme/DocSidebar/index.tsx +76 -297
  150. package/src/theme/DocSidebar/styles.module.css +0 -18
  151. package/src/theme/DocSidebarItem/index.tsx +242 -0
  152. package/{lib/theme/Footer → src/theme/DocSidebarItem}/styles.module.css +10 -6
  153. package/src/theme/DocTagDocListPage/index.tsx +89 -0
  154. package/src/theme/DocTagsListPage/index.tsx +41 -0
  155. package/src/theme/DocVersionBadge/index.tsx +30 -0
  156. package/src/theme/DocVersionBanner/index.tsx +48 -21
  157. package/src/theme/EditThisPage/index.tsx +6 -1
  158. package/src/theme/ErrorPageContent.tsx +41 -0
  159. package/src/theme/Footer/index.tsx +113 -43
  160. package/src/theme/Heading/index.tsx +24 -31
  161. package/src/theme/Heading/styles.css +5 -6
  162. package/src/theme/Heading/styles.module.css +9 -5
  163. package/src/theme/IconArrow/index.tsx +2 -2
  164. package/src/theme/IconClose/index.tsx +26 -0
  165. package/src/theme/IconEdit/index.tsx +2 -2
  166. package/src/theme/IconExternalLink/index.tsx +2 -5
  167. package/src/theme/IconLanguage/index.tsx +2 -6
  168. package/src/theme/IconMenu/index.tsx +3 -3
  169. package/src/theme/LastUpdated/index.tsx +3 -2
  170. package/src/theme/Layout/index.tsx +3 -1
  171. package/src/theme/LayoutHead/index.tsx +18 -17
  172. package/src/theme/LayoutProviders/index.tsx +9 -3
  173. package/src/theme/Logo/index.tsx +21 -17
  174. package/src/theme/MDXComponents/index.tsx +39 -5
  175. package/src/theme/MDXComponents/styles.css +11 -0
  176. package/src/theme/MDXPage/index.tsx +10 -2
  177. package/src/theme/Navbar/index.tsx +203 -61
  178. package/src/theme/Navbar/styles.module.css +10 -3
  179. package/src/theme/NavbarItem/DefaultNavbarItem.tsx +42 -154
  180. package/src/theme/NavbarItem/DocNavbarItem.tsx +12 -16
  181. package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx +33 -21
  182. package/src/theme/NavbarItem/DocsVersionNavbarItem.tsx +7 -3
  183. package/src/theme/NavbarItem/DropdownNavbarItem.tsx +180 -0
  184. package/src/theme/NavbarItem/{LocaleDropdownNavbarItem.tsx → LocaleDropdownNavbarItem/index.tsx} +8 -9
  185. package/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +11 -0
  186. package/src/theme/NavbarItem/index.tsx +41 -16
  187. package/src/theme/{SearchMetadatas → SearchMetadata}/index.tsx +2 -2
  188. package/src/theme/Seo/index.tsx +7 -4
  189. package/src/theme/SkipToContent/index.tsx +5 -2
  190. package/src/theme/TOC/index.tsx +12 -41
  191. package/src/theme/TOC/styles.module.css +1 -1
  192. package/src/theme/TOCCollapsible/index.tsx +58 -0
  193. package/src/theme/TOCCollapsible/styles.module.css +50 -0
  194. package/src/theme/TOCInline/index.tsx +13 -32
  195. package/src/theme/TOCItems/index.tsx +96 -0
  196. package/src/theme/Tabs/index.tsx +110 -54
  197. package/src/theme/Tabs/styles.module.css +0 -13
  198. package/src/theme/Tag/index.tsx +31 -0
  199. package/src/theme/Tag/styles.module.css +70 -0
  200. package/src/theme/TagsListByLetter/index.tsx +45 -0
  201. package/src/theme/TagsListByLetter/styles.module.css +11 -0
  202. package/src/theme/TagsListInline/index.tsx +35 -0
  203. package/src/theme/TagsListInline/styles.module.css +15 -0
  204. package/src/theme/ThemeProvider/index.tsx +6 -2
  205. package/src/theme/ThemedImage/index.tsx +5 -5
  206. package/src/theme/Toggle/index.tsx +36 -43
  207. package/src/theme/Toggle/styles.module.css +91 -3
  208. package/src/theme/UserPreferencesProvider/index.tsx +9 -6
  209. package/src/theme/hooks/useHideableNavbar.ts +32 -45
  210. package/src/theme/hooks/useTabGroupChoice.ts +2 -2
  211. package/src/theme/hooks/useTheme.ts +4 -5
  212. package/src/theme/hooks/useWindowSize.ts +38 -20
  213. package/src/theme/prism-include-languages.ts +3 -2
  214. package/src/theme-classic.d.ts +822 -0
  215. package/src/translations.ts +41 -23
  216. package/src/types.d.ts +0 -587
  217. package/src/{validateThemeConfig.js → validateThemeConfig.ts} +160 -98
  218. package/babel.config.js +0 -35
  219. package/codeTranslations/README.md +0 -20
  220. package/codeTranslations/ar.json +0 -57
  221. package/codeTranslations/base.json +0 -112
  222. package/codeTranslations/bn.json +0 -56
  223. package/codeTranslations/da.json +0 -57
  224. package/codeTranslations/de.json +0 -57
  225. package/codeTranslations/es.json +0 -57
  226. package/codeTranslations/fa.json +0 -57
  227. package/codeTranslations/fil.json +0 -57
  228. package/codeTranslations/fr.json +0 -57
  229. package/codeTranslations/he.json +0 -57
  230. package/codeTranslations/hi.json +0 -57
  231. package/codeTranslations/ja.json +0 -57
  232. package/codeTranslations/ko.json +0 -57
  233. package/codeTranslations/pl.json +0 -57
  234. package/codeTranslations/pt-BR.json +0 -57
  235. package/codeTranslations/pt-PT.json +0 -57
  236. package/codeTranslations/ru.json +0 -57
  237. package/codeTranslations/tr.json +0 -57
  238. package/codeTranslations/vi.json +0 -57
  239. package/codeTranslations/zh-Hans.json +0 -57
  240. package/codeTranslations/zh-Hant.json +0 -57
  241. package/lib/__tests__/__snapshots__/translations.test.ts.snap +0 -116
  242. package/lib/__tests__/translations.test.js +0 -112
  243. package/lib/__tests__/validateThemeConfig.test.js +0 -333
  244. package/lib/theme/AnnouncementBar/index.js +0 -72
  245. package/lib/theme/AnnouncementBar/styles.module.css +0 -72
  246. package/lib/theme/BlogListPage/index.js +0 -71
  247. package/lib/theme/BlogListPaginator/index.js +0 -63
  248. package/lib/theme/BlogPostItem/index.js +0 -161
  249. package/lib/theme/BlogPostPage/index.js +0 -69
  250. package/lib/theme/BlogPostPaginator/index.js +0 -64
  251. package/lib/theme/BlogSidebar/index.js +0 -51
  252. package/lib/theme/BlogSidebar/styles.module.css +0 -44
  253. package/lib/theme/BlogTagsListPage/index.js +0 -76
  254. package/lib/theme/BlogTagsPostsPage/index.js +0 -100
  255. package/lib/theme/CodeBlock/index.js +0 -253
  256. package/lib/theme/CodeBlock/styles.module.css +0 -68
  257. package/lib/theme/DocItem/index.js +0 -129
  258. package/lib/theme/DocPage/index.js +0 -173
  259. package/lib/theme/DocPage/styles.module.css +0 -86
  260. package/lib/theme/DocPaginator/index.js +0 -63
  261. package/lib/theme/DocSidebar/index.js +0 -306
  262. package/lib/theme/DocSidebar/styles.module.css +0 -124
  263. package/lib/theme/DocVersionBanner/index.js +0 -128
  264. package/lib/theme/EditThisPage/index.js +0 -31
  265. package/lib/theme/Footer/index.js +0 -108
  266. package/lib/theme/Heading/index.js +0 -76
  267. package/lib/theme/Heading/styles.css +0 -23
  268. package/lib/theme/Heading/styles.module.css +0 -15
  269. package/lib/theme/IconArrow/index.js +0 -28
  270. package/lib/theme/IconEdit/index.js +0 -34
  271. package/lib/theme/IconExternalLink/index.js +0 -30
  272. package/lib/theme/IconLanguage/index.js +0 -29
  273. package/lib/theme/IconMenu/index.js +0 -30
  274. package/lib/theme/LastUpdated/index.js +0 -61
  275. package/lib/theme/Layout/index.js +0 -64
  276. package/lib/theme/Layout/styles.css +0 -27
  277. package/lib/theme/LayoutHead/index.js +0 -144
  278. package/lib/theme/LayoutProviders/index.js +0 -36
  279. package/lib/theme/Logo/index.js +0 -60
  280. package/lib/theme/MDXComponents/index.js +0 -65
  281. package/lib/theme/MDXPage/index.js +0 -66
  282. package/lib/theme/Navbar/index.js +0 -147
  283. package/lib/theme/Navbar/styles.module.css +0 -20
  284. package/lib/theme/NavbarItem/DefaultNavbarItem.js +0 -209
  285. package/lib/theme/NavbarItem/DocNavbarItem.js +0 -63
  286. package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js +0 -76
  287. package/lib/theme/NavbarItem/DocsVersionNavbarItem.js +0 -43
  288. package/lib/theme/NavbarItem/LocaleDropdownNavbarItem.js +0 -72
  289. package/lib/theme/NavbarItem/SearchNavbarItem.js +0 -28
  290. package/lib/theme/NavbarItem/index.js +0 -54
  291. package/lib/theme/NotFound.js +0 -57
  292. package/lib/theme/SearchBar.js +0 -15
  293. package/lib/theme/SearchMetadatas/index.js +0 -33
  294. package/lib/theme/Seo/index.js +0 -49
  295. package/lib/theme/SkipToContent/index.js +0 -63
  296. package/lib/theme/SkipToContent/styles.module.css +0 -14
  297. package/lib/theme/TOC/index.js +0 -59
  298. package/lib/theme/TOC/styles.module.css +0 -23
  299. package/lib/theme/TOCInline/index.js +0 -53
  300. package/lib/theme/TOCInline/styles.module.css +0 -12
  301. package/lib/theme/TabItem/index.js +0 -32
  302. package/lib/theme/Tabs/index.js +0 -150
  303. package/lib/theme/Tabs/styles.module.css +0 -23
  304. package/lib/theme/ThemeContext.js +0 -21
  305. package/lib/theme/ThemeProvider/index.js +0 -38
  306. package/lib/theme/ThemedImage/index.js +0 -49
  307. package/lib/theme/Toggle/index.js +0 -94
  308. package/lib/theme/Toggle/styles.css +0 -103
  309. package/lib/theme/Toggle/styles.module.css +0 -17
  310. package/lib/theme/UserPreferencesContext.js +0 -18
  311. package/lib/theme/UserPreferencesProvider/index.js +0 -36
  312. package/lib/theme/hooks/useContextualSearchFilters.js +0 -47
  313. package/lib/theme/hooks/useDocs.js +0 -18
  314. package/lib/theme/hooks/useHideableNavbar.js +0 -92
  315. package/lib/theme/hooks/useKeyboardNavigation.js +0 -45
  316. package/lib/theme/hooks/useLocationHash.js +0 -28
  317. package/lib/theme/hooks/useLockBodyScroll.js +0 -26
  318. package/lib/theme/hooks/usePrismTheme.js +0 -36
  319. package/lib/theme/hooks/useScrollPosition.js +0 -49
  320. package/lib/theme/hooks/useTOCHighlight.js +0 -87
  321. package/lib/theme/hooks/useTabGroupChoice.js +0 -51
  322. package/lib/theme/hooks/useTheme.js +0 -99
  323. package/lib/theme/hooks/useThemeContext.js +0 -31
  324. package/lib/theme/hooks/useUserPreferencesContext.js +0 -31
  325. package/lib/theme/hooks/useWindowSize.js +0 -55
  326. package/lib/theme/prism-include-languages.js +0 -39
  327. package/lib-next/__tests__/__snapshots__/translations.test.ts.snap +0 -116
  328. package/lib-next/__tests__/translations.test.js +0 -128
  329. package/lib-next/__tests__/validateThemeConfig.test.js +0 -333
  330. package/lib-next/index.js +0 -221
  331. package/lib-next/theme/Toggle/styles.css +0 -103
  332. package/lib-next/theme/hooks/useContextualSearchFilters.js +0 -41
  333. package/lib-next/theme/hooks/useLocationHash.js +0 -20
  334. package/lib-next/theme/hooks/useScrollPosition.js +0 -38
  335. package/lib-next/theme/hooks/useTOCHighlight.js +0 -84
  336. package/lib-next/translations.js +0 -145
  337. package/lib-next/validateThemeConfig.js +0 -317
  338. package/src/__tests__/__snapshots__/translations.test.ts.snap +0 -116
  339. package/src/__tests__/translations.test.ts +0 -116
  340. package/src/__tests__/validateThemeConfig.test.js +0 -333
  341. package/src/prism-include-languages.js +0 -11
  342. package/src/theme/Toggle/styles.css +0 -103
  343. package/src/theme/hooks/useContextualSearchFilters.ts +0 -52
  344. package/src/theme/hooks/useLocationHash.ts +0 -25
  345. package/src/theme/hooks/useScrollPosition.ts +0 -45
  346. package/src/theme/hooks/useTOCHighlight.ts +0 -98
  347. package/tsconfig.json +0 -12
  348. package/update-code-translations.js +0 -240
  349. package/update-code-translations.test.js +0 -33
package/lib-next/theme/IconMenu/index.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import React from 'react';
8
8
 
9
- const IconMenu = ({width = 30, height = 30, className, ...restProps}) => {
9
+ function IconMenu({width = 30, height = 30, className, ...restProps}) {
10
10
  return (
11
11
  <svg
12
12
  className={className}
@@ -24,6 +24,6 @@ const IconMenu = ({width = 30, height = 30, className, ...restProps}) => {
24
24
  />
25
25
  </svg>
26
26
  );
27
- };
27
+ }
28
28
 
29
29
  export default IconMenu;
package/lib-next/theme/LastUpdated/index.js CHANGED
@@ -6,6 +6,7 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import Translate from '@docusaurus/Translate';
9
+ import {ThemeClassNames} from '@docusaurus/theme-common';
9
10
 
10
11
  function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
11
12
  return (
@@ -45,7 +46,7 @@ export default function LastUpdated({
45
46
  lastUpdatedBy,
46
47
  }) {
47
48
  return (
48
- <>
49
+ <span className={ThemeClassNames.common.lastUpdated}>
49
50
  <Translate
50
51
  id="theme.lastUpdated.lastUpdatedAtBy"
51
52
  description="The sentence used to display when a page has been last updated, and by who"
@@ -72,6 +73,6 @@ export default function LastUpdated({
72
73
  <small> (Simulated during dev for better perf)</small>
73
74
  </div>
74
75
  )}
75
- </>
76
+ </span>
76
77
  );
77
78
  }
package/lib-next/theme/Layout/index.js CHANGED
@@ -6,6 +6,7 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import clsx from 'clsx';
9
+ import ErrorBoundary from '@docusaurus/ErrorBoundary';
9
10
  import SkipToContent from '@theme/SkipToContent';
10
11
  import AnnouncementBar from '@theme/AnnouncementBar';
11
12
  import Navbar from '@theme/Navbar';
@@ -14,6 +15,7 @@ import LayoutProviders from '@theme/LayoutProviders';
14
15
  import LayoutHead from '@theme/LayoutHead';
15
16
  import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
16
17
  import {ThemeClassNames} from '@docusaurus/theme-common';
18
+ import ErrorPageContent from '@theme/ErrorPageContent';
17
19
  import './styles.css';
18
20
 
19
21
  function Layout(props) {
@@ -35,7 +37,7 @@ function Layout(props) {
35
37
  wrapperClassName,
36
38
  pageClassName,
37
39
  )}>
38
- {children}
40
+ <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
39
41
  </div>
40
42
 
41
43
  {!noFooter && <Footer />}
package/lib-next/theme/LayoutHead/index.js CHANGED
@@ -8,12 +8,13 @@ import React from 'react';
8
8
  import Head from '@docusaurus/Head';
9
9
  import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
10
10
  import useBaseUrl from '@docusaurus/useBaseUrl';
11
- import SearchMetadatas from '@theme/SearchMetadatas';
11
+ import SearchMetadata from '@theme/SearchMetadata';
12
12
  import Seo from '@theme/Seo';
13
13
  import {
14
14
  DEFAULT_SEARCH_TAG,
15
15
  useTitleFormatter,
16
16
  useAlternatePageUtils,
17
+ useThemeConfig,
17
18
  } from '@docusaurus/theme-common';
18
19
  import {useLocation} from '@docusaurus/router'; // Useful for SEO
19
20
  // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
@@ -77,13 +78,11 @@ function CanonicalUrlHeaders({permalink}) {
77
78
 
78
79
  export default function LayoutHead(props) {
79
80
  const {
80
- siteConfig: {
81
- favicon,
82
- themeConfig: {metadatas, image: defaultImage},
83
- },
81
+ siteConfig: {favicon},
84
82
  i18n: {currentLocale, localeConfigs},
85
83
  } = useDocusaurusContext();
86
- const {title, description, image, keywords, searchMetadatas} = props;
84
+ const {metadata, image: defaultImage} = useThemeConfig();
85
+ const {title, description, image, keywords, searchMetadata} = props;
87
86
  const faviconUrl = useBaseUrl(favicon);
88
87
  const pageTitle = useTitleFormatter(title); // See https://github.com/facebook/docusaurus/issues/3317#issuecomment-754661855
89
88
  // const htmlLang = currentLocale.split('-')[0];
@@ -95,41 +94,37 @@ export default function LayoutHead(props) {
95
94
  <>
96
95
  <Head>
97
96
  <html lang={htmlLang} dir={htmlDir} />
98
- {favicon && <link rel="shortcut icon" href={faviconUrl} />}
97
+ {favicon && <link rel="icon" href={faviconUrl} />}
99
98
  <title>{pageTitle}</title>
100
99
  <meta property="og:title" content={pageTitle} />
101
- {image ||
102
- (defaultImage && (
103
- <meta name="twitter:card" content="summary_large_image" />
104
- ))}
100
+ <meta name="twitter:card" content="summary_large_image" />
105
101
  </Head>
106
102
 
107
- <Seo
108
- {...{
109
- description,
110
- keywords,
111
- image,
112
- }}
113
- />
103
+ {/* image can override the default image */}
104
+ {defaultImage && <Seo image={defaultImage} />}
105
+ {image && <Seo image={image} />}
106
+
107
+ <Seo description={description} keywords={keywords} />
114
108
 
115
109
  <CanonicalUrlHeaders />
116
110
 
117
111
  <AlternateLangHeaders />
118
112
 
119
- <SearchMetadatas
113
+ <SearchMetadata
120
114
  tag={DEFAULT_SEARCH_TAG}
121
115
  locale={currentLocale}
122
- {...searchMetadatas}
116
+ {...searchMetadata}
123
117
  />
124
118
 
125
119
  <Head // it's important to have an additional <Head> element here,
126
120
  // as it allows react-helmet to override values set in previous <Head>
127
- // ie we can override default metadatas such as "twitter:card"
121
+ // ie we can override default metadata such as "twitter:card"
128
122
  // In same Head, the same meta would appear twice instead of overriding
129
123
  // See react-helmet doc
130
124
  >
131
- {metadatas.map((metadata, i) => (
132
- <meta key={`metadata_${i}`} {...metadata} />
125
+ {/* Yes, "metadatum" is the grammatically correct term */}
126
+ {metadata.map((metadatum, i) => (
127
+ <meta key={`metadata_${i}`} {...metadatum} />
133
128
  ))}
134
129
  </Head>
135
130
  </>
package/lib-next/theme/LayoutProviders/index.js CHANGED
@@ -10,15 +10,21 @@ import UserPreferencesProvider from '@theme/UserPreferencesProvider';
10
10
  import {
11
11
  AnnouncementBarProvider,
12
12
  DocsPreferredVersionContextProvider,
13
+ MobileSecondaryMenuProvider,
14
+ ScrollControllerProvider,
13
15
  } from '@docusaurus/theme-common';
14
16
  export default function LayoutProviders({children}) {
15
17
  return (
16
18
  <ThemeProvider>
17
19
  <AnnouncementBarProvider>
18
20
  <UserPreferencesProvider>
19
- <DocsPreferredVersionContextProvider>
20
- {children}
21
- </DocsPreferredVersionContextProvider>
21
+ <ScrollControllerProvider>
22
+ <DocsPreferredVersionContextProvider>
23
+ <MobileSecondaryMenuProvider>
24
+ {children}
25
+ </MobileSecondaryMenuProvider>
26
+ </DocsPreferredVersionContextProvider>
27
+ </ScrollControllerProvider>
22
28
  </UserPreferencesProvider>
23
29
  </AnnouncementBarProvider>
24
30
  </ThemeProvider>
package/lib-next/theme/Logo/index.js CHANGED
@@ -9,28 +9,34 @@ import Link from '@docusaurus/Link';
9
9
  import ThemedImage from '@theme/ThemedImage';
10
10
  import useBaseUrl from '@docusaurus/useBaseUrl';
11
11
  import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
12
+ import {useThemeConfig} from '@docusaurus/theme-common';
12
13
 
13
- const Logo = (props) => {
14
+ function Logo(props) {
14
15
  const {
15
- siteConfig: {
16
- title,
17
- themeConfig: {
18
- navbar: {
19
- title: navbarTitle,
20
- logo = {
21
- src: '',
22
- },
23
- },
16
+ siteConfig: {title},
17
+ } = useDocusaurusContext();
18
+ const {
19
+ navbar: {
20
+ title: navbarTitle,
21
+ logo = {
22
+ src: '',
24
23
  },
25
24
  },
26
- isClient,
27
- } = useDocusaurusContext();
25
+ } = useThemeConfig();
28
26
  const {imageClassName, titleClassName, ...propsRest} = props;
29
27
  const logoLink = useBaseUrl(logo.href || '/');
30
28
  const sources = {
31
29
  light: useBaseUrl(logo.src),
32
30
  dark: useBaseUrl(logo.srcDark || logo.src),
33
31
  };
32
+ const themedImage = (
33
+ <ThemedImage
34
+ sources={sources}
35
+ height={logo.height}
36
+ width={logo.width}
37
+ alt={logo.alt || navbarTitle || title}
38
+ />
39
+ );
34
40
  return (
35
41
  <Link
36
42
  to={logoLink}
@@ -38,17 +44,15 @@ const Logo = (props) => {
38
44
  {...(logo.target && {
39
45
  target: logo.target,
40
46
  })}>
41
- {logo.src && (
42
- <ThemedImage
43
- key={isClient}
44
- className={imageClassName}
45
- sources={sources}
46
- alt={logo.alt || navbarTitle || title}
47
- />
48
- )}
47
+ {logo.src &&
48
+ (imageClassName ? (
49
+ <div className={imageClassName}>{themedImage}</div>
50
+ ) : (
51
+ themedImage
52
+ ))}
49
53
  {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
50
54
  </Link>
51
55
  );
52
- };
56
+ }
53
57
 
54
58
  export default Logo;
package/lib-next/theme/MDXComponents/index.js CHANGED
@@ -5,10 +5,30 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import React, {isValidElement} from 'react';
8
+ import Head from '@docusaurus/Head';
8
9
  import Link from '@docusaurus/Link';
9
10
  import CodeBlock from '@theme/CodeBlock';
10
11
  import Heading from '@theme/Heading';
12
+ import Details from '@theme/Details';
13
+ import './styles.css'; // MDX elements are wrapped through the MDX pragma
14
+ // In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
15
+
16
+ function unwrapMDXElement(element) {
17
+ if (element?.props?.mdxType && element?.props?.originalType) {
18
+ const {mdxType, originalType, ...newProps} = element.props;
19
+ return React.createElement(element.props.originalType, newProps);
20
+ }
21
+
22
+ return element;
23
+ }
24
+
11
25
  const MDXComponents = {
26
+ head: (props) => {
27
+ const unwrappedChildren = React.Children.map(props.children, (child) =>
28
+ unwrapMDXElement(child),
29
+ );
30
+ return <Head {...props}>{unwrappedChildren}</Head>;
31
+ },
12
32
  code: (props) => {
13
33
  const {children} = props; // For retrocompatibility purposes (pretty rare use case)
14
34
  // See https://github.com/facebook/docusaurus/pull/1584
@@ -27,20 +47,27 @@ const MDXComponents = {
27
47
  pre: (props) => {
28
48
  const {children} = props; // See comment for `code` above
29
49
 
30
- if (isValidElement(children?.props?.children)) {
31
- return children?.props.children;
50
+ if (isValidElement(children) && isValidElement(children?.props?.children)) {
51
+ return children.props.children;
32
52
  }
33
53
 
34
54
  return (
35
55
  <CodeBlock
36
- {...(isValidElement(children)
37
- ? children?.props
38
- : {
39
- children,
40
- })}
56
+ {...(isValidElement(children) ? children?.props : {...props})}
41
57
  />
42
58
  );
43
59
  },
60
+ details: (props) => {
61
+ const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the Detais theme component
62
+
63
+ const summary = items.find((item) => item?.props?.mdxType === 'summary');
64
+ const children = <>{items.filter((item) => item !== summary)}</>;
65
+ return (
66
+ <Details {...props} summary={summary}>
67
+ {children}
68
+ </Details>
69
+ );
70
+ },
44
71
  h1: Heading('h1'),
45
72
  h2: Heading('h2'),
46
73
  h3: Heading('h3'),
package/{lib/theme/hooks → lib-next/theme/MDXComponents}/styles.css RENAMED
@@ -5,6 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- body:not(.navigation-with-keyboard) *:not(input):focus {
9
- outline: none;
8
+ ul.contains-task-list {
9
+ padding-left: 0;
10
+ list-style: none;
10
11
  }
package/lib-next/theme/MDXPage/index.js CHANGED
@@ -15,7 +15,11 @@ import styles from './styles.module.css';
15
15
 
16
16
  function MDXPage(props) {
17
17
  const {content: MDXPageContent} = props;
18
- const {frontMatter, metadata} = MDXPageContent;
18
+ const {
19
+ // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
20
+ frontMatter,
21
+ metadata,
22
+ } = MDXPageContent;
19
23
  const {
20
24
  title,
21
25
  description,
@@ -39,7 +43,11 @@ function MDXPage(props) {
39
43
  </div>
40
44
  {!hideTableOfContents && MDXPageContent.toc && (
41
45
  <div className="col col--2">
42
- <TOC toc={MDXPageContent.toc} />
46
+ <TOC
47
+ toc={MDXPageContent.toc}
48
+ minHeadingLevel={frontMatter.toc_min_heading_level}
49
+ maxHeadingLevel={frontMatter.toc_max_heading_level}
50
+ />
43
51
  </div>
44
52
  )}
45
53
  </div>
package/lib-next/theme/Navbar/index.js CHANGED
@@ -6,19 +6,32 @@
6
6
  */
7
7
  import React, {useCallback, useState, useEffect} from 'react';
8
8
  import clsx from 'clsx';
9
+ import Translate from '@docusaurus/Translate';
9
10
  import SearchBar from '@theme/SearchBar';
10
11
  import Toggle from '@theme/Toggle';
11
12
  import useThemeContext from '@theme/hooks/useThemeContext';
12
- import {useThemeConfig} from '@docusaurus/theme-common';
13
+ import {
14
+ useThemeConfig,
15
+ useMobileSecondaryMenuRenderer,
16
+ usePrevious,
17
+ useHistoryPopHandler,
18
+ } from '@docusaurus/theme-common';
13
19
  import useHideableNavbar from '@theme/hooks/useHideableNavbar';
14
20
  import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
15
- import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize';
21
+ import useWindowSize from '@theme/hooks/useWindowSize';
22
+ import {useActivePlugin} from '@theme/hooks/useDocs';
16
23
  import NavbarItem from '@theme/NavbarItem';
17
24
  import Logo from '@theme/Logo';
18
25
  import IconMenu from '@theme/IconMenu';
26
+ import IconClose from '@theme/IconClose';
19
27
  import styles from './styles.module.css'; // retrocompatible with v1
20
28
 
21
- const DefaultNavItemPosition = 'right'; // If split links by left/right
29
+ const DefaultNavItemPosition = 'right';
30
+
31
+ function useNavbarItems() {
32
+ // TODO temporary casting until ThemeConfig type is improved
33
+ return useThemeConfig().navbar.items;
34
+ } // If split links by left/right
22
35
  // if position is unspecified, fallback to right (as v1)
23
36
 
24
37
  function splitNavItemsByPosition(items) {
@@ -34,31 +47,174 @@ function splitNavItemsByPosition(items) {
34
47
  };
35
48
  }
36
49
 
37
- function Navbar() {
50
+ function useMobileSidebar() {
51
+ const windowSize = useWindowSize(); // Mobile sidebar not visible on hydration: can avoid SSR rendering
52
+
53
+ const shouldRender = windowSize === 'mobile'; // || windowSize === 'ssr';
54
+
55
+ const [shown, setShown] = useState(false); // Close mobile sidebar on navigation pop
56
+ // Most likely firing when using the Android back button (but not only)
57
+
58
+ useHistoryPopHandler(() => {
59
+ if (shown) {
60
+ setShown(false); // Should we prevent the navigation here?
61
+ // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
62
+
63
+ return false; // prevent pop navigation
64
+ }
65
+
66
+ return undefined;
67
+ });
68
+ const toggle = useCallback(() => {
69
+ setShown((s) => !s);
70
+ }, []);
71
+ useEffect(() => {
72
+ if (windowSize === 'desktop') {
73
+ setShown(false);
74
+ }
75
+ }, [windowSize]);
76
+ return {
77
+ shouldRender,
78
+ toggle,
79
+ shown,
80
+ };
81
+ }
82
+
83
+ function useColorModeToggle() {
38
84
  const {
39
- navbar: {items, hideOnScroll, style},
40
- colorMode: {disableSwitch: disableColorModeSwitch},
85
+ colorMode: {disableSwitch},
41
86
  } = useThemeConfig();
42
- const [sidebarShown, setSidebarShown] = useState(false);
43
87
  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
44
- const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
45
- useLockBodyScroll(sidebarShown);
46
- const showSidebar = useCallback(() => {
47
- setSidebarShown(true);
48
- }, [setSidebarShown]);
49
- const hideSidebar = useCallback(() => {
50
- setSidebarShown(false);
51
- }, [setSidebarShown]);
52
- const onToggleChange = useCallback(
88
+ const toggle = useCallback(
53
89
  (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
54
90
  [setLightTheme, setDarkTheme],
55
91
  );
56
- const windowSize = useWindowSize();
92
+ return {
93
+ isDarkTheme,
94
+ toggle,
95
+ disabled: disableSwitch,
96
+ };
97
+ }
98
+
99
+ function useSecondaryMenu({sidebarShown, toggleSidebar}) {
100
+ const content = useMobileSecondaryMenuRenderer()?.({
101
+ toggleSidebar,
102
+ });
103
+ const previousContent = usePrevious(content);
104
+ const [shown, setShown] = useState(
105
+ () =>
106
+ // /!\ content is set with useEffect,
107
+ // so it's not available on mount anyway
108
+ // "return !!content" => always returns false
109
+ false,
110
+ ); // When content is become available for the first time (set in useEffect)
111
+ // we set this content to be shown!
112
+
57
113
  useEffect(() => {
58
- if (windowSize === windowSizes.desktop) {
59
- setSidebarShown(false);
114
+ const contentBecameAvailable = content && !previousContent;
115
+
116
+ if (contentBecameAvailable) {
117
+ setShown(true);
60
118
  }
61
- }, [windowSize]);
119
+ }, [content, previousContent]);
120
+ const hasContent = !!content; // On sidebar close, secondary menu is set to be shown on next re-opening
121
+ // (if any secondary menu content available)
122
+
123
+ useEffect(() => {
124
+ if (!hasContent) {
125
+ setShown(false);
126
+ return;
127
+ }
128
+
129
+ if (!sidebarShown) {
130
+ setShown(true);
131
+ }
132
+ }, [sidebarShown, hasContent]);
133
+ const hide = useCallback(() => {
134
+ setShown(false);
135
+ }, []);
136
+ return {
137
+ shown,
138
+ hide,
139
+ content,
140
+ };
141
+ }
142
+
143
+ function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
144
+ useLockBodyScroll(sidebarShown);
145
+ const items = useNavbarItems();
146
+ const colorModeToggle = useColorModeToggle();
147
+ const secondaryMenu = useSecondaryMenu({
148
+ sidebarShown,
149
+ toggleSidebar,
150
+ });
151
+ return (
152
+ <div className="navbar-sidebar">
153
+ <div className="navbar-sidebar__brand">
154
+ <Logo
155
+ className="navbar__brand"
156
+ imageClassName="navbar__logo"
157
+ titleClassName="navbar__title"
158
+ />
159
+ {!colorModeToggle.disabled && (
160
+ <Toggle
161
+ className={styles.navbarSidebarToggle}
162
+ checked={colorModeToggle.isDarkTheme}
163
+ onChange={colorModeToggle.toggle}
164
+ />
165
+ )}
166
+ <button
167
+ type="button"
168
+ className="clean-btn navbar-sidebar__close"
169
+ onClick={toggleSidebar}>
170
+ <IconClose
171
+ color="var(--ifm-color-emphasis-600)"
172
+ className={styles.navbarSidebarCloseSvg}
173
+ />
174
+ </button>
175
+ </div>
176
+
177
+ <div
178
+ className={clsx('navbar-sidebar__items', {
179
+ 'navbar-sidebar__items--show-secondary': secondaryMenu.shown,
180
+ })}>
181
+ <div className="navbar-sidebar__item menu">
182
+ <ul className="menu__list">
183
+ {items.map((item, i) => (
184
+ <NavbarItem mobile {...item} onClick={toggleSidebar} key={i} />
185
+ ))}
186
+ </ul>
187
+ </div>
188
+
189
+ <div className="navbar-sidebar__item menu">
190
+ {items.length > 0 && (
191
+ <button
192
+ type="button"
193
+ className="clean-btn navbar-sidebar__back"
194
+ onClick={secondaryMenu.hide}>
195
+ <Translate
196
+ id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
197
+ description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
198
+ ← Back to main menu
199
+ </Translate>
200
+ </button>
201
+ )}
202
+ {secondaryMenu.content}
203
+ </div>
204
+ </div>
205
+ </div>
206
+ );
207
+ }
208
+
209
+ function Navbar() {
210
+ const {
211
+ navbar: {hideOnScroll, style},
212
+ } = useThemeConfig();
213
+ const mobileSidebar = useMobileSidebar();
214
+ const colorModeToggle = useColorModeToggle();
215
+ const activeDocPlugin = useActivePlugin();
216
+ const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
217
+ const items = useNavbarItems();
62
218
  const hasSearchNavbarItem = items.some((item) => item.type === 'search');
63
219
  const {leftItems, rightItems} = splitNavItemsByPosition(items);
64
220
  return (
@@ -67,20 +223,20 @@ function Navbar() {
67
223
  className={clsx('navbar', 'navbar--fixed-top', {
68
224
  'navbar--dark': style === 'dark',
69
225
  'navbar--primary': style === 'primary',
70
- 'navbar-sidebar--show': sidebarShown,
226
+ 'navbar-sidebar--show': mobileSidebar.shown,
71
227
  [styles.navbarHideable]: hideOnScroll,
72
228
  [styles.navbarHidden]: hideOnScroll && !isNavbarVisible,
73
229
  })}>
74
230
  <div className="navbar__inner">
75
231
  <div className="navbar__items">
76
- {items != null && items.length !== 0 && (
232
+ {(items?.length > 0 || activeDocPlugin) && (
77
233
  <button
78
234
  aria-label="Navigation bar toggle"
79
235
  className="navbar__toggle clean-btn"
80
236
  type="button"
81
237
  tabIndex={0}
82
- onClick={showSidebar}
83
- onKeyDown={showSidebar}>
238
+ onClick={mobileSidebar.toggle}
239
+ onKeyDown={mobileSidebar.toggle}>
84
240
  <IconMenu />
85
241
  </button>
86
242
  )}
@@ -97,48 +253,29 @@ function Navbar() {
97
253
  {rightItems.map((item, i) => (
98
254
  <NavbarItem {...item} key={i} />
99
255
  ))}
100
- {!disableColorModeSwitch && (
256
+ {!colorModeToggle.disabled && (
101
257
  <Toggle
102
- className={styles.displayOnlyInLargeViewport}
103
- checked={isDarkTheme}
104
- onChange={onToggleChange}
258
+ className={styles.toggle}
259
+ checked={colorModeToggle.isDarkTheme}
260
+ onChange={colorModeToggle.toggle}
105
261
  />
106
262
  )}
107
263
  {!hasSearchNavbarItem && <SearchBar />}
108
264
  </div>
109
265
  </div>
266
+
110
267
  <div
111
268
  role="presentation"
112
269
  className="navbar-sidebar__backdrop"
113
- onClick={hideSidebar}
270
+ onClick={mobileSidebar.toggle}
114
271
  />
115
- <div className="navbar-sidebar">
116
- <div className="navbar-sidebar__brand">
117
- <Logo
118
- className="navbar__brand"
119
- imageClassName="navbar__logo"
120
- titleClassName="navbar__title"
121
- onClick={hideSidebar}
122
- />
123
- {!disableColorModeSwitch && sidebarShown && (
124
- <Toggle checked={isDarkTheme} onChange={onToggleChange} />
125
- )}
126
- </div>
127
- <div className="navbar-sidebar__items">
128
- <div className="menu">
129
- <ul className="menu__list">
130
- {items.map((item, i) => (
131
- <NavbarItem
132
- mobile
133
- {...item} // TODO fix typing
134
- onClick={hideSidebar}
135
- key={i}
136
- />
137
- ))}
138
- </ul>
139
- </div>
140
- </div>
141
- </div>
272
+
273
+ {mobileSidebar.shouldRender && (
274
+ <NavbarMobileSidebar
275
+ sidebarShown={mobileSidebar.shown}
276
+ toggleSidebar={mobileSidebar.toggle}
277
+ />
278
+ )}
142
279
  </nav>
143
280
  );
144
281
  }