feat(v2): bootstrap layout navbar (#2668)

* feat(v2): add minor adjustements and footer component

* fix(v2): margin and spacing of footer

* feat(v2): add navbar component

* ádd collapse classname

* feat(v2): add dependencies

* feat(v2): remove unused code

* feat(v2): remove unused links

* feat(v2): add reactstrap components :|

* feat(v2): add brand and other nav componnets

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

@@ -13,7 +13,7 @@ function BlogListPage(props) {
   const {items, metadata} = props;
 
   return (
-    <div className="container-fluid mt-5">
+    <div className="container-fluid">
       <div className="row row-cols-1 row-cols-sm-1">
         {items.map(({content: BlogPostContent}) => (
           <div

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

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useState, useCallback} from 'react';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useLogo from '@theme/hooks/useLogo';
+import {
+  Collapse,
+  Navbar as NavbarBase,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem as NavItemBase,
+} from 'reactstrap';
+
+function NavItem({href, label, to, ...props}) {
+  const toUrl = useBaseUrl(to);
+
+  return (
+    <NavItemBase>
+      <Link
+        className="nav-link"
+        {...(href
+          ? {
+              target: '_blank',
+              rel: 'noopener noreferrer',
+              href,
+            }
+          : {
+              to: toUrl,
+            })}
+        {...props}>
+        {label}
+      </Link>
+    </NavItemBase>
+  );
+}
+
+function Navbar() {
+  const {
+    siteConfig: {
+      themeConfig: {navbar: {title, links = []} = {}},
+    },
+    isClient,
+  } = useDocusaurusContext();
+
+  const [sidebarShown, setSidebarShown] = useState(false);
+  const handleToggle = useCallback(() => {
+    setSidebarShown(!sidebarShown);
+  }, [sidebarShown, setSidebarShown]);
+  const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
+
+  return (
+    <NavbarBase color="light" light expand="md">
+      <NavbarBrand>
+        <Link to={logoLink} {...logoLinkProps}>
+          {logoImageUrl != null && (
+            <img
+              key={isClient}
+              width="50"
+              height="50"
+              style={{
+                maxWidth: '100%',
+              }}
+              src={logoImageUrl}
+              alt={logoAlt}
+            />
+          )}
+          {title != null && <span className="ml-2">{title}</span>}
+        </Link>
+      </NavbarBrand>
+
+      <NavbarToggler onClick={handleToggle} />
+      <Collapse
+        isOpen={sidebarShown}
+        navbar
+        className="justify-content-between">
+        <Nav navbar>
+          {links != null &&
+            links.length !== 0 &&
+            links
+              .filter((linkItem) => linkItem.position === 'left')
+              .map((linkItem, key) => <NavItem {...linkItem} key={key} />)}
+        </Nav>
+
+        <Nav navbar>
+          {links != null &&
+            links.length !== 0 &&
+            links
+              .filter((linkItem) => linkItem.position === 'right')
+              .map((linkItem, key) => <NavItem {...linkItem} key={key} />)}
+        </Nav>
+      </Collapse>
+    </NavbarBase>
+  );
+}
+
+export default Navbar;

packages/docusaurus-theme-bootstrap/src/theme/ThemeContext.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+const ThemeContext = React.createContext({
+  isDarkTheme: false,
+  setLightTheme: () => {},
+  setDarkTheme: () => {},
+});
+
+export default ThemeContext;

packages/docusaurus-theme-bootstrap/src/theme/hooks/useLogo.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useThemeContext from '@theme/hooks/useThemeContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+
+const useLogo = () => {
+  const {
+    siteConfig: {baseUrl, themeConfig: {navbar: {logo = {}} = {}}} = {},
+  } = useDocusaurusContext();
+  const {isDarkTheme} = useThemeContext();
+  const logoLink = logo.href || baseUrl;
+  let logoLinkProps = {};
+
+  if (logo.target) {
+    logoLinkProps = {target: logo.target};
+  } else if (!isInternalUrl(logoLink)) {
+    logoLinkProps = {
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    };
+  }
+
+  const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
+  const logoImageUrl = useBaseUrl(logoSrc);
+
+  return {
+    logoLink,
+    logoLinkProps,
+    logoImageUrl,
+    logoAlt: logo.alt,
+  };
+};
+
+export default useLogo;

packages/docusaurus-theme-bootstrap/src/theme/hooks/useThemeContext.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useContext} from 'react';
+
+import ThemeContext from '@theme/ThemeContext';
+
+function useThemeContext() {
+  return useContext(ThemeContext);
+}
+
+export default useThemeContext;