From e8bb0e59a67e28fca16985e532b3e29412e56b45 Mon Sep 17 00:00:00 2001
From: Luis Herasme <luis.alberto.herasme.cuevas@gmail.com>
Date: Mon, 12 Aug 2024 16:54:01 -0400
Subject: [PATCH] Mobile menu (#469)

* feat: add mobile menu

* fix: add missing key prop to MobileMenuItem in MobileMenu component

* fix: update menu data to handle empty NEXT_PUBLIC_SUPPORTED_NETWORKS

* refactor: Moves transform to className

* refactor: Update Rotable component to make onClick prop optional

* feat: Update mobile menu component with the requested features

* fix: Add z-index to MobileMenuBackground component

* feat: Improve mobile menu ThemeModeButton

* chore: MobileMenuBackground renames close -> onClose

* chore: MobileMenuBackground renames open -> show

* chore: rename MobileMenu -> SidebarMenu

* chore: rename NavItem.tsx -> Menu.tsx

* refactor: Abstract out the side panel logic

* chore: use onClose instead of setOpen(false)

* chore: rename MobileMenuBackground -> Overlay

* chore: rename NavMenusSection to NavMenus and rename data.tsx to content.tsx

* chore: rename MENU_DATA -> MENU_ITEMS

* chore: renames MenuItem -> NavItem and ExpandibleMenuItem -> ExpandibleNavItem

* chore: Renames MenuItem -> SubItem and removes MenuItemProps

* refactor: reuse NavItem and ExpandibleNavItem types inside Menu.tsx

* chore: remove NavItem.type

* refactor: delegate the responsibility of hiding or displaying the SideMenu to the consumer

* chore: display the mobile menu on the right side of the screen in the homepage

* chore: update sidebar menu to hide only on extra-large (xl) screens

* refactor(web): refactor navigation components:

- Improve components names
- Separate `SidebarNavigationMenu` from `NavigationMenus`
- Re-add `Menu` component to `NavigationMenus` to keep consistency with `SidebarNavigationMenu to keep consistency with `SidebarNavigationMenu``

* feat(web): create side panel context

* fix(web): collapse opened tabs automatically when closing sidebar navigation menu

* fix(web): smooth overlay display

* fix(web): highlight individual navigation items in the sidebar menu when the user is on the corresponding URL route

* chore: add changeset

* style(web): rename animated side panel props

* refactor(web): replace conventional links with nextjs `Link` components in `SidebarNavigationMenu`

---------

Co-authored-by: PJColombo <paulo.colombo@pm.me>
---
 .changeset/silver-dolphins-clean.md           |   5 +
 .../AppLayout/TopBarLayout/CompactTopBar.tsx  |   6 +-
 .../AppLayout/TopBarLayout/TopBar.tsx         |  14 +-
 .../AppLayout/TopBarLayout/index.tsx          |  17 +-
 apps/web/src/components/Button.tsx            |   2 +-
 .../components/NavMenusSection/NavItem.tsx    | 159 ------------------
 .../src/components/NavMenusSection/index.tsx  | 101 -----------
 apps/web/src/components/NavigationMenus.tsx   | 152 +++++++++++++++++
 apps/web/src/components/Rotable.tsx           |   2 +-
 apps/web/src/components/SidePanel.tsx         |  98 +++++++++++
 .../src/components/SidebarNavigationMenu.tsx  | 148 ++++++++++++++++
 apps/web/src/components/content.tsx           | 105 ++++++++++++
 12 files changed, 533 insertions(+), 276 deletions(-)
 create mode 100644 .changeset/silver-dolphins-clean.md
 delete mode 100644 apps/web/src/components/NavMenusSection/NavItem.tsx
 delete mode 100644 apps/web/src/components/NavMenusSection/index.tsx
 create mode 100644 apps/web/src/components/NavigationMenus.tsx
 create mode 100644 apps/web/src/components/SidePanel.tsx
 create mode 100644 apps/web/src/components/SidebarNavigationMenu.tsx
 create mode 100644 apps/web/src/components/content.tsx

diff --git a/.changeset/silver-dolphins-clean.md b/.changeset/silver-dolphins-clean.md
new file mode 100644
index 000000000..42c86504a
--- /dev/null
+++ b/.changeset/silver-dolphins-clean.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added a sidebar navigation menu for smaller screens
diff --git a/apps/web/src/components/AppLayout/TopBarLayout/CompactTopBar.tsx b/apps/web/src/components/AppLayout/TopBarLayout/CompactTopBar.tsx
index dcbe32cb2..2ecf5acea 100644
--- a/apps/web/src/components/AppLayout/TopBarLayout/CompactTopBar.tsx
+++ b/apps/web/src/components/AppLayout/TopBarLayout/CompactTopBar.tsx
@@ -1,16 +1,16 @@
+import { SidebarNavigationMenu } from "~/components/SidebarNavigationMenu";
 import { BlobscanLogo } from "../../BlobscanLogo";
 import { SearchInput } from "../../SearchInput";
-import { ThemeModeButton } from "../../ThemeModeButton";
 import { TopBarSurface } from "./TopBarSurface";
 
 export const CompactTopBar = function () {
   return (
     <>
-      <div className="z-10 sm:hidden">
+      <div className="z-50 sm:hidden">
         <TopBarSurface>
           <div className="flex w-full items-center justify-between">
             <BlobscanLogo className="w-40" />
-            <ThemeModeButton />
+            <SidebarNavigationMenu className="xl:hidden" />
           </div>
         </TopBarSurface>
       </div>
diff --git a/apps/web/src/components/AppLayout/TopBarLayout/TopBar.tsx b/apps/web/src/components/AppLayout/TopBarLayout/TopBar.tsx
index 28bb85c98..d51e29051 100644
--- a/apps/web/src/components/AppLayout/TopBarLayout/TopBar.tsx
+++ b/apps/web/src/components/AppLayout/TopBarLayout/TopBar.tsx
@@ -1,6 +1,7 @@
+import { SidebarNavigationMenu } from "~/components/SidebarNavigationMenu";
 import { BlobscanLogo } from "../../BlobscanLogo";
 import { ExplorerDetails } from "../../ExplorerDetails";
-import { NavMenusSection } from "../../NavMenusSection";
+import { NavigationMenus } from "../../NavigationMenus";
 import { SearchInput } from "../../SearchInput";
 import { ThemeModeButton } from "../../ThemeModeButton";
 import { TopBarSurface } from "./TopBarSurface";
@@ -14,13 +15,18 @@ export const TopBar: React.FC = () => {
             <BlobscanLogo className="w-40" />
           </div>
           <div className="flex grow-[3] items-center justify-end gap-5">
-            <div className="self-end">
-              <NavMenusSection />
+            <div className="hidden xl:block">
+              <NavigationMenus />
             </div>
             <div className="w-full sm:max-w-xl">
               <SearchInput />
             </div>
-            <ThemeModeButton />
+            <div className="hidden xl:block">
+              <ThemeModeButton />
+            </div>
+            <div className="block xl:hidden">
+              <SidebarNavigationMenu />
+            </div>
           </div>
         </div>
       </TopBarSurface>
diff --git a/apps/web/src/components/AppLayout/TopBarLayout/index.tsx b/apps/web/src/components/AppLayout/TopBarLayout/index.tsx
index 0de5d748a..2c7e79fa9 100644
--- a/apps/web/src/components/AppLayout/TopBarLayout/index.tsx
+++ b/apps/web/src/components/AppLayout/TopBarLayout/index.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 
+import { SidebarNavigationMenu } from "~/components/SidebarNavigationMenu";
 import { ThemeModeButton } from "~/components/ThemeModeButton";
 import { useIsHomepage } from "~/hooks/useIsHomePage";
 import { ExplorerDetails } from "../../ExplorerDetails";
-import { NavMenusSection } from "../../NavMenusSection";
+import { NavigationMenus } from "../../NavigationMenus";
 import { CompactTopBar } from "./CompactTopBar";
 import { TopBar } from "./TopBar";
 
@@ -12,19 +13,21 @@ export const TopBarLayout: React.FC = () => {
 
   if (isHomepage) {
     return (
-      <nav className="z-10 flex h-16 w-full items-center justify-between px-4">
+      <nav className="z-10 flex h-16 w-full items-center justify-end px-4 md:justify-between">
         <div className="hidden w-full md:flex">
           <ExplorerDetails />
         </div>
         <div className="flex items-center gap-3">
-          <NavMenusSection />
-          <div className="relative -top-[2px] hidden md:block">
+          <div className=" xl:hidden">
+            <SidebarNavigationMenu />
+          </div>
+          <div className="hidden xl:flex">
+            <NavigationMenus />
+          </div>
+          <div className="relative hidden xl:block">
             <ThemeModeButton />
           </div>
         </div>
-        <div className="relative -top-[2px] md:hidden">
-          <ThemeModeButton />
-        </div>
       </nav>
     );
   }
diff --git a/apps/web/src/components/Button.tsx b/apps/web/src/components/Button.tsx
index 3de025fb2..50fb103bf 100644
--- a/apps/web/src/components/Button.tsx
+++ b/apps/web/src/components/Button.tsx
@@ -136,7 +136,7 @@ export const Button: FC<ButtonProps> = function ({
       onClick={onClick}
     >
       <div className="flex h-full items-center gap-1">
-        {icon && <div className="h-full">{icon}</div>}
+        {icon && <div className="h-full w-full">{icon}</div>}
         {label}
       </div>
     </button>
diff --git a/apps/web/src/components/NavMenusSection/NavItem.tsx b/apps/web/src/components/NavMenusSection/NavItem.tsx
deleted file mode 100644
index c7ffe916c..000000000
--- a/apps/web/src/components/NavMenusSection/NavItem.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { Fragment, useEffect, useRef, useState } from "react";
-import type { FC, ReactNode } from "react";
-import Link from "next/link";
-import { Popover, Transition } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
-
-import { useHover } from "~/hooks/useHover";
-
-type MenuItemProps = {
-  href: string;
-  label: string;
-  icon?: ReactNode;
-  isLast?: boolean;
-};
-
-const MenuItem: FC<MenuItemProps> = function ({
-  href,
-  label,
-  icon,
-  isLast = false,
-}) {
-  return (
-    <Popover.Button as={Link} href={href}>
-      <div
-        className={`px-4 py-2 transition-all ${
-          isLast && "rounded-b-lg"
-        } hover:bg-primary-300 hover:text-content-light/60 hover:dark:bg-iconHighlight-dark/80 hover:dark:text-content-dark`}
-      >
-        {icon}
-        <div className="text-xs">{label}</div>
-      </div>
-    </Popover.Button>
-  );
-};
-
-const NavItemBase: FC<{
-  label: ReactNode;
-  icon: ReactNode;
-  isHovered: boolean;
-}> = function ({ label, icon, isHovered }) {
-  return (
-    <div
-      className={`flex items-center gap-1 ${
-        isHovered
-          ? "text-iconHighlight-light dark:text-iconHighlight-dark"
-          : "text-content-light dark:text-content-dark"
-      }  text-sm transition-colors`}
-    >
-      <div className="h-4 w-4">{icon}</div>
-      {label}
-    </div>
-  );
-};
-
-type NavItemProps = {
-  label: string;
-  icon?: ReactNode;
-  menuItems?: { label: string; href: string; icon?: ReactNode }[];
-  href?: string;
-};
-
-export const NavItem: FC<NavItemProps> = function ({
-  label,
-  menuItems,
-  icon,
-  href,
-}) {
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const [popoverAlignment, setPopoverAlignment] = useState("left-0");
-  const isHovered = useHover(popoverRef);
-  const hasItems = menuItems && !!menuItems.length;
-
-  useEffect(() => {
-    if (popoverRef.current && hasItems && isHovered) {
-      const popoverRect = popoverRef.current.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-
-      // Check if the popover would overflow the right edge of the viewport
-      if (popoverRect.right + 150 > viewportWidth) {
-        setPopoverAlignment("right-0");
-      } else {
-        setPopoverAlignment("left-0");
-      }
-    }
-  }, [isHovered, hasItems]);
-
-  if (href && !hasItems) {
-    return (
-      <div ref={popoverRef}>
-        <Link href={href}>
-          <NavItemBase label={label} icon={icon} isHovered={isHovered} />
-        </Link>
-      </div>
-    );
-  }
-
-  return (
-    <Popover ref={popoverRef} className="relative">
-      {() => {
-        return (
-          <>
-            <Popover.Button>
-              <NavItemBase
-                label={
-                  <>
-                    {label}
-                    <ChevronDownIcon
-                      className={`h-3 w-3 font-bold group-hover:text-opacity-80`}
-                      aria-hidden="true"
-                    />
-                  </>
-                }
-                icon={icon}
-                isHovered={isHovered}
-              />
-              {/*
-                    Empty div that allows us to move the cursor down to the menu without
-                    without losing the hover state on the button
-                */}
-              <div className="h-4 w-full md:absolute" />
-            </Popover.Button>
-
-            {hasItems && (
-              <Transition
-                show={isHovered}
-                as={Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
-                <Popover.Panel
-                  className={`${popoverAlignment} top-8 z-10 w-44 md:absolute`}
-                  static
-                >
-                  <div className="rounded-b-lg border-t-4 border-t-primary-400 bg-surface-light text-contentSecondary-light shadow-xl  shadow-primary-400/30 dark:border-t-primary-400 dark:bg-surface-dark dark:text-contentSecondary-dark  dark:shadow-lg dark:shadow-primary-800/20">
-                    <div className="flex flex-col flex-nowrap gap-1">
-                      {menuItems.map((item, index) => (
-                        <MenuItem
-                          key={index}
-                          href={item.href}
-                          label={item.label}
-                          icon={item.icon}
-                          isLast={index === menuItems.length - 1}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                </Popover.Panel>
-              </Transition>
-            )}
-          </>
-        );
-      }}
-    </Popover>
-  );
-};
diff --git a/apps/web/src/components/NavMenusSection/index.tsx b/apps/web/src/components/NavMenusSection/index.tsx
deleted file mode 100644
index 1f30de2ba..000000000
--- a/apps/web/src/components/NavMenusSection/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useState } from "react";
-import {
-  Bars3Icon,
-  BookOpenIcon,
-  ChartBarIcon,
-  CommandLineIcon,
-  Squares2X2Icon,
-  XMarkIcon,
-} from "@heroicons/react/24/solid";
-
-import { env } from "~/env.mjs";
-import EthereumIcon from "~/icons/ethereum.svg";
-import {
-  buildBlobStatsRoute,
-  buildBlockStatsRoute,
-  buildBlocksRoute,
-  buildTransactionStatsRoute,
-  buildTransactionsRoute,
-  buildBlobsRoute,
-} from "~/utils";
-import { Button } from "../Button";
-import { NavItem } from "./NavItem";
-
-const resolveApiUrl = () =>
-  env.NEXT_PUBLIC_NETWORK_NAME === "mainnet"
-    ? "https://api.blobscan.com"
-    : `https://api.${env.NEXT_PUBLIC_NETWORK_NAME}.blobscan.com`;
-
-export const NavMenusSection: React.FC = () => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-
-  return (
-    <div className="relative mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
-      <Button
-        className={`md:hidden ${
-          isMobileMenuOpen
-            ? "stroke-controlBorderActive-light dark:stroke-controlBorderActive-dark"
-            : ""
-        }`}
-        variant="icon"
-        icon={isMobileMenuOpen ? <XMarkIcon /> : <Bars3Icon />}
-        aria-expanded={isMobileMenuOpen}
-        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-      />
-      <div
-        className={`fixed inset-x-0 top-0 z-50 mt-14 transform ${
-          isMobileMenuOpen ? "block" : "hidden"
-        } md:relative md:top-auto md:mt-0 md:block`}
-        id="navbar-dropdown"
-      >
-        <div className="mx-auto w-full max-w-md rounded-lg bg-surface-light p-4 shadow-lg md:max-w-screen-xl md:bg-transparent md:p-0 md:shadow-none">
-          <div className="flex flex-col gap-4 md:flex-row">
-            <NavItem
-              label="Blockchain"
-              icon={<Squares2X2Icon />}
-              menuItems={[
-                { label: "Blobs", href: buildBlobsRoute() },
-                { label: "Blocks", href: buildBlocksRoute() },
-                { label: "Transactions", href: buildTransactionsRoute() },
-              ]}
-            />
-            <NavItem
-              label="Stats"
-              icon={<ChartBarIcon />}
-              menuItems={[
-                {
-                  label: "Blob Metrics",
-                  href: buildBlobStatsRoute(),
-                },
-                { label: "Block Metrics", href: buildBlockStatsRoute() },
-                {
-                  label: "Transaction Metrics",
-                  href: buildTransactionStatsRoute(),
-                },
-              ]}
-            />
-            {!!env.NEXT_PUBLIC_SUPPORTED_NETWORKS?.length && (
-              <NavItem
-                label="Networks"
-                icon={<EthereumIcon />}
-                menuItems={JSON.parse(
-                  env.NEXT_PUBLIC_SUPPORTED_NETWORKS || "[]"
-                )}
-              />
-            )}
-            <NavItem
-              label="API"
-              icon={<CommandLineIcon />}
-              href={resolveApiUrl()}
-            />
-            <NavItem
-              label="Docs"
-              icon={<BookOpenIcon />}
-              href="https://docs.blobscan.com"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/web/src/components/NavigationMenus.tsx b/apps/web/src/components/NavigationMenus.tsx
new file mode 100644
index 000000000..b3eecc067
--- /dev/null
+++ b/apps/web/src/components/NavigationMenus.tsx
@@ -0,0 +1,152 @@
+import type { FC, ReactNode } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+
+import { useHover } from "~/hooks/useHover";
+import type { ExpandibleNavigationItem, NavigationItem } from "./content";
+import { NAVIGATION_ITEMS, isExpandibleNavigationItem } from "./content";
+
+export const NavigationMenus: FC = () => {
+  return (
+    <div className="items-center gap-4 xl:flex">
+      {NAVIGATION_ITEMS.map((item) =>
+        isExpandibleNavigationItem(item) ? (
+          <NavigationLinksMenu key={item.label} {...item} />
+        ) : (
+          <NavigationLink key={item.label} {...item} />
+        )
+      )}
+    </div>
+  );
+};
+
+const NavigationLinkBase: FC<{
+  label: ReactNode;
+  icon: ReactNode;
+  isHovered: boolean;
+}> = function ({ label, icon, isHovered }) {
+  return (
+    <div
+      className={`flex items-center gap-1 ${
+        isHovered
+          ? "text-iconHighlight-light dark:text-iconHighlight-dark"
+          : "text-content-light dark:text-content-dark"
+      }  text-sm transition-colors`}
+    >
+      <div className="h-4 w-4">{icon}</div>
+      {label}
+    </div>
+  );
+};
+
+export type NavigationLinkProps = NavigationItem;
+
+const NavigationLink: FC<NavigationLinkProps> = function NavigationItem({
+  label,
+  href,
+  icon,
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <Link
+      href={href}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <NavigationLinkBase label={label} icon={icon} isHovered={isHovered} />
+    </Link>
+  );
+};
+
+type NavigationLinkMenuProps = ExpandibleNavigationItem;
+
+const NavigationLinksMenu: FC<NavigationLinkMenuProps> =
+  function ExpandableNavigationItem({ label, icon, items }) {
+    const popoverRef = useRef<HTMLDivElement>(null);
+    const [popoverAlignment, setPopoverAlignment] = useState("left-0");
+    const isHovered = useHover(popoverRef);
+
+    useEffect(() => {
+      if (popoverRef.current && isHovered) {
+        const popoverRect = popoverRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+
+        // Check if the popover would overflow the right edge of the viewport
+        if (popoverRect.right + 150 > viewportWidth) {
+          setPopoverAlignment("right-0");
+        } else {
+          setPopoverAlignment("left-0");
+        }
+      }
+    }, [isHovered]);
+
+    return (
+      <Popover
+        ref={popoverRef}
+        className="relative flex items-center justify-center"
+      >
+        {() => {
+          return (
+            <>
+              <PopoverButton>
+                <NavigationLinkBase
+                  label={
+                    <>
+                      {label}
+                      <ChevronDownIcon
+                        className={`h-3 w-3 font-bold group-hover:text-opacity-80`}
+                        aria-hidden="true"
+                      />
+                    </>
+                  }
+                  icon={icon}
+                  isHovered={isHovered}
+                />
+                {/*
+                    Empty div that allows us to move the cursor down to the menu without
+                    without losing the hover state on the button
+              */}
+                <div className="h-4 w-full md:absolute" />
+              </PopoverButton>
+
+              <Transition
+                show={isHovered}
+                as={Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <PopoverPanel
+                  className={`${popoverAlignment} top-8 z-10 w-44 md:absolute`}
+                  static
+                >
+                  <div className="overflow-hidden rounded-b-lg border-t-4 border-t-primary-400 bg-surface-light text-contentSecondary-light shadow-xl shadow-primary-400/30 dark:border-t-primary-400 dark:bg-surface-dark dark:text-contentSecondary-dark dark:shadow-lg dark:shadow-primary-800/20">
+                    <div className="flex flex-col flex-nowrap gap-1">
+                      {items.map(({ href, label }, index) => (
+                        <PopoverButton key={index} as={Link} href={href}>
+                          <div className="px-4 py-2 transition-all hover:bg-primary-300 hover:text-content-light/60 hover:dark:bg-iconHighlight-dark/80 hover:dark:text-content-dark">
+                            <div className="text-xs">{label}</div>
+                          </div>
+                        </PopoverButton>
+                      ))}
+                    </div>
+                  </div>
+                </PopoverPanel>
+              </Transition>
+            </>
+          );
+        }}
+      </Popover>
+    );
+  };
diff --git a/apps/web/src/components/Rotable.tsx b/apps/web/src/components/Rotable.tsx
index 8eaed909d..9868b4585 100644
--- a/apps/web/src/components/Rotable.tsx
+++ b/apps/web/src/components/Rotable.tsx
@@ -5,7 +5,7 @@ export type RotableProps = {
   children: ReactNode;
   rotated: boolean;
   angle: number;
-  onClick(): void;
+  onClick?: () => void;
 };
 
 export const Rotable: FC<RotableProps> = function ({
diff --git a/apps/web/src/components/SidePanel.tsx b/apps/web/src/components/SidePanel.tsx
new file mode 100644
index 000000000..4e2041e4e
--- /dev/null
+++ b/apps/web/src/components/SidePanel.tsx
@@ -0,0 +1,98 @@
+import type { ReactNode } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+import { animated, useSpring } from "@react-spring/web";
+import cn from "classnames";
+
+type SidePanelContextValues = {
+  status: "opened" | "closed" | "opening" | "closing";
+};
+
+const SidePanelContext = createContext<SidePanelContextValues | null>(null);
+
+export function SidePanel({
+  open,
+  onClose,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  const [status, setStatus] = useState<SidePanelContextValues["status"]>(
+    open ? "opened" : "closed"
+  );
+  const props = useSpring({
+    from: { left: "-100%" },
+    left: open ? "0" : "-100%",
+    onStart() {
+      setStatus(open ? "opening" : "closing");
+    },
+    onRest() {
+      setStatus(open ? "opened" : "closed");
+    },
+  });
+
+  // Closes the side panel when the "Escape" key is pressed
+  useEffect(() => {
+    const keydownHandler = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", keydownHandler);
+
+    return () => {
+      document.removeEventListener("keydown", keydownHandler);
+    };
+  }, [onClose]);
+
+  return (
+    <>
+      <Overlay show={open} onClose={onClose} />
+
+      <animated.div
+        className={`fixed top-0 z-50 h-full w-[80%] max-w-[400px] overflow-y-auto border-r border-black border-opacity-20 bg-background-light dark:bg-background-dark`}
+        style={props}
+      >
+        <SidePanelContext.Provider value={{ status }}>
+          {children}
+        </SidePanelContext.Provider>
+      </animated.div>
+    </>
+  );
+}
+
+export function useSidePanel() {
+  const value = useContext(SidePanelContext);
+
+  if (!value) {
+    throw new Error("useSidePanel() must be used within a SidePanel component");
+  }
+
+  return value;
+}
+
+function Overlay({ show, onClose }: { show: boolean; onClose: () => void }) {
+  const props = useSpring({
+    from: { opacity: 0 },
+    to: { opacity: show ? 0.8 : 0 },
+  });
+
+  return (
+    <animated.div
+      className={cn("fixed left-0 top-0 z-10 h-full w-full bg-black", {
+        "pointer-events-none": !show,
+      })}
+      style={props}
+      onClick={onClose}
+      tabIndex={0}
+      role="button"
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          onClose();
+        }
+      }}
+    />
+  );
+}
diff --git a/apps/web/src/components/SidebarNavigationMenu.tsx b/apps/web/src/components/SidebarNavigationMenu.tsx
new file mode 100644
index 000000000..d2cfd260e
--- /dev/null
+++ b/apps/web/src/components/SidebarNavigationMenu.tsx
@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon } from "@heroicons/react/24/solid";
+import cn from "classnames";
+
+import { BlobscanLogo } from "./BlobscanLogo";
+import { Button } from "./Button";
+import { Collapsable } from "./Collapsable";
+import { Rotable } from "./Rotable";
+import { SidePanel, useSidePanel } from "./SidePanel";
+import { ThemeModeButton } from "./ThemeModeButton";
+import type { ExpandibleNavigationItem, NavigationItem } from "./content";
+import { isExpandibleNavigationItem, NAVIGATION_ITEMS } from "./content";
+
+export function SidebarNavigationMenu({ className }: { className?: string }) {
+  const [open, setOpen] = useState(false);
+
+  const openSidebar = useCallback(() => setOpen(true), []);
+
+  const closeSidebar = useCallback(() => setOpen(false), []);
+
+  return (
+    <div className={className}>
+      <Button variant="icon" onClick={openSidebar} icon={<Bars3Icon />} />
+      <SidePanel open={open} onClose={closeSidebar}>
+        <div className="p-4 pb-16">
+          <BlobscanLogo className="mb-8 mt-4 w-40" />
+          <div className="flex flex-col justify-center gap-2 opacity-80">
+            {NAVIGATION_ITEMS.map((item, i) =>
+              isExpandibleNavigationItem(item) ? (
+                <ExpandableNavigationLinks
+                  key={`${item.label}-${i}`}
+                  {...item}
+                  onClick={closeSidebar}
+                />
+              ) : (
+                <NavigationLink
+                  key={`${item.label}-${i}`}
+                  {...item}
+                  onClick={closeSidebar}
+                />
+              )
+            )}
+          </div>
+        </div>
+
+        <div className="absolute bottom-4 left-4">
+          <ThemeModeButton />
+        </div>
+      </SidePanel>
+    </div>
+  );
+}
+
+type NavigationLinkProps = NavigationItem & { onClick?: () => void };
+
+function NavigationLink({
+  label,
+  href,
+  icon,
+  onClick = () => {
+    // Do nothing
+  },
+}: NavigationLinkProps) {
+  const pathname = usePathname();
+  const isSelected = href === pathname;
+
+  return (
+    <Link
+      className={cn(
+        "flex cursor-pointer items-center gap-1 p-2 duration-200 hover:text-iconHighlight-light hover:dark:text-iconHighlight-dark",
+        {
+          "border bg-iconHighlight-dark bg-opacity-10 text-iconHighlight-light dark:text-iconHighlight-dark":
+            isSelected,
+        }
+      )}
+      href={href}
+      onClick={onClick}
+    >
+      <div className="h-5 w-5">{icon}</div>
+      {label}
+    </Link>
+  );
+}
+
+type ExpandableNavigationLinksProps = ExpandibleNavigationItem & {
+  onClick?: () => void;
+};
+
+function ExpandableNavigationLinks({
+  label,
+  icon,
+  items,
+  onClick = () => {
+    // Do nothing
+  },
+}: ExpandableNavigationLinksProps) {
+  const { status } = useSidePanel();
+  const pathname = usePathname();
+  const [open, setOpen] = useState(items.some((x) => x.href === pathname));
+
+  useEffect(() => {
+    if (status === "closed") {
+      setOpen(items.some((x) => x.href === pathname));
+    }
+  }, [items, pathname, status]);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen((value) => !value)}
+        className={`flex w-full items-center gap-3 rounded border-iconHighlight-dark border-opacity-20 bg-opacity-20 p-2 duration-300 ${
+          open
+            ? "border bg-iconHighlight-dark bg-opacity-10 text-iconHighlight-light dark:text-iconHighlight-dark"
+            : ""
+        }`}
+      >
+        <Rotable angle={90} rotated={open}>
+          <ChevronDownIcon className="mb-2 h-5 w-5 -rotate-90" />
+        </Rotable>
+        <div className="flex items-center gap-1">
+          <div className="h-5 w-5">{icon}</div>
+          {label}
+        </div>
+      </button>
+      <Collapsable opened={open}>
+        <div className="flex flex-col gap-2 pb-4 pl-10 pt-2">
+          {items.map(({ href, label }, index) => (
+            <Link
+              key={index}
+              href={href}
+              className={`text-sm ${
+                href === pathname
+                  ? "text-iconHighlight-light dark:text-iconHighlight-dark"
+                  : "hover:text-iconHighlight-light hover:dark:text-iconHighlight-dark"
+              }`}
+              onClick={onClick}
+            >
+              {label}
+            </Link>
+          ))}
+        </div>
+      </Collapsable>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/content.tsx b/apps/web/src/components/content.tsx
new file mode 100644
index 000000000..02cc0d98e
--- /dev/null
+++ b/apps/web/src/components/content.tsx
@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+import {
+  BookOpenIcon,
+  ChartBarIcon,
+  CommandLineIcon,
+  Squares2X2Icon,
+} from "@heroicons/react/24/solid";
+
+import { env } from "~/env.mjs";
+import EthereumIcon from "~/icons/ethereum.svg";
+import {
+  buildBlobStatsRoute,
+  buildBlockStatsRoute,
+  buildBlocksRoute,
+  buildTransactionStatsRoute,
+  buildTransactionsRoute,
+  buildBlobsRoute,
+} from "~/utils";
+
+function resolveApiUrl(): string {
+  if (env.NEXT_PUBLIC_NETWORK_NAME === "mainnet") {
+    return "https://api.blobscan.com";
+  }
+
+  return `https://api.${env.NEXT_PUBLIC_NETWORK_NAME}.blobscan.com`;
+}
+
+export type NavigationItem = {
+  label: string;
+  href: string;
+  icon: ReactNode;
+};
+
+export type ExpandibleNavigationItem = {
+  label: string;
+  icon: ReactNode;
+  items: ExpandibleNavigationSubItem[];
+};
+
+export type ExpandibleNavigationSubItem = {
+  label: string;
+  href: string;
+};
+
+export function isExpandibleNavigationItem(
+  item: unknown
+): item is ExpandibleNavigationItem {
+  return typeof item === "object" && item !== null && "items" in item;
+}
+
+export const NAVIGATION_ITEMS: Array<
+  NavigationItem | ExpandibleNavigationItem
+> = [
+  {
+    label: "Blockchain",
+    icon: <Squares2X2Icon />,
+    items: [
+      {
+        label: "Blobs",
+        href: buildBlobsRoute(),
+      },
+      {
+        label: "Blocks",
+        href: buildBlocksRoute(),
+      },
+      {
+        label: "Transactions",
+        href: buildTransactionsRoute(),
+      },
+    ],
+  },
+  {
+    label: "Stats",
+    icon: <ChartBarIcon />,
+    items: [
+      {
+        label: "Blob Metrics",
+        href: buildBlobStatsRoute(),
+      },
+      {
+        label: "Block Metrics",
+        href: buildBlockStatsRoute(),
+      },
+      {
+        label: "Transaction Metrics",
+        href: buildTransactionStatsRoute(),
+      },
+    ],
+  },
+  {
+    label: "Networks",
+    icon: <EthereumIcon />,
+    items: JSON.parse(env.NEXT_PUBLIC_SUPPORTED_NETWORKS || "[]"),
+  },
+  {
+    label: "API",
+    icon: <CommandLineIcon />,
+    href: resolveApiUrl(),
+  },
+  {
+    label: "Docs",
+    icon: <BookOpenIcon />,
+    href: "https://docs.blobscan.com",
+  },
+];