[2.x] Normalize navigation HTML ID naming

RELEASE_NOTES.md

@@ -69,6 +69,18 @@ If you have previously used this method directly and expected a string to be ret
 
 If you want to retain the previous state where a string is always returned, you can use the new `NavItem::getLink()` method instead, which will resolve the route immediately.
 
+### HTML ID changes
+
+Some HTML IDs have been renamed to follow a more consistent naming convention.
+
+If you have used any of the following selectors in custom code you wrote yourself, you will need to update to use the new changed IDs.
+
+#### https://github.com/hydephp/develop/pull/1622
+- Rename HTML ID `#searchMenu` to `#search-menu`
+- Rename HTML ID `#searchMenuButton` to `#search-menu-button`
+- Rename HTML ID `#searchMenuButtonMobile` to `#search-menu-button-mobile`
+
+
 ### New documentation search implementation
 
 As the new documentation search implementation brings changes to their code API you may need to adapt your code

packages/framework/resources/views/components/docs/search-widget.blade.php

@@ -1,4 +1,4 @@
-<button id="searchMenuButton" x-on:click="searchWindowOpen = ! searchWindowOpen"
+<button id="search-menu-button" x-on:click="searchWindowOpen = ! searchWindowOpen"
         :title="searchWindowOpen ? 'Close search window' : 'Open search window'; $nextTick(() => { setTimeout(() => { document.getElementById('search-input').focus(); }); });"
         class="absolute right-4 top-4 mr-4 z-10 opacity-75 hover:opacity-100 hidden md:block"
         aria-label="Toggle search window">
@@ -14,7 +14,7 @@ class="absolute right-4 top-4 mr-4 z-10 opacity-75 hover:opacity-100 hidden md:b
         </svg>
     </span>
 </button>
-<button id="searchMenuButtonMobile" x-on:click="searchWindowOpen = ! searchWindowOpen"
+<button id="search-menu-button-mobile" x-on:click="searchWindowOpen = ! searchWindowOpen"
         :title="searchWindowOpen ? 'Close search window' : 'Open search window'; $nextTick(() => { setTimeout(() => { document.getElementById('search-input').focus(); }); });"
         class="block md:hidden fixed bottom-4 right-4 z-10 rounded-full p-2 opacity-75 hover:opacity-100 fill-black bg-gray-200 dark:fill-gray-200 dark:bg-gray-700"
         aria-label="Toggle search menu">
@@ -26,7 +26,7 @@ class="block md:hidden fixed bottom-4 right-4 z-10 rounded-full p-2 opacity-75 h
 
 <div id="search-window-container" x-show="searchWindowOpen" x-cloak role="dialog"
      class="z-30 fixed top-0 left-0 w-screen h-screen flex flex-col items-center px-8 py-24 md:py-16">
-    <aside x-on:click.away="searchWindowOpen = false" id="searchMenu"
+    <aside x-on:click.away="searchWindowOpen = false" id="search-menu"
            class="prose dark:prose-invert bg-white dark:bg-gray-800  z-50 p-4 rounded-lg overflow-y-hidden min-h-[300px] max-h-[75vh] w-[70ch] max-w-full cursor-auto ">
         <header class="flex justify-between pb-3 mb-3 border-b dark:border-gray-700 md:hidden">
             <strong>Search the documentation site</strong>

packages/framework/resources/views/pages/documentation-search.blade.php

@@ -1,7 +1,7 @@
 @extends('hyde::layouts.docs')
 @section('content')
     <h1>Search the documentation site</h1>
-    <style>#searchMenuButton, .edit-page-link {
+    <style>#search-menu-button, .edit-page-link {
             display: none !important;
         }