-
-
-
-
- ⌘
-
- K
-
-
-
+
+
);
+}
- return (
-
-
-
-
-
-
-
- Material
Tailwind
-
-
-
-
- Documentation
-
-
-
setOpen(!open)}
- >
- {open ? menuCloseIcon : menuOpenIcon}
-
-
- {navbarMenu}
-
-
+export const getStaticPaths = async () => {
+ const baseDirectory = "documentation";
+ const paths = [];
+ const allDir = getDirectoriesAndFile(baseDirectory);
+ const filteredArray = filterArray(allDir);
-
-
- {navbarMenu}
-
-
-
-
-
- {slug.map((el, key) => (
- -
- {el}
- {key === slug.length - 1 ? (
- ""
- ) : (
-
- )}
-
- ))}
-
-
-
+ for (let i = 0; i < filteredArray.length - 1; i++) {
+ const directories =
+ filteredArray[i] !== null &&
+ filteredArray[i].split("/").filter((dir) => dir !== baseDirectory);
+ const files = filteredArray[i + 1].includes("/")
+ ? filteredArray[i + 1].split("/").filter((dir) => dir !== baseDirectory)
+ : filteredArray[i + 1];
+
+ const filename = Array.isArray(files) ? null : files;
+
+ filename &&
+ paths.push({
+ params: {
+ slug: [...directories, filename],
+ },
+ });
+ }
+
+ return {
+ paths: paths,
+ fallback: false,
+ };
+};
+
+export const getStaticProps = async ({ params: { slug } }) => {
+ const markdownWithMeta = fs.readFileSync(
+ `documentation/${slug.join("/")}.mdx`,
);
-}
-export default DocsNavbar;
+ const { data: frontMatter, content } = matter(markdownWithMeta);
+
+ const mdxSource = await serialize(content, {
+ mdxOptions: {
+ rehypePlugins: [[rehypePrettyCode, rehypePrettyCodeConfig]],
+ remarkPlugins: [remarkGfm],
+ development: false,
+ },
+ });
+
+ return {
+ props: {
+ frontMatter,
+ mdxSource,
+ slug,
+ },
+ };
+};
diff --git a/widgets/layout/navbar.tsx b/widgets/layout/navbar.tsx
index 6d004bc23..ca99df72e 100644
--- a/widgets/layout/navbar.tsx
+++ b/widgets/layout/navbar.tsx
@@ -1,22 +1,25 @@
import React from "react";
import Link from "next/link";
import {
- Navbar as MTNavbar,
+ Navbar as Navbar,
Collapse,
IconButton,
- Menu,
- MenuHandler,
- MenuList,
- MenuItem,
Chip,
- Input,
Typography,
List,
ListItem,
Tooltip,
+ Input,
+ Button,
} from "@material-tailwind/react";
import { Logo, Search } from "@widgets";
import { formatNumber } from "@utils";
+import { useRouter } from "next/router";
+
+interface DocsNavbar {
+ slug: string[];
+ setMobileNav: React.Dispatch
>;
+}
function NavItem({
children,
@@ -36,9 +39,10 @@ function NavItem({
);
}
-export function Navbar() {
+export function DocsNavbar({ slug, setMobileNav }: DocsNavbar) {
const [stars, setStars] = React.useState(0);
const [open, setOpen] = React.useState(false);
+ const router = useRouter();
React.useEffect(() => {
window.addEventListener("resize", () => {
@@ -85,42 +89,25 @@ export function Navbar() {
const navbarMenu = (
-
+
Docs
Blocks
- {/* */}
Figma
- Pricing & FAQ
+ Book
+ Blog
-
+
-
+
⌘
@@ -141,12 +128,12 @@ export function Navbar() {
href="https://github.com/creativetimofficial/material-tailwind?ref=material-tailwind"
>
{stars}}
+ value={{stars}}
icon={
}
- className="flex-items-center gap-2 bg-primary py-[3px] !pr-2 text-xs"
+ className="items-center gap-2 border !border-blue-gray-100 bg-white py-1 !pr-2 text-xs text-blue-gray-900"
/>
-
+
+
+
+
);
return (
-
-
+
-
-
-
-
+
+
- Material
Tailwind
-
-
-
-
-
setOpen(!open)}
- >
- {open ? menuCloseIcon : menuOpenIcon}
-
-
- {navbarMenu}
+
+
+ Material
Tailwind
+
+
+
+
+ Documentation
+
+
+
setOpen(!open)}
+ >
+ {open ? menuCloseIcon : menuOpenIcon}
+
+
+ {navbarMenu}
+
-
- {navbarMenu}
-
-
-
+
+
+ {navbarMenu}
+
+
+
+
+
+ {slug.map((el, key) => (
+ -
+ {el}
+ {key === slug.length - 1 ? (
+ ""
+ ) : (
+
+ )}
+
+ ))}
+
+
);
}
-export default Navbar;
+export default DocsNavbar;