Move hamburger menu icon to right of theme picker icon on mobile view

Author: webstackdev

src/components/Header/index.astro

@@ -73,7 +73,7 @@ const { path } = Astro.props
   {/* Theme picker toggle button to show modal */}
   <span
     id="header__theme-icon"
-    class="ml-2 shrink-0 w-(--header-icon-size) relative z-(--z-content-overlay)"
+    class="order-3 lg:order-4 ml-2 mr-2 lg:mr-0 shrink-0 w-(--header-icon-size) relative z-(--z-content-overlay)"
   >
     <ThemeButton />
   </span>

src/components/Navigation/index.astro

@@ -17,7 +17,7 @@ const { path } = Astro.props
       <Menu path={path} />
     </span>
     {/* Mobile navigation toggle button to show menu on full-page splash screen */}
-    <span id="header__nav-icon" class="block shrink-0 relative z-(--z-mobile-close-btn) lg:hidden">
+    <span id="header__nav-icon" class="order-4 block shrink-0 relative z-(--z-mobile-close-btn) lg:hidden">
       <NavToggle />
     </span>
   </div>