chore: update searchbar display and refactor navigation

- Remove `nav` prop handlers from `NavVerticalMini` in layout.
- Adjust button and typography styles in searchbar for better responsiveness.
- Comment out `ResponsiveOverlay` in `App.tsx`.
- Add `Searchbar` component to dashboard header.
- Remove `Searchbar` from `nav-vertical`.

src/App.tsx

@@ -77,7 +77,7 @@ export default function App() {
                 <SettingsDrawer />
                 <ProgressBar />
                 <Router />
-                <ResponsiveOverlay />
+                {/*<ResponsiveOverlay />*/}
               </SnackbarProvider>
             </MotionLazy>
           </ThemeProvider>

src/layouts/_common/searchbar/searchbar.tsx

@@ -110,7 +110,9 @@ function Searchbar() {
     <Button
       onClick={search.onTrue} disableFocusRipple
       sx={{
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
         backgroundColor: '#24262A', borderRadius: 1.5, m: 1, p: 0.2,
         '&:hover': {
           // opacity: 0.7,
@@ -120,7 +122,11 @@ function Searchbar() {
     >
       <IconButton disableRipple>
         <Iconify icon="eva:search-fill" />
-        <Typography sx={{ ml: 1 }} variant='subtitle2'>Search</Typography>
+        <Typography sx={{
+            ml: 1,
+            // Hide on mobile
+          display: { xs: 'none', lg: 'block' },
+          }} variant='subtitle2'>Search</Typography>
       </IconButton>
 
       {mdUp && <Label sx={{ px: 0.75, mr: 1, fontSize: 12, color: 'text.secondary' }}>⌘K</Label>}

src/layouts/dashboard/header.tsx

@@ -18,7 +18,7 @@ import { HEADER, NAV } from '../config-layout';
 import {
   AccountPopover,
   LanguagePopover,
-  NotificationsPopover,
+  NotificationsPopover, Searchbar,
 } from '../_common';
 
 // ----------------------------------------------------------------------
@@ -52,7 +52,7 @@ export default function Header({ onOpenNav }: Props) {
         </IconButton>
       )}
 
-
+      <Searchbar />
 
       <Stack
         flexGrow={1}
@@ -104,7 +104,7 @@ export default function Header({ onOpenNav }: Props) {
       <Toolbar
         sx={{
           height: 1,
-          px: { lg: 5 },
+          px: { lg: 1 },
         }}
       >
         {renderContent}

src/layouts/dashboard/layout.tsx

@@ -27,7 +27,7 @@ export default function DashboardLayout({ children }: Props) {
 
   const isMini = settings.themeLayout === 'mini';
 
-  const renderNavMini =<><NavMini /> <NavVerticalMini openNav={nav.value} onCloseNav={nav.onFalse} /></>;
+  const renderNavMini =<><NavMini /> <NavVerticalMini /></>;
 
   const renderNavVertical =<><NavMini /><NavVertical openNav={nav.value} onCloseNav={nav.onFalse} /></>;
 

src/layouts/dashboard/nav-vertical.tsx

@@ -72,10 +72,7 @@ export default function NavVertical({ openNav, onCloseNav}: Props) {
         },
       }}
     >
-      {/*Add a icon to make collapsible the sidebar*/}
-
-
-      <Searchbar />
+      {/*<Searchbar />*/}
 
       <NavSectionVertical
         data={navData}