Nav Redesign: Move search and notifications to footer

[mmtr]

Fixes https://github.com/Automattic/dotcom-forge/issues/6966

Proposed Changes

Moves the search and notifications buttons to the footer of the new sidebar so the Sites, Domains, and Reader links are kept in the same position when the sidebar is expanded/collapsed.

The sizing/spacing of the footer has been slightly adjusted as well to ensure that all items are correctly aligned.

Before

Expanded	Collapsed

After

Expanded	Collapsed

I also took the opportunity to refine the position of the tooltips so they look more polished.

Before

Screen.Recording.2024-05-08.at.12.24.37.mov

After

Screen.Recording.2024-05-08.at.12.24.59.mov

Testing Instructions

• Use the Calypso live link below
• Go to /sites
• Make sure the search and notifications icons are now placed at the bottom
• Select a site to collapse the sidebar
• Make sure the footer looks good
• Make sure tooltips also look good

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106840

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106840&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106840&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~76 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
woocommerce-installation                -317 B  (-0.1%)      -82 B  (-0.1%)
woocommerce                             -317 B  (-0.1%)      -82 B  (-0.1%)
themes                                  -317 B  (-0.0%)      -82 B  (-0.0%)
theme                                   -317 B  (-0.0%)      -82 B  (-0.0%)
subscribers                             -317 B  (-0.0%)      -82 B  (-0.0%)
stats                                   -317 B  (-0.0%)      -82 B  (-0.0%)
sites-dashboard                         -317 B  (-0.0%)      -82 B  (-0.0%)
site-purchases                          -317 B  (-0.0%)      -82 B  (-0.0%)
site-monitoring                         -317 B  (-0.0%)      -82 B  (-0.0%)
site-blocks                             -317 B  (-0.0%)      -82 B  (-0.0%)
settings-writing                        -317 B  (-0.1%)      -82 B  (-0.0%)
settings-security                       -317 B  (-0.1%)      -82 B  (-0.1%)
settings-reading                        -317 B  (-0.1%)      -82 B  (-0.1%)
settings-podcast                        -317 B  (-0.1%)      -82 B  (-0.0%)
settings-performance                    -317 B  (-0.1%)      -82 B  (-0.1%)
settings-newsletter                     -317 B  (-0.1%)      -82 B  (-0.1%)
settings-jetpack                        -317 B  (-0.1%)      -82 B  (-0.1%)
settings-discussion                     -317 B  (-0.1%)      -82 B  (-0.1%)
settings                                -317 B  (-0.0%)      -82 B  (-0.0%)
security                                -317 B  (-0.0%)      -82 B  (-0.0%)
scan                                    -317 B  (-0.0%)      -82 B  (-0.0%)
purchases                               -317 B  (-0.0%)      -82 B  (-0.0%)
promote-post-i2                         -317 B  (-0.1%)      -82 B  (-0.1%)
privacy                                 -317 B  (-0.0%)      -82 B  (-0.0%)
preview                                 -317 B  (-0.1%)      -82 B  (-0.1%)
posts-custom                            -317 B  (-0.0%)      -82 B  (-0.0%)
posts                                   -317 B  (-0.0%)      -82 B  (-0.0%)
plugins                                 -317 B  (-0.0%)      -82 B  (-0.0%)
plans                                   -317 B  (-0.0%)      -82 B  (-0.0%)
people                                  -317 B  (-0.0%)      -82 B  (-0.0%)
pages                                   -317 B  (-0.1%)      -82 B  (-0.0%)
notification-settings                   -317 B  (-0.0%)      -82 B  (-0.0%)
migrate                                 -317 B  (-0.1%)      -82 B  (-0.1%)
media                                   -317 B  (-0.0%)      -82 B  (-0.0%)
me                                      -317 B  (-0.0%)      -82 B  (-0.0%)
marketplace                             -317 B  (-0.0%)      -82 B  (-0.0%)
marketing                               -317 B  (-0.0%)      -82 B  (-0.0%)
jetpack-social                          -317 B  (-0.1%)      -82 B  (-0.1%)
jetpack-search                          -317 B  (-0.1%)      -82 B  (-0.0%)
jetpack-connect                         -317 B  (-0.0%)      -82 B  (-0.0%)
jetpack-cloud-settings                  -317 B  (-0.1%)      -82 B  (-0.0%)
jetpack-cloud-pricing                   -317 B  (-0.0%)      -82 B  (-0.0%)
jetpack-cloud-plugin-management         -317 B  (-0.0%)      -82 B  (-0.0%)
jetpack-cloud-overview                  -317 B  (-0.1%)      -82 B  (-0.1%)
jetpack-cloud-features-comparison       -317 B  (-0.0%)      -82 B  (-0.0%)
jetpack-cloud                           -317 B  (-0.1%)      -82 B  (-0.1%)
import                                  -317 B  (-0.1%)      -82 B  (-0.1%)
hosting                                 -317 B  (-0.0%)      -82 B  (-0.0%)
home                                    -317 B  (-0.0%)      -82 B  (-0.0%)
help                                    -317 B  (-0.0%)      -82 B  (-0.0%)
gutenberg-editor                        -317 B  (-0.0%)      -82 B  (-0.0%)
google-my-business                      -317 B  (-0.1%)      -82 B  (-0.1%)
github-deployments                      -317 B  (-0.0%)      -82 B  (-0.0%)
export                                  -317 B  (-0.1%)      -82 B  (-0.1%)
email                                   -317 B  (-0.0%)      -82 B  (-0.0%)
earn                                    -317 B  (-0.0%)      -82 B  (-0.0%)
domains                                 -317 B  (-0.0%)      -82 B  (-0.0%)
developer                               -317 B  (-0.0%)      -82 B  (-0.0%)
customize                               -317 B  (-0.1%)      -82 B  (-0.1%)
concierge                               -317 B  (-0.1%)      -82 B  (-0.1%)
comments                                -317 B  (-0.0%)      -82 B  (-0.0%)
checkout                                -317 B  (-0.0%)      -82 B  (-0.0%)
backup                                  -317 B  (-0.0%)      -82 B  (-0.0%)
add-ons                                 -317 B  (-0.1%)      -82 B  (-0.1%)
activity                                -317 B  (-0.0%)      -82 B  (-0.0%)
account-close                           -317 B  (-0.0%)      -82 B  (-0.0%)
account                                 -317 B  (-0.0%)      -82 B  (-0.0%)
devdocs                                  +16 B  (+0.0%)       +6 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~81 bytes removed 📉 [gzipped])

name                                           parsed_size           gzip_size
async-load-calypso-reader-sidebar                   -317 B  (-0.2%)      -82 B  (-0.1%)
async-load-menu-items-help-center-help-center        -15 B  (-0.2%)       +1 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[eoigal]

Looks better in my opinion and works well

[davemart-in]

Looks better in my opinion and works well

I agree! 🚢 it!

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/nav-redesign-search-notifications-position on your sandbox.