feat: Sidebar redesign

[usame-algan]

What it solves

Resolves #3504

How this PR fixes it

• Adjusts the design according to Figma.
• Adds Queue, History links to the navigation

How to test it

1. Open the Safe app
2. Observe that there are links to the Transaction Queue and History
3. Observe that the Sidebar looks according to the design

Screenshots

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

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: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[coveralls]

Pull Request Test Coverage Report for Build 2154519931

• 0 of 16 (0.0%) changed or added relevant lines in 4 files are covered.
• 3 unchanged lines in 3 files lost coverage.
• Overall coverage decreased (-0.03%) to 35.583%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/components/AppLayout/Sidebar/useSidebarItems.tsx	0	1	0.0%
src/components/List/ListIcon.tsx	0	2	0.0%
src/components/List/index.tsx	0	4	0.0%
src/components/AppLayout/Sidebar/SafeHeader/index.tsx	0	9	0.0%

Files with Coverage Reduction	New Missed Lines	%
src/components/AppLayout/Sidebar/SafeHeader/index.tsx	1	0%
src/components/AppLayout/Sidebar/useSidebarItems.tsx	1	0%
src/components/List/index.tsx	1	0%

Totals
Change from base Build 2147308671:	-0.03%
Covered Lines:	3548
Relevant Lines:	9017

---

💛 - Coveralls

[github-actions]

Deployment links

🟠 Rinkeby	⚪ Mainnet	🟣 Polygon	🟡 BSC	⚫ Arbitrum	🟢 Gnosis Chain

[iamacook]

💪

[DiogoSoaress]

Looks good Usame! Left some comments

[DiogoSoaress]

This extra "stem" is also undesired

[DiogoSoaress]

Thanks for addressing the comments 👍

[francovenica]

Note: I'll assume that the list of safes that is in the Figma design is out of the scope of this ticket, since I haven't seen any change in that safe list

[francovenica]

The colors, fonts, spacing, elements, etc looks fine.
The only thing we could discuss is the length of the menu (as it was discussed in a daily earlier)
The menu is kinda small when the safe is in read only mode.
Note: I don't expect a fix from this, just an agreement if we should try to make it longer o leave it the way it is.

If the length of the menu is not considered an issue then I'd pass the ticket to QA done.

[francovenica]

Confirmed that the list of safes is for another ticket, so out of the scope of this one.

Regarding the length of the menu, it was decided that we will remove the "Read Only" label and make the "New Transaction" button to change the text to "Read Only" when the conditions are met (Not connected, not owner of the safe)

[francovenica]

It looks good to me.

The button shows Read Only when the user is not connected or is not owner, and reverts to New tx when the conditions are met.