feat: improve the gridview presentation

src/components/AppHeader.jsx

@@ -2,14 +2,14 @@ import { useState } from 'react';
 import fendiLogo from '/favicon.png'
 import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
-import MenuDrawer from './MenuDrawer'; 
+import MenuDrawer from './MenuDrawer';
 
 export default function AppHeader({ zone = 'public' }) {
 
   const bgColor = {
-      public: '#40120EFF',
-      restricted: '#e0e0ff',
-      private: '#d0f0e0',
+    public: '#40120EFF',
+    restricted: '#e0e0ff',
+    private: '#d0f0e0',
   };
 
   const [menuOpen, setMenuOpen] = useState(false);
@@ -20,12 +20,12 @@ export default function AppHeader({ zone = 'public' }) {
 
   return (
     <AppBar position="static"
-       sx={{
-          textAlign: 'center',
-          bgcolor: bgColor[zone],
-          mt: 'auto',
-          fontSize: { xs: '0.75rem', md: '1rem' },
-        }} >
+      sx={{
+        textAlign: 'center',
+        bgcolor: bgColor[zone],
+        mt: 'auto',
+        fontSize: { xs: '0.75rem', md: '1rem' },
+      }} >
       <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <Box display="flex" alignItems="center">
           <IconButton edge="start" color="inherit" onClick={() => setMenuOpen(true)}>
@@ -64,7 +64,7 @@ export default function AppHeader({ zone = 'public' }) {
         )}
 
         {/* Rendering the Drawer */}
-       <MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
+        <MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
 
       </Toolbar>
     </AppBar>