Make navbar responsive on mobile

OSDG-IIITH · Dec 6, 2024 · fb974a6 · fb974a6
1 parent 30bf6dc
commit fb974a6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -1,19 +1,28 @@
-import { AppBar, Toolbar, Typography, Button } from '@mui/material';
+import { AppBar, Toolbar, Typography, Button, Box, useMediaQuery, useTheme } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { do_login, do_logout } from '../api';
 
 const Navbar = ({ isLoggedIn }) => {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); // Adjust for small screens
+
   return (
     <AppBar position="static" color="primary">
-      <Toolbar>
+      <Toolbar sx={{
+        display: "flex",
+        flexDirection: isSmallScreen ? "column" : "row",
+        justifyContent: isSmallScreen ? "center" : "space-between",
+        alignItems: "center",
+        textAlign: isSmallScreen ? "center" : "left",
+      }}>
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
           ReviewIIITH
         </Typography>
-        <Button color="inherit" component={Link} to="/">
-          Home
-        </Button>
         {isLoggedIn ? (
-          <>
+          <Box sx={{ display: "flex", gap: 1 }}>
+            <Button color="inherit" component={Link} to="/">
+              Home
+            </Button>
             <Button color="inherit" component={Link} to="/courses">
               Courses
             </Button>
@@ -23,7 +32,7 @@ const Navbar = ({ isLoggedIn }) => {
             <Button color="inherit" onClick={do_logout}>
               Logout
             </Button>
-          </>
+          </Box>
         ) : (
           <>
             <Button color="inherit" onClick={do_login}>

diff --git a/frontend/src/pages/Profs.jsx b/frontend/src/pages/Profs.jsx
@@ -80,7 +80,7 @@ const Profs = () => {
           renderInput={(params) => (
             <TextField {...params} label="Search (by name or email)" />
           )}
-          sx={{ borderRadius: 2, flexGrow: 1, minWidth: 300 }}
+          sx={{ borderRadius: 2, flexGrow: 1 }}
         />
         <Tooltip
           title={