fix: Hide burger menu on non-sidebar routes

[usame-algan]

What it solves

Resolves #3251

How this PR fixes it

• Only displays the burger menu if onMenuToggle is passed to Header

How to test it

1. Open the welcome page or any other route where there is no sidebar
2. Decrease the viewport width
3. Observe no burger menu appearing in the header

Screenshots

Checklist

• [ ] I've tested the branch on mobile 📱
• [ ] I've documented how it affects the analytics (if at all) 📊
• [ ] I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions[bot]]

Branch preview

✅ Deploy successful!

Website: https://hide_burger_menu--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook: https://hide_burger_menu--walletweb.review.5afe.dev/storybook/

[github-actions[bot]]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: :white_check_mark: success
  • Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[usame-algan]

Unrelated mobile view feedback: Imo we could still display a (small) logo in the top left on mobile screens and maybe even make more space by reducing the network selector to just a logo instead of also text cc @TanyaEfremova

[github-actions[bot]]

📦 Next.js Bundle Analysis for safe-wallet-web

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

🎉 Global Bundle Size Decreased

Page	Size (compressed)
global	1000.63 KB (-36 B)

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!

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	78.87% (-0.04% 🔻)	11574/14675
🔴	Branches	58.01% (-0.03% 🔻)	2807/4839
🟡	Functions	65.8% (-0.06% 🔻)	1845/2804
🟢	Lines	80.28% (-0.05% 🔻)	10439/13004

Show files with reduced coverage 🔻

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :-: | :- | :- | :- | :- | :- | | 🟡 |

`...` / utils.ts

|

73.63% (-1.63% 🔻)

|

56.25% (-6.91% 🔻)

|

70.59% (-5.6% 🔻)

|

75.95% (-1.43% 🔻)

| | 🟢 |

`...` / index.tsx

|

82.35% (-8.82% 🔻)

|

66.67% (-16.67% 🔻)

|

50% (-12.5% 🔻)

|

83.87% (-9.68% 🔻)

| | 🟢 |

`...` / index.tsx

| 96% |

92.86% (-0.48% 🔻)

| 100% | 100% | | 🔴 |

`...` / SwapTx.tsx

|

45.45% (-4.55% 🔻)

| 0% | 0% |

50% (-7.14% 🔻)

| | 🟢 |

`...` / index.tsx

|

88.33% (-0.56% 🔻)

|

72.22% (+1.17% 🔼)

| 60% |

87.5% (-0.64% 🔻)

|

Test suite run success

1419 tests passing in 197 suites.

Report generated by 🧪jest coverage report action from 0476bed59915133c97c2b17cbc5fdc01456cab55

[TanyaEfremova]

@usame-algan fair point! There was an exploration for minimizing what we display in the mobile view, you can view it here I also added the logo, but the Safe{Wallet} one wouldn't fit, so I switched to our logomark instead.

[francovenica]

So the burger icon doesn't show anymore for 900 to 600px width viewport. So that's correct.

Are we going to implemente the logo in its place as Tanya suggested? or should we create another ticket?

[usame-algan]

Are we going to implemente the logo in its place as Tanya suggested? or should we create another ticket?

I will create a new ticket to address the mobile header changes as we will also change the network selector slightly.

[francovenica]

Ok, since the logo issue will be tackled in another ticket we can merge this one