Polish mobile navbar and hero actions

components/mobile-nav.tsx

@@ -13,9 +13,10 @@ type MobileNavProps = {
   dir: "rtl" | "ltr";
   openLabel: string;
   closeLabel: string;
+  className?: string;
 };
 
-export function MobileNav({ items, dir, openLabel, closeLabel }: MobileNavProps) {
+export function MobileNav({ items, dir, openLabel, closeLabel, className }: MobileNavProps) {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -57,7 +58,7 @@ export function MobileNav({ items, dir, openLabel, closeLabel }: MobileNavProps)
   const label = open ? closeLabel : openLabel;
 
   return (
-    <div className="md:hidden">
+    <div className={className ? `md:hidden ${className}` : "md:hidden"}>
       <button
         type="button"
         className="theme-toggle mobile-menu-toggle"

components/navbar.tsx

@@ -61,15 +61,20 @@ export function Navbar({ language }: { language: Language }) {
           </div>
         </div>
 
-        <div className="navbar-mobile-controls flex items-center gap-2 md:hidden">
+        <div className={`navbar-mobile-controls flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
           <MobileNav
             items={navItems}
             dir={dir}
+            className="order-3"
             openLabel={language === "ar" ? "فتح القائمة" : "Open menu"}
             closeLabel={language === "ar" ? "إغلاق القائمة" : "Close menu"}
           />
-          <LanguageToggle language={language} />
-          <ThemeToggle language={language} />
+          <div className="order-2">
+            <LanguageToggle language={language} />
+          </div>
+          <div className="order-1">
+            <ThemeToggle language={language} />
+          </div>
         </div>
       </div>
     </header>