Recreate main menu (#3528253) · Issues · project / bluecheese

Recreate main menu

>>> [!note] Migrated issue   Reported by: [spicy.werewolf](https://www.drupal.org/user/2879769) Related to !172 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Over time the menu design has evolved and made more precise. Also, the module being used currently has some aspects that feel fragile, particularly the way it captures and stores menu config. Moreover, it doesn't seem to provide a no js fallback. </p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Using the most recent approved menu designs, theme the main menu without using the contrib module that is being used now. </p> <h2>Testing steps: </h2> <p><strong>Test URL</strong>: <a href="https://drupalorg.dev.cluster.drupalsystems.org/home">https://drupalorg.dev.cluster.drupalsystems.org/home</a></p> <p> Drupalorg Project MR: <a href="https://gitlab.com/drupal-infrastructure/sites/drupalorg/-/merge_requests/174/diffs">MR174</a>, branch: main-menu-changes </p> <p> Bluecheese Issue: <a href="https://www.drupal.org/project/bluecheese/issues/3528253">https://www.drupal.org/project/bluecheese/issues/3528253</a> </p> <p> Bluecheese MR: <a href="https://git.drupalcode.org/project/bluecheese/-/merge_requests/172">https://git.drupalcode.org/project/bluecheese/-/merge_requests/172</a> </p> <p> Figma: <a href="https://www.figma.com/design/sLiIjn5ktrzDCZei5hpNJs/Drupal.org-Style-Guide-and-Official-Designs?node-id=8173-48602&p=f&t=AWdYsllGg03d4swa-0">https://www.figma.com/design/sLiIjn5ktrzDCZei5hpNJs/Drupal.org-Style-Guide-and-Official-Designs?node-id=8173-48602&p=f&t=AWdYsllGg03d4swa-0</a> </p> <h2>Setup:</h2> <ol> <li>Checkout project branch to <code>117-main-menu-redux</code></li> <li>Add the fork from the bluecheese issue and checkout to the issue branch in a separate terminal tab.</li> <li><code>ddev composer install</code></li> <li>Revisit the bluecheese project root tab and make sure you are still checked out to the correct branch. (sometimes composer install will checkout Bluecheese to the latest commit specified in the project configs, if this happens <code>git checkout -</code> should check you back out to the correct branch.</li> <li><code>ddev composer recreate</code></li> <li>Paste the link that gets generated at the end of the recreate script, click “Import Menus Safely”, and you should be ready to rock.</li> <li>Visit any user facing page to access the menu updates. </li> </ol> <h2>QA:</h2> <p> Using the designs in Figma (link above) check the overall look, feel, and spacing of the menu items and verify that they align with the designs. </p> <p> For menu behavior, the design team instructed us to use <a href="https://www.shopify.com/">https://www.shopify.com/</a> as a guide. </p> <p> Run the testing steps below on multiple browsers, I recommend Chrome, Safari, Firefox. </p> <h3>Wide screens:</h3> <table> <tr> <td>Chrome </td> <td>FF </td> <td>Safari </td> <td> </td> </tr> <tr> <td>⚠️ </td> <td>⚠️ </td> <td>⚠️ </td> <td>Verify that the layout, spacing, and fonts of the header match the designs. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Open a menu panel and verify these styles are also correct. Without closing the panel you opened, click on another panel and verify that it transitions to the others smoothly. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Leaving the mega menu open, click on the search icon. Verify that it opens the search drawer, and that when it does so, it closes any open menu panels. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Close the search drawer. Everything should be closed automatically. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Open and close the search drawer by itself and verify that it looks, feels, and functions as expected. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Perform the same actions on the user menu. Upon opening, it should close any other dropdowns. The user menu is smaller, and does not have an animation when it appears. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Get Started is under evaluation but for the moment it should (1) look like a primary button, and (2) allow users to access both “Try Hosting” and “Try Drupal CMS”. </td> </tr> </table> <h3>Narrow screens/mobile</h3> <table> <tr> <td>Chrome </td> <td>FF </td> <td>Safari </td> <td> </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Verify that the layout, spacing, and fonts of the mobile header matches the designs. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Click the burger menu and verify that it opens the mobile menu. Check the styles of the mobile menu links against the design. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Click some parent links and verify that the look and feel also matches the designs. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Click the mobile search icon and verify that the search drawer opens and that the search input is focused by default. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>With the mobile search drawer open, click on the burger and verify that the menu opens and the search drawer closes. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Click the mobile search icon again and verify that the menu closes. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Open the menu one more time. Then expose a submenu. Now click search. Everything should close. Click the burger again. The submenu that was open is now closed again. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>The user menu works the same as the other menu items, but is styled slightly differently. It has a user icon in front of it, and a border above it. Verify that it does not look out of place and works as expected. </td> </tr> <tr> <td>✅ </td> <td>✅ </td> <td>✅ </td> <td>Get Started for mobile should function, not look broken, and allow users to access the child links. </td> </tr> </table> <h2>Deployment steps: </h2> <p>- Merge site MR<br> - Merge bluecheese MR<br> - <code>ddev composer update drupal/bluecheese</code><br> - Push and tag everything<br> - <del><strong>Fill up descriptions manually for all menu items</strong> (click on "edit" on the menu item, then click on "Description" in the sidebar, fill it up and save)</del>. This is done via the site MR.<br> - Deploy (this will uninstall TBM)<br> - <code>drush import:menus</code> and choose <del>"Safe"</del> "Force"</p> <h3>Followup issues:</h3> <ul> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-1"><a href="https://www.drupal.org/project/bluecheese/issues/3538250" title="Status: Active">#3538250: Refactor “Get started” menu at desktop</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/bluecheese/issues/3538249" title="Status: Closed (fixed)">#3538249: Close header items on focus out and when clicking outside of header</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/bluecheese/issues/3538251" title="Status: Closed (fixed)">#3538251: Menu not accessible in forced colors mode</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-1"><a href="https://www.drupal.org/project/bluecheese/issues/3538248" title="Status: Active">#3538248: Mobile menu should have overlay when open</a></span></li> <li><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/bluecheese/issues/3538246" title="Status: Closed (fixed)">#3538246: Menus should close on ESC</a></span></li> <li> </ul>

issue