refactor: Use shared dropdown panel in nav #2553
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖
|
| Page | Size (compressed) |
|---|---|
global |
207.86 KB (🟡 +511 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!
Eighty-six Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
127.85 KB (🟡 +7.76 KB) |
335.71 KB |
/[productSlug]/docs |
168.19 KB (🟡 +10.2 KB) |
376.05 KB |
/[productSlug]/integrations |
141.97 KB (🟡 +10.44 KB) |
349.83 KB |
/[productSlug]/integrations/[organizationSlug]/[integrationSlug] |
165.21 KB (🟡 +10.14 KB) |
373.07 KB |
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion] |
165.21 KB (🟡 +10.14 KB) |
373.07 KB |
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion]/components/[componentType]/[componentSlug] |
171.14 KB (🟡 +10.26 KB) |
379 KB |
/[productSlug]/tutorials |
140.79 KB (🟡 +10.56 KB) |
348.65 KB |
/[productSlug]/tutorials/[...tutorialSlug] |
219.15 KB (🟡 +10.69 KB) |
427 KB |
/[productSlug]/tutorials/[collectionSlug] |
183.8 KB (🟡 +10.56 KB) |
391.66 KB |
/_error |
112.16 KB (🟡 +7.94 KB) |
320.02 KB |
/boundary |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/boundary/api-docs/[[...page]] |
169.14 KB (🟡 +10.21 KB) |
377 KB |
/boundary/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/boundary/install |
172.2 KB (🟡 +10.07 KB) |
380.06 KB |
/certifications |
164.66 KB (🟡 +7.72 KB) |
372.52 KB |
/certifications/[slug] |
165.04 KB (🟡 +7.69 KB) |
372.9 KB |
/consul |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/consul/api-docs/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/consul/commands/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/consul/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/consul/install |
166.14 KB (🟡 +10.1 KB) |
374 KB |
/consul/install/enterprise |
166.18 KB (🟡 +10.1 KB) |
374.03 KB |
/hcp |
152.34 KB (🟡 +10.92 KB) |
360.2 KB |
/hcp/api-docs/consul/[[...page]] |
157.42 KB (🟡 +10.28 KB) |
365.27 KB |
/hcp/api-docs/packer/[[...page]] |
157.41 KB (🟡 +10.28 KB) |
365.27 KB |
/hcp/api-docs/vault-secrets/[[...page]] |
157.42 KB (🟡 +10.28 KB) |
365.28 KB |
/hcp/api-docs/webhook/[[...page]] |
157.42 KB (🟡 +10.28 KB) |
365.27 KB |
/hcp/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.05 KB |
/nomad |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/nomad/api-docs/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/nomad/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/nomad/install |
165.62 KB (🟡 +10.23 KB) |
373.47 KB |
/nomad/install/enterprise |
165.6 KB (🟡 +10.23 KB) |
373.46 KB |
/nomad/intro/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/nomad/plugins/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/nomad/tools/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/open-api-docs-preview |
161.86 KB (🟡 +10.28 KB) |
369.72 KB |
/open-api-docs-preview-v2/[[...page]] |
114.82 KB (🟡 +11.14 KB) |
322.67 KB |
/packer |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/packer/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/packer/guides/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/packer/install |
165.59 KB (🟡 +10.23 KB) |
373.45 KB |
/profile/account |
131.3 KB (🟡 +10.63 KB) |
339.16 KB |
/profile/bookmarks |
132.33 KB (🟡 +10.67 KB) |
340.18 KB |
/sentinel |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/sentinel/docs/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/sentinel/install |
165.59 KB (🟡 +10.23 KB) |
373.45 KB |
/sentinel/intro/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/terraform/cdktf/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform/cli/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform/cloud-docs/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/cloud-docs/agents/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform/enterprise/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/install |
165.6 KB (🟡 +10.23 KB) |
373.45 KB |
/terraform/internals/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform/intro/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform/language/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform/plugin/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.06 KB |
/terraform/plugin/framework/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/plugin/log/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/plugin/mux/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/plugin/sdkv2/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/plugin/testing/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/terraform/registry/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.07 KB |
/tutorials |
123.24 KB (🟡 +7.82 KB) |
331.1 KB |
/tutorials/library |
147.8 KB (🟡 +10.58 KB) |
355.66 KB |
/vagrant |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/vagrant/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/vagrant/install |
166.1 KB (🟡 +10.11 KB) |
373.96 KB |
/vagrant/install/vmware |
165.6 KB (🟡 +10.23 KB) |
373.46 KB |
/vagrant/intro/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/vagrant/vagrant-cloud/[[...page]] |
166.21 KB (🟡 +10.15 KB) |
374.06 KB |
/validated-designs |
118.43 KB (🟡 +7.82 KB) |
326.28 KB |
/validated-designs/[...slug] |
163.32 KB (🟡 +9.84 KB) |
371.17 KB |
/vault |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/vault/api-docs/[[...page]] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/vault/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.05 KB |
/vault/install |
165.59 KB (🟡 +10.23 KB) |
373.45 KB |
/vault/install/enterprise |
165.6 KB (🟡 +10.23 KB) |
373.46 KB |
/waypoint |
152.35 KB (🟡 +10.92 KB) |
360.21 KB |
/waypoint/docs/[...page] |
166.2 KB (🟡 +10.15 KB) |
374.06 KB |
/well-architected-framework |
144.48 KB (🟡 +10.86 KB) |
352.33 KB |
/well-architected-framework/[...tutorialSlug] |
186.45 KB (🟡 +9.99 KB) |
394.3 KB |
/well-architected-framework/[collectionSlug] |
132.67 KB (🟡 +10.67 KB) |
340.53 KB |
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
Next to the size is how much the size has increased or decreased compared with the base branch of this 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.
Soon to come: Placing the shared dropdown panel in NavigationHeaderDropdownMenu's modal
- Restore original dropdown usage with new props - Add support for the product panel as a separate dropdown - Adjust types/type imports
- Replace mobile menu with panel - Hack in fixes for mobile - Fix width on tablet/desktop
EnMod
force-pushed
the
feat/use-shared-dropdown-panel
branch
from
21d5954
to
4542ed8
Compare
Move panel to the left to avoid issues with cutoff instead of changing the breakpoint
| @@ -63,9 +63,13 @@ | |||
| border-bottom-left-radius: 6px; | |||
| border-bottom-right-radius: 6px; | |||
| box-shadow: var(--token-elevation-higher-box-shadow); | |||
| min-width: 252px; | |||
| min-width: max-content; | |||
| position: fixed; | |||
There was a problem hiding this comment.
Is it possible to change this back to absolute fromfixed? Asking because having it as fixed has caused visual regressions. If you scroll down the page and then open the new menu on desktop on the homepage, it is not at the top of the page as expected. Same for other pages
There was a problem hiding this comment.
Yikes! Good call. Addressed here:
ec41196
I had gone for fixed initially so we could have a less-bespoke left value to get the panel aligned. Is there anything you would suggest for a left value than the hardcoded -216px I now have in place?
EnMod
requested review from
heatlikeheatwave
and removed request for
benjamin-gage
src/components/mobile-menu-levels-generic/mobile-menu-levels-generic.module.css
Outdated
Show resolved
Hide resolved
Co-authored-by: Heat Hamilton <[email protected]>
…t-components (#2566) Update package-lock and include specific next version for react-components
🔗 Relevant links
🗒️ What
This PR imports the
ProductPanelcomponent from@hashicorp/react-componentsfor use in the global nav, replacing the Products dropdown on generic pages on both desktop and mobile. This is a follow-up to #2537, utilizing the new data structure prepared in that PR.🤷 Why
By using this shared panel, we can maintain a single dropdown component across both
dev-portalandweb, with minimal adjustments to align to the styles indev-portal.🛠️ How
Importing a canary of the
@hashicorp/react-componentspackage was the first step, as this canary exports aProductPanel(fixes from https://github.com/hashicorp/web/pull/1865, primarily) ready for external use. After that, I moved forward with implementation indev-portal, replacing the "Products" dropdown with the new panel. This required some CSS hacking that will be documented in this PR; open to discussions on working around the need for these hacks!Finally, side panel content support was added via https://github.com/hashicorp/web/pull/1874, and other adjustments made to align with our spec.
📸 Design Screenshots
Spec (includes side content)
Before
After
🧪 Testing
ProductPanelis shown instead of the product list.ProductPanelis shown instead of the "Main menu" and "Products" sections shown in production.💭 Anything else?
Looking for feedback on implementation (especially from engineers more familiar with
dev-portal) to see if there's a more elegant way to retrofit the new component into our currentdev-portalcode 🙏