Skip to content

Commit

Permalink
added responsiveness to header and sidebar component
Browse files Browse the repository at this point in the history
  • Loading branch information
@MTeofan
MTeofan committed Nov 25, 2024
1 parent 62893c5 commit ae5eea1
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 80 deletions.
66 changes: 30 additions & 36 deletions logic/frontend/web/src/component/HeaderComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
"use client";
import React, {useEffect, useState} from 'react';
import {AppBar, Autocomplete, Box, TextField, Toolbar, Typography} from "@mui/material";
import React, { useEffect, useState } from 'react';
import { AppBar, Autocomplete, Box, TextField, Toolbar, Typography, useMediaQuery } from "@mui/material";
import Image from "next/image";
import AccountCircle from '@mui/icons-material/AccountCircle';
import { useUser } from '@/provider/UserProvider';
import axios from "axios";
import {UserModel} from "@/model/model";
import { UserModel } from "@/model/model";
import Link from "next/link";

const HeaderComponent = () => {
const { user } = useUser();
const [searchTerm, setSearchTerm] = useState('');
const [options, setOptions] = useState<UserModel[]>([]);
const isMobile = useMediaQuery('(max-width: 600px)'); // Detects small screens

const fetchUsers = async () => {
if (searchTerm.length > 1) {
Expand All @@ -35,36 +36,28 @@ const HeaderComponent = () => {
fetchUsers();
}, [searchTerm]);


return (
<AppBar position="fixed" sx={{ bgcolor: "#1C2357", zIndex: "100" }}>
<Toolbar sx={{ mx: 3 }} disableGutters>
{/* Logo */}
<Image src={"/boast_white.png"} alt={"boast"} width={120} height={10}
priority={true} style={{objectFit: "contain", width: "auto", height: "auto"}}/>
priority={true} style={{ objectFit: "contain", width: "auto", height: "auto" }} />

{/* Search Bar */}
<Autocomplete
sx={{
width: 300,
ml: 4,
'& .MuiInputBase-root': {
color: '#fff',
},
'& .MuiInputLabel-root': {
color: '#fff',
},
'& .MuiAutocomplete-popupIndicator': {
color: '#fff',
},
'& .MuiAutocomplete-clearIndicator': {
color: '#fff',
},
'& .MuiInputBase-root': { color: '#fff' },
'& .MuiInputLabel-root': { color: '#fff' },
'& .MuiAutocomplete-popupIndicator': { color: '#fff' },
'& .MuiAutocomplete-clearIndicator': { color: '#fff' },
}}
freeSolo
options={options}
getOptionLabel={(option: UserModel | string ) => (typeof option === "string") ? option : option.username}
getOptionLabel={(option: UserModel | string) => (typeof option === "string") ? option : option.username}
renderOption={(props, option) => (
<Link onClick={() => {
setSearchTerm('')
}} href={`/profile/${option.username}`} passHref>
<Link onClick={() => setSearchTerm('')} href={`/profile/${option.username}`} passHref>
<Box component="li" {...props}>
{option.username}
</Box>
Expand All @@ -73,32 +66,33 @@ const HeaderComponent = () => {
renderInput={(params) => (
<TextField
{...params}
InputLabelProps={{
style: {color: '#fff'},
}}
InputLabelProps={{ style: { color: '#fff' } }}
label="Search Users"
variant="outlined"
onChange={(e) => setSearchTerm(e.target.value)}
/>
)}
/>

<Box sx={{flexGrow: 1}}></Box>
<Box sx={{ flexGrow: 1 }}></Box>

<Box sx={{ display: "flex", flexDirection: "row" }}>
<AccountCircle sx={{ fontSize: 50, my: "auto", mx: 1 }} />
<Box>
<Typography variant="h6" component="div">
{user?.username || 'Guest'}
</Typography>
<Typography variant="h6" component="div">
{user?.email || 'guest@example.com'}
</Typography>
</Box>
{/* Profile Section */}
<Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
<AccountCircle sx={{ fontSize: 50, mx: 1 }} />
{!isMobile && (
<Box>
<Typography variant="h6" component="div">
{user?.username || 'Guest'}
</Typography>
<Typography variant="h6" component="div">
{user?.email || 'guest@example.com'}
</Typography>
</Box>
)}
</Box>
</Toolbar>
</AppBar>
);
};

export default HeaderComponent;
export default HeaderComponent;
90 changes: 46 additions & 44 deletions logic/frontend/web/src/component/SideBarComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@ import { RocketLaunch, Person, Logout } from "@mui/icons-material";
import NotificationsIcon from '@mui/icons-material/Notifications';
import Link from "next/link";
import React from "react";
import {usePathname} from "next/navigation";
import { usePathname } from "next/navigation";
import { useMediaQuery } from "@mui/material";

export default function SideBarComponent() {
const pathname = usePathname();

console.log(pathname)
const isMobile = useMediaQuery('(max-width: 600px)');

return (
<Drawer
sx={{
width: "calc((100vw/12)*2)",
width: isMobile ? "60px" : "calc((100vw/12)*2)",
flexShrink: 0,
'& .MuiDrawer-paper': {
width: "calc((100vw/12)*2)",
width: isMobile ? "60px" : "calc((100vw/12)*2)",
boxSizing: 'border-box',
bgcolor: "#1C2357",
height: "calc(100vh - 64px)",
Expand All @@ -27,78 +27,80 @@ export default function SideBarComponent() {
}}
variant="permanent"
anchor="bottom"
PaperProps={{ sx: { width: "calc((100vw/12)*2)" } }}
PaperProps={{ sx: { width: isMobile ? "60px" : "calc((100vw/12)*2)" } }}
>

{/* For You Section */}
<Link href="/FYP" style={{ textDecoration: 'none', marginLeft: "2rem", cursor: "pointer"}} >
<Link href="/FYP" style={{ textDecoration: 'none', marginLeft: isMobile ? "0" : "2rem", cursor: "pointer" }}>
<List>
<ListItem>
<ListItemIcon sx={{ color: "#8691C3" }}>
<RocketLaunch />
</ListItemIcon>
<ListItemText>
<Typography
sx={{ color: pathname === "/FYP" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
For You
</Typography>
</ListItemText>
{!isMobile && (
<ListItemText>
<Typography
sx={{ color: pathname === "/FYP" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
For You
</Typography>
</ListItemText>
)}
</ListItem>
</List>
</Link>

{/* Notification Section */}
<Link href="/notification" style={{ textDecoration: 'none', marginLeft: "2rem", cursor: "pointer" }}>
<Link href="/notification" style={{ textDecoration: 'none', marginLeft: isMobile ? "0" : "2rem", cursor: "pointer" }}>
<List>
<ListItem>
<ListItemIcon sx={{ color: "#8691C3" }}>
<NotificationsIcon />
</ListItemIcon>
<ListItemText>
<Typography
sx={{ color: pathname === "/notification" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
Notifications
</Typography>
</ListItemText>
{!isMobile && (
<ListItemText>
<Typography
sx={{ color: pathname === "/notification" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
Notifications
</Typography>
</ListItemText>
)}
</ListItem>
</List>
</Link>

{/* Profile Section */}
<Link href="/profile" style={{ textDecoration: 'none', marginLeft: "2rem", cursor: "pointer" }}>
<Link href="/profile" style={{ textDecoration: 'none', marginLeft: isMobile ? "0" : "2rem", cursor: "pointer" }}>
<List>
<ListItem>
<ListItemIcon sx={{ color: "#8691C3" }}>
<Person />
</ListItemIcon>
<ListItemText>
<Typography
sx={{ color: pathname === "/profile" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
Profile
</Typography>
</ListItemText>
{!isMobile && (
<ListItemText>
<Typography
sx={{ color: pathname === "/profile" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
Profile
</Typography>
</ListItemText>
)}
</ListItem>
</List>
</Link>


{/* Logout Section */}
<Link href="/logout" style={{ textDecoration: 'none', marginTop: "auto", marginLeft: "2rem" }}>
<Link href="/logout" style={{ textDecoration: 'none', marginTop: "auto", marginLeft: isMobile ? "0" : "2rem" }}>
<List>
<ListItem>
<ListItemIcon sx={{ color: "#8691C3" }}>
<Logout />
</ListItemIcon>
<ListItemText>
<Typography
sx={{ color: "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
Logout
</Typography>
</ListItemText>
{!isMobile && (
<ListItemText>
<Typography
sx={{ color: "#8691C3", fontWeight: "500", fontSize: "16px" }}
>
Logout
</Typography>
</ListItemText>
)}
</ListItem>
</List>
</Link>
Expand Down

0 comments on commit ae5eea1

Please sign in to comment.