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

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added a sidebar navigation menu for smaller screens

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>

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>

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>
     );
   }

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>