From 5f8e5231283123664ad7faa381c4aad77391eccb Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Mon, 18 Nov 2024 15:40:48 +0700
Subject: [PATCH] feat: improve mobile menu layout and enhance search bar
 styling for better usability

---
 src/components/dataTable.tsx                |  2 +-
 src/components/navigationBar/mobileMenu.tsx | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/dataTable.tsx b/src/components/dataTable.tsx
index 8385d7e..7b51d34 100644
--- a/src/components/dataTable.tsx
+++ b/src/components/dataTable.tsx
@@ -209,7 +209,7 @@ export function DataTable({ data }: { data: ModalProps[] }) {
           placeholder="Filter names..."
           value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
           onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
-          className="max-w-sm"
+          className="md:max-w-sm max-w-xs"
         />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
diff --git a/src/components/navigationBar/mobileMenu.tsx b/src/components/navigationBar/mobileMenu.tsx
index 30a03e9..537000a 100644
--- a/src/components/navigationBar/mobileMenu.tsx
+++ b/src/components/navigationBar/mobileMenu.tsx
@@ -43,8 +43,8 @@ export function MobileMenu() {
                     <X className="w-5 h-5" />
                   </button>
 
-                  <NavigationMenu className="ml-6">
-                    <NavigationMenuList className="flex space-x-4">
+                  <NavigationMenu>
+                    <NavigationMenuList className="flex space-x-2">
                       <NavigationMenuItem>
                         <NavigationMenuTrigger className="text-sm font-medium">Businesses</NavigationMenuTrigger>
                         <NavigationMenuContent>
@@ -87,9 +87,10 @@ export function MobileMenu() {
                   </NavigationMenu>
                 </div>
 
-                <div className="flex items-center space-x-4">
-                  <div className="relative">
-                    <SearchBar />
+                <div className="flex items-center ml-2">
+                  <SearchBar />
+                  <div className="-ml-2">
+                    <ThemeToggle />
                   </div>
                 </div>
               </div>