+ The Cardano blockchain offers robust security, but starting up a new
+ node, syncing it with the network, or exchanging data can be slow and
+ resource intensive (24GB of RAM, 150GB (and growing) of storage, and
+ over 24 hours for initial synchronization.)
+
+
+ Mithril was developed for Cardano as part of the Basho development
+ phase to support optimization, scalability, and interoperability.
+
+
+
+
+ );
+}
diff --git a/docs/website/src/theme/Navbar/Layout/styles.module.css b/docs/website/src/theme/Navbar/Layout/styles.module.css
new file mode 100644
index 00000000000..e72891a44ff
--- /dev/null
+++ b/docs/website/src/theme/Navbar/Layout/styles.module.css
@@ -0,0 +1,7 @@
+.navbarHideable {
+ transition: transform var(--ifm-transition-fast) ease;
+}
+
+.navbarHidden {
+ transform: translate3d(0, calc(-100% - 2px), 0);
+}
diff --git a/docs/website/src/theme/Navbar/MobileSidebar/Header/index.tsx b/docs/website/src/theme/Navbar/MobileSidebar/Header/index.tsx
new file mode 100644
index 00000000000..b2af39a48a7
--- /dev/null
+++ b/docs/website/src/theme/Navbar/MobileSidebar/Header/index.tsx
@@ -0,0 +1,34 @@
+import React, { type ReactNode } from "react";
+import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
+import { translate } from "@docusaurus/Translate";
+import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
+import IconClose from "@theme/Icon/Close";
+import NavbarLogo from "@theme/Navbar/Logo";
+
+function CloseButton() {
+ const mobileSidebar = useNavbarMobileSidebar();
+ return (
+
+ );
+}
+
+export default function NavbarMobileSidebarHeader(): ReactNode {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx
new file mode 100644
index 00000000000..18659aa1846
--- /dev/null
+++ b/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -0,0 +1,25 @@
+import React, { type ReactNode } from "react";
+import clsx from "clsx";
+import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal";
+import type { Props } from "@theme/Navbar/MobileSidebar/Layout";
+
+export default function NavbarMobileSidebarLayout({
+ header,
+ primaryMenu,
+ secondaryMenu,
+}: Props): ReactNode {
+ const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
+ return (
+
+ {header}
+
+
{primaryMenu}
+
{secondaryMenu}
+
+
+ );
+}
diff --git a/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
new file mode 100644
index 00000000000..4e8f3d918c6
--- /dev/null
+++ b/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -0,0 +1,40 @@
+import React, { type ReactNode } from "react";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
+import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
+import Discord from "../../../../components/icons/Discord";
+
+function useNavbarItems() {
+ // TODO temporary casting until ThemeConfig type is improved
+ return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+// The primary menu displays the navbar items
+export default function NavbarMobilePrimaryMenu(): ReactNode {
+ const mobileSidebar = useNavbarMobileSidebar();
+
+ // TODO how can the order be defined for mobile?
+ // Should we allow providing a different list of items?
+ const items = useNavbarItems();
+
+ return (
+