Merge 5f4b97e004 into ee7a7a0544

client/src/pages/Teacher/Dashboard/Dashboard.tsx

@@ -66,6 +66,7 @@ const Dashboard: React.FC = () => {
     const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
     const [errorMessage, setErrorMessage] = useState('');
     const [showErrorDialog, setShowErrorDialog] = useState(false);
+    const [isSearchVisible, setIsSearchVisible] = useState(false);
 
     // Filter quizzes based on search term
     // const filteredQuizzes = quizzes.filter(quiz =>
@@ -120,6 +121,9 @@ const Dashboard: React.FC = () => {
             selectRoomByName(event.target.value);
         }
     };
+    const toggleSearchVisibility = () => {
+        setIsSearchVisible(!isSearchVisible); // Alterne entre afficher et cacher la barre de recherche
+    };
 
     // Créer une salle
     const createRoom = async (title: string) => {
@@ -511,62 +515,87 @@ const Dashboard: React.FC = () => {
             <div
                 style={{
                     display: 'flex',
-                    justifyContent: 'space-between',
+                    justifyContent: 'flex-end',
                     alignItems: 'center',
-                    marginBottom: '20px'
+                    width: '100%',
+                    gap: '20px'
                 }}
             >
-                <div className="search-bar" style={{ flexGrow: 1, maxWidth: '400px' }}>
+                {/* Barre de recherche avec un bouton d'icône qui s'affiche ou se cache */}
-                    <TextField
+                <div
-                        onChange={handleSearch}
+                    className="search-bar"
-                        value={searchTerm}
+                    style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
-                        placeholder="Rechercher un quiz par son titre"
+                >
-                        fullWidth
+                    {!isSearchVisible ? (
-                        variant="outlined"
+                        <IconButton
-                        InputProps={{
+                            onClick={toggleSearchVisibility}
-                            endAdornment: (
+                            sx={{
-                                <InputAdornment position="end">
-                                    <IconButton>
-                                        <Search />
-                                    </IconButton>
-                                </InputAdornment>
-                            )
-                        }}
-                        sx={{
-                            '& .MuiOutlinedInput-root': {
                                 borderRadius: '8px',
-                                '& fieldset': {
+                                border: '1px solid #ccc',
-                                    borderColor: '#e0e0e0'
+                                padding: '8px 12px',
-                                },
+                                backgroundColor: '#fff',
-                                '&:hover fieldset': {
+                                color: '#5271FF'
-                                    borderColor: '#5271FF'
+                            }}
-                                }
+                        >
-                            }
+                            <Search />
-                        }}
+                        </IconButton>
-                    />
+                    ) : (
+                        // Barre de recherche visible
+                        <TextField
+                            onChange={handleSearch}
+                            value={searchTerm}
+                            placeholder="Rechercher un quiz"
+                            fullWidth
+                            autoFocus
+                            sx={{
+                                borderRadius: '8px',
+                                border: '1px solid #ccc',
+                                padding: '8px 12px',
+                                backgroundColor: '#fff',
+                                maxWidth: '1000px',
+                                width: '100%',
+                                fontWeight: 500
+                            }}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            onClick={toggleSearchVisibility}
+                                            sx={{
+                                                borderRadius: '8px',
+                                                border: '1px solid #ccc',
+                                                backgroundColor: '#fff',
+                                                color: '#5271FF'
+                                            }}
+                                        >
+                                            <Search />
+                                        </IconButton>
+                                    </InputAdornment>
+                                )
+                            }}
+                        />
+                    )}
                 </div>
 
-                <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
+                <Button
-                    <Button
+                    variant="outlined"
-                        variant="outlined"
+                    color="primary"
-                        color="primary"
+                    startIcon={<Add />}
-                        startIcon={<Add />}
+                    onClick={handleCreateQuiz}
-                        onClick={handleCreateQuiz}
                         sx={{ borderRadius: '8px' }}
-                    >
+                >
-                        Ajouter nouveau quiz
+                    Ajouter nouveau quiz
-                    </Button>
+                </Button>
 
-                    <Button
+                <Button
-                        variant="outlined"
+                    variant="outlined"
-                        color="primary"
+                    color="primary"
-                        startIcon={<Upload />}
+                    startIcon={<Upload />}
-                        onClick={handleOnImport}
+                    onClick={handleOnImport}
                         sx={{ borderRadius: '8px' }}
-                    >
+                >
-                        Importer
+                    Importer
-                    </Button>
+                </Button>
-                </div>
             </div>
 
             {/* Conteneur principal avec les actions et la liste des quiz */}