Mobile menu #469

luis-herasme · 2024-07-31T22:27:38Z

Checklist

My change requires a documentation update, and I have done it.
I have added tests to cover my changes.
I have filled out the description and linked the related issues.

Description

Adds MobileMenu component.
Refactored the menu data out of the menu so that the normal menu and the mobile menu can share the same data.
Fixes a small error inside the button component of the icon variant, causing the icon to have a width of zero

Related Issue

Closes #436

Screenshots:

Update:

2024-08-01.18-57-20.mp4

changeset-bot · 2024-07-31T22:27:41Z

🦋 Changeset detected

Latest commit: 61703fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@blobscan/web	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2024-07-31T22:27:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blobscan-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 11, 2024 5:45pm
blobscan-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 11, 2024 5:45pm

4 Skipped Deployments

Name	Status	Preview	Updated (UTC)
blobscan-gnosis	⬜️ Ignored (Inspect)	Visit Preview	Aug 11, 2024 5:45pm
blobscan-holesky	⬜️ Ignored (Inspect)	Visit Preview	Aug 11, 2024 5:45pm
blobscan-mainnet	⬜️ Ignored (Inspect)	Visit Preview	Aug 11, 2024 5:45pm
blobscan-sepolia	⬜️ Ignored (Inspect)	Visit Preview	Aug 11, 2024 5:45pm

github-actions · 2024-07-31T22:36:08Z

📦 Next.js Bundle Analysis for @blobscan/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`264.41 KB` (🟡 +18.79 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Ten Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/`	`352.23 KB`	616.64 KB	176.18% (🟢 -4.88%)
`/address/[address]`	`26.62 KB`	291.03 KB	83.15% (🟢 -4.89%)
`/blob/[hash]`	`25.31 KB`	289.73 KB	82.78% (🟢 -4.89%)
`/blobs`	`15.76 KB`	280.17 KB	80.05% (🟢 -4.88%)
`/block/[id]`	`11.76 KB`	276.17 KB	78.91% (🟢 -4.89%)
`/blocks`	`13.49 KB`	277.9 KB	79.40% (🟢 -4.88%)
`/stats/blob`	`336.46 KB`	600.87 KB	171.68% (🟢 -4.81%)
`/stats/block`	`337.48 KB`	601.89 KB	171.97% (🟢 -4.81%)
`/stats/tx`	`336.58 KB`	601 KB	171.71% (🟢 -4.80%)
`/txs`	`20.03 KB`	284.44 KB	81.27% (🟢 -4.88%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

codecov · 2024-07-31T22:36:18Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (main@f631c7c). Learn more about missing BASE report.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #469   +/-   ##
=======================================
  Coverage        ?   89.83%           
=======================================
  Files           ?      146           
  Lines           ?     9630           
  Branches        ?     1020           
=======================================
  Hits            ?     8651           
  Misses          ?      979           
  Partials        ?        0

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

apps/web/src/components/NavMenusSection/MobileMenu.tsx

PJColombo

Looking good!

There are some ideas I had in mind for this. I forgot to add the necessary context to this issue :/.

PJColombo · 2024-08-01T16:08:59Z

Another issue: the menu is not showing in the top bar for any section other than the homepage.

PJColombo · 2024-08-01T16:10:57Z

I updated the issue with the design that I had in mind

PJColombo

Nice job!

It’s starting to take shape nicely.

I feel the current components can get some extra refactoring: rename some of them, abstract the side panel logic, restructure them, etc.

apps/web/src/components/AppLayout/TopBarLayout/CompactTopBar.tsx

apps/web/src/components/NavMenusSection/MobileMenu.tsx

apps/web/src/components/Rotable.tsx

apps/web/src/components/NavMenusSection/NavItem.tsx

apps/web/src/components/NavMenusSection/data.tsx

apps/web/src/components/NavMenusSection/MobileMenu.tsx

… homepage

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

…igation menu

…hen the user is on the corresponding URL route

PJColombo · 2024-08-11T10:24:18Z

Nice job!

I pushed a few commits fixing some extra things.

Some things I'd like to point out:

I made some component renaming changes.
I rollbacked the change I requested about separating all NavItem components from the NavigationMenus and I put them back again there to maintain consistency with the SidebarNavigationMenu component, where the navigation components are also kept within the same file.

PJColombo

LGTM!. Waiting for another approve so we can merge this

apps/web/src/components/NavMenusSection/index.tsx

apps/web/src/components/NavMenus.tsx

PabloCastellano

looks good at preview

…ts in `SidebarNavigationMenu`

xFJA · 2024-08-01T13:06:58Z

apps/web/src/components/NavMenusSection/MobileMenu.tsx

+        transition: "transform 0.6s",
+      }}
+    >
+      <div>


Could we use <> fragment instead?

This component is actually outdated

xFJA · 2024-08-01T13:09:31Z

apps/web/src/components/NavMenusSection/MobileMenu.tsx

+  }
+
+  return (
+    <div>


Suggested change

<div>

<>

I would use fragment instead as we avoid to add an unnecessary div in the DOM tree

This component is actually outdated

luis-herasme added 2 commits July 31, 2024 17:56

feat: add mobile menu

5c475ae

fix: add missing key prop to MobileMenuItem in MobileMenu component

97beee2

luis-herasme requested review from PabloCastellano and PJColombo July 31, 2024 22:27

fix: update menu data to handle empty NEXT_PUBLIC_SUPPORTED_NETWORKS

6fdba2f

luis-herasme requested a review from xFJA July 31, 2024 22:36

vercel bot deployed to Preview – blobscan-staging July 31, 2024 22:37 View deployment

xFJA reviewed Aug 1, 2024

View reviewed changes

apps/web/src/components/NavMenusSection/MobileMenu.tsx Outdated Show resolved Hide resolved

refactor: Moves transform to className

07da7ef

vercel bot deployed to Preview – blobscan-staging August 1, 2024 14:51 View deployment

PJColombo requested changes Aug 1, 2024

View reviewed changes

luis-herasme added 2 commits August 1, 2024 18:14

refactor: Update Rotable component to make onClick prop optional

77898f2

feat: Update mobile menu component with the requested features

c19e2fb

vercel bot deployed to Preview – blobscan-staging August 1, 2024 22:19 View deployment

fix: Add z-index to MobileMenuBackground component

b0305d3

vercel bot deployed to Preview – blobscan-staging August 1, 2024 22:34 View deployment

feat: Improve mobile menu ThemeModeButton

f390367

luis-herasme requested a review from PJColombo August 1, 2024 22:56

vercel bot deployed to Preview – blobscan-staging August 1, 2024 22:59 View deployment

PJColombo requested changes Aug 2, 2024

View reviewed changes

luis-herasme added 2 commits August 2, 2024 11:09

chore: MobileMenuBackground renames close -> onClose

5c98023

chore: MobileMenuBackground renames open -> show

1411ead

vercel bot deployed to Preview – blobscan-staging August 2, 2024 15:17 View deployment

chore: rename MobileMenu -> SidebarMenu

0a5511c

vercel bot deployed to Preview – blobscan-docs August 2, 2024 17:04 View deployment

vercel bot deployed to Preview – blobscan-staging August 2, 2024 17:07 View deployment

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

4cb79f7

… homepage

vercel bot deployed to Preview – blobscan-staging August 2, 2024 19:11 View deployment

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

1fe3a0e

vercel bot deployed to Preview – blobscan-staging August 2, 2024 19:25 View deployment

luis-herasme requested a review from PJColombo August 2, 2024 19:28

PabloCastellano changed the base branch from next to main August 6, 2024 16:03

PJColombo added 4 commits August 9, 2024 21:17

refactor(web): refactor navigation components:

00a04fb

- 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

ed4c4c0

fix(web): collapse opened tabs automatically when closing sidebar nav…

a22e1a0

…igation menu

fix(web): smooth overlay display

64b6664

vercel bot deployed to Preview – blobscan-staging August 11, 2024 09:45 View deployment

fix(web): highlight individual navigation items in the sidebar menu w…

1f517b3

…hen the user is on the corresponding URL route

vercel bot deployed to Preview – blobscan-staging August 11, 2024 10:03 View deployment

PJColombo added 2 commits August 11, 2024 12:03

chore: add changeset

0a4cdba

style(web): rename animated side panel props

72fccf8

vercel bot had a problem deploying to Preview – blobscan-staging August 11, 2024 10:18 Failure

PJColombo approved these changes Aug 11, 2024

View reviewed changes

apps/web/src/components/NavMenusSection/index.tsx Outdated Show resolved Hide resolved

apps/web/src/components/NavMenus.tsx Outdated Show resolved Hide resolved

PabloCastellano approved these changes Aug 11, 2024

View reviewed changes

refactor(web): replace conventional links with nextjs Link componen…

61703fc

…ts in `SidebarNavigationMenu`

vercel bot deployed to Preview – blobscan-docs August 11, 2024 17:30 View deployment

vercel bot deployed to Preview – blobscan-staging August 11, 2024 17:32 View deployment

xFJA approved these changes Aug 11, 2024

View reviewed changes

luis-herasme merged commit e8bb0e5 into main Aug 12, 2024
14 checks passed

github-actions bot mentioned this pull request Aug 12, 2024

chore: version packages #489

Merged

PJColombo deleted the mobile-menu branch August 12, 2024 22:39

PJColombo restored the mobile-menu branch October 29, 2024 11:30

PJColombo deleted the mobile-menu branch October 29, 2024 11:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mobile menu #469

Mobile menu #469

luis-herasme commented Jul 31, 2024 •

edited

Loading

changeset-bot bot commented Jul 31, 2024 •

edited

Loading

vercel bot commented Jul 31, 2024 •

edited

Loading

github-actions bot commented Jul 31, 2024 •

edited

Loading

codecov bot commented Jul 31, 2024 •

edited

Loading

PJColombo left a comment

PJColombo commented Aug 1, 2024

PJColombo commented Aug 1, 2024

PJColombo left a comment •

edited

Loading

PJColombo commented Aug 11, 2024 •

edited

Loading

PJColombo left a comment

PabloCastellano left a comment

xFJA Aug 1, 2024

PJColombo Aug 11, 2024

xFJA Aug 1, 2024

PJColombo Aug 11, 2024

Mobile menu #469

Mobile menu #469

Conversation

luis-herasme commented Jul 31, 2024 • edited Loading

Checklist

Description

Related Issue

Screenshots:

changeset-bot bot commented Jul 31, 2024 • edited Loading

🦋 Changeset detected

vercel bot commented Jul 31, 2024 • edited Loading

github-actions bot commented Jul 31, 2024 • edited Loading

📦 Next.js Bundle Analysis for @blobscan/web

⚠️ Global Bundle Size Increased

Ten Pages Changed Size

codecov bot commented Jul 31, 2024 • edited Loading

Codecov Report

PJColombo left a comment

Choose a reason for hiding this comment

PJColombo commented Aug 1, 2024

PJColombo commented Aug 1, 2024

PJColombo left a comment • edited Loading

Choose a reason for hiding this comment

PJColombo commented Aug 11, 2024 • edited Loading

PJColombo left a comment

Choose a reason for hiding this comment

PabloCastellano left a comment

Choose a reason for hiding this comment

xFJA Aug 1, 2024

Choose a reason for hiding this comment

PJColombo Aug 11, 2024

Choose a reason for hiding this comment

xFJA Aug 1, 2024

Choose a reason for hiding this comment

PJColombo Aug 11, 2024

Choose a reason for hiding this comment

luis-herasme commented Jul 31, 2024 •

edited

Loading

changeset-bot bot commented Jul 31, 2024 •

edited

Loading

vercel bot commented Jul 31, 2024 •

edited

Loading

github-actions bot commented Jul 31, 2024 •

edited

Loading

codecov bot commented Jul 31, 2024 •

edited

Loading

PJColombo left a comment •

edited

Loading

PJColombo commented Aug 11, 2024 •

edited

Loading