Integrate the menu button in the search box

Allows us to make the search box wider, too

app/components/app-header.gjs

@@ -24,16 +24,7 @@ export default class AppHeaderComponent extends Component {
   <template>
     <header class="app-header">
       <div class="header-left">
-        <button
-          class="menu-btn btn-press"
-          type="button"
-          aria-label="Menu"
-          {{on "click" @onToggleMenu}}
-        >
-          <Icon @name="menu" @size={{24}} @color="#333" />
-        </button>
-
-        <SearchBox />
+        <SearchBox @onToggleMenu={{@onToggleMenu}} />
       </div>
 
       <div class="header-right">

app/components/icon.gjs

@@ -17,6 +17,7 @@ import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
 import plus from 'feather-icons/dist/icons/plus.svg?raw';
 import server from 'feather-icons/dist/icons/server.svg?raw';
+import search from 'feather-icons/dist/icons/search.svg?raw';
 import settings from 'feather-icons/dist/icons/settings.svg?raw';
 import target from 'feather-icons/dist/icons/target.svg?raw';
 import user from 'feather-icons/dist/icons/user.svg?raw';
@@ -40,6 +41,7 @@ const ICONS = {
   phone,
   plus,
   server,
+  search,
   settings,
   target,
   user,

app/components/search-box.gjs

@@ -122,9 +122,15 @@ export default class SearchBoxComponent extends Component {
   <template>
     <div class="search-box">
       <form class="search-form" {{on "submit" this.handleSubmit}}>
-        <div class="search-icon">
-          <Icon @name="search" @size={{18}} @color="#666" />
-        </div>
+        <button
+          type="button"
+          class="menu-btn-integrated"
+          aria-label="Menu"
+          {{on "click" @onToggleMenu}}
+        >
+          <Icon @name="menu" @size={{24}} @color="#5f6368" />
+        </button>
+
         <input
           type="search"
           class="search-input"
@@ -136,6 +142,15 @@ export default class SearchBoxComponent extends Component {
           {{on "blur" this.handleBlur}}
           autocomplete="off"
         />
+
+        <button
+          type="submit"
+          class="search-submit-btn"
+          aria-label="Search"
+        >
+          <Icon @name="search" @size={{20}} @color="#5f6368" />
+        </button>
+
         {{#if this.query}}
           <button
             type="button"
@@ -143,7 +158,7 @@ export default class SearchBoxComponent extends Component {
             {{on "click" this.clear}}
             aria-label="Clear"
           >
-            <Icon @name="x" @size={{16}} @color="#999" />
+            <Icon @name="x" @size={{16}} @color="#5f6368" />
           </button>
         {{/if}}
       </form>