fix(v2): bootstrap doc sidebar

packages/docusaurus-init/templates/bootstrap/docusaurus.config.js

@@ -15,7 +15,7 @@ module.exports = {
  },
  links: [
  {
- to: 'docs/',
+ to: 'docs/doc1',
  activeBasePath: 'docs',
  label: 'Docs',
  position: 'left',

packages/docusaurus-theme-bootstrap/README.md

@@ -0,0 +1,31 @@
+# Docusaurus Theme Bootstrap
+
+The bootstrap theme for Docusaurus.
+
+## Installation
+
+Add `docusaurus/theme-bootstrap` to your package:
+
+```bash
+npm i @docusaurus/theme-bootstrao
+# or
+yarn add @docusaurus/theme-bootstrap
+```
+
+Modify your `docusaurus.config.js`:
+
+```diff
+module.exports = {
+ ...
++ themes: ['@docusaurus/theme-bootstrap'],
+ ...
+}
+```
+
+## Swizzling components
+
+```shell
+$ npm swizzle @docusaurus/theme-bootstrap [component name]
+```
+
+All components used by this theme can be found [here](https://github.com/facebook/docusaurus/tree/master/packages/docusaurus-theme-bootstrap/src/theme)

packages/docusaurus-theme-bootstrap/src/theme/DocPage/index.js

@@ -14,14 +14,18 @@ import {MDXProvider} from '@mdx-js/react';
 import {matchPath} from '@docusaurus/router';
 
 function DocPage(props) {
- const {route: baseRoute, docsMetadata, location} = props;
+ const {route: baseRoute, docsMetadata, location, content} = props;
+ const {isHomePage} = docsMetadata;
  // case-sensitive route such as it is defined in the sidebar
- const currentRoute =
- baseRoute.routes.find((route) => {
- return matchPath(location.pathname, route);
- }) || {};
+ const currentRoute = !isHomePage
+ ? baseRoute.routes.find((route) => {
+ return matchPath(location.pathname, route);
+ }) || {}
+ : {};
  const {permalinkToSidebar, docsSidebars} = docsMetadata;
- const sidebar = permalinkToSidebar[currentRoute.path];
+ const sidebar = isHomePage
+ ? content.metadata.sidebar
+ : permalinkToSidebar[currentRoute.path];
 
  return (
  <Layout title="Doc page" description="My Doc page">

packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.js

@@ -18,8 +18,19 @@ import {
  NavItem as NavItemBase,
 } from 'reactstrap';
 
-function NavItem({href, label, to, ...props}) {
+function NavItem({
+ activeBasePath,
+ activeBaseRegex,
+ href,
+ label,
+ to,
+ activeClassName = 'nav-link text-info',
+ prependBaseUrlToHref,
+ ...props
+}) {
  const toUrl = useBaseUrl(to);
+ const activeBaseUrl = useBaseUrl(activeBasePath);
+ const normalizedHref = useBaseUrl(href, true);
 
  return (
  <NavItemBase>
@@ -29,10 +40,20 @@ function NavItem({href, label, to, ...props}) {
  ? {
  target: '_blank',
  rel: 'noopener noreferrer',
- href,
+ href: prependBaseUrlToHref ? normalizedHref : href,
  }
  : {
+ isNavLink: true,
+ activeClassName,
  to: toUrl,
+ ...(activeBasePath || activeBaseRegex
+ ? {
+ isActive: (_match, location) =>
+ activeBaseRegex
+ ? new RegExp(activeBaseRegex).test(location.pathname)
+ : location.pathname.startsWith(activeBaseUrl),
+ }
+ : null),
  })}
  {...props}>
  {label}