Ignore:
File:
1 edited

Legend:

Unmodified
Added
Removed

  • components/Navbar.tsx

    r87b79bc re599341  
    77import Menu from "@mui/material/Menu";
    88import MenuItem from "@mui/material/MenuItem";
    9 import IconButton from "@mui/material/IconButton";
    10 import Drawer from "@mui/material/Drawer";
    11 import List from "@mui/material/List";
    12 import ListItem from "@mui/material/ListItem";
    13 import ListItemButton from "@mui/material/ListItemButton";
    14 import ListItemIcon from "@mui/material/ListItemIcon";
    15 import ListItemText from "@mui/material/ListItemText";
    16 import Divider from "@mui/material/Divider";
    17 import Collapse from "@mui/material/Collapse";
    18 
    199import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
    20 import MenuIcon from '@mui/icons-material/Menu';
    21 import CloseIcon from '@mui/icons-material/Close';
    22 import BuildIcon from '@mui/icons-material/Build';
    23 import ViewListIcon from '@mui/icons-material/ViewList';
    24 import ExpandLess from '@mui/icons-material/ExpandLess';
    25 import ExpandMore from '@mui/icons-material/ExpandMore';
    26 import PersonIcon from '@mui/icons-material/Person';
    27 import LogoutIcon from '@mui/icons-material/Logout';
    28 import LoginIcon from '@mui/icons-material/Login';
    29 import PersonAddIcon from '@mui/icons-material/PersonAdd';
    30 
    3110import {
    32     Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
     11    Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, ListItemText
    3312} from "@mui/material";
    3413
    … …  
    6039    { id: 'power_supply', label: 'Power Supplies', icon: <StorageIcon fontSize="small" /> },
    6140    { id: 'cooler', label: 'Cooling', icon: <StorageIcon fontSize="small" /> },
     41
     42    // Peripherals / Accessories (Missing ones)
    6243    { id: 'network_adapter', label: 'Network Adapters (WiFi)', icon: <RouterIcon fontSize="small" /> },
    6344    { id: 'network_card', label: 'Network Cards (Ethernet)', icon: <LanIcon fontSize="small" /> },
    … …  
    6849];
    6950
     51
    7052export default function Navbar() {
    7153    const [auth, setAuth] = useState<AuthState | null>(null);
    7254    const [openLogoutDialog, setOpenLogoutDialog] = useState(false);
    73     const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
    74     const [mobileComponentsOpen, setMobileComponentsOpen] = useState(false);
    7555
    7656    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
    … …  
    9272        setBrowserOpen(true);
    9373        handleMenuClose();
    94         setMobileDrawerOpen(false);
    95         setMobileComponentsOpen(false);
    9674    };
    9775
    … …  
    9977        e.preventDefault();
    10078        setOpenLogoutDialog(true);
    101         setMobileDrawerOpen(false);
    10279    };
    10380
    … …  
    137114            <AppBar position="static" color="default" enableColorOnDark>
    138115                <Toolbar>
    139                     <Box sx={{ display: 'flex', alignItems: 'center', mr: { xs: 1, md: 4 } }}>
    140                         <Box
    141                             component="img"
    142                             src={LogoUrl}
    143                             alt="PC Forge Logo"
    144                             sx={{ height: 40, mr: { xs: 1, md: 2 }, cursor: 'pointer' }}
    145                             onClick={() => window.location.href='/'}
    146                         />
    147                         <Typography
    148                             variant="h6"
    149                             component="a"
    150                             href="/"
    151                             sx={{
    152                                 textDecoration: "none",
    153                                 color: "inherit",
    154                                 fontWeight: "bold",
    155                                 display: { xs: 'none', sm: 'block' }
    156                             }}
    157                         >
     116                    <Box sx={{ display: 'flex', alignItems: 'center', mr: 4 }}>
     117                        <Box component="img" src={LogoUrl} alt="PC Forge Logo" sx={{ height: 40, mr: 2, cursor: 'pointer' }} onClick={() => window.location.href='/'} />
     118                        <Typography variant="h6" component="a" href="/" sx={{ textDecoration: "none", color: "inherit", fontWeight: "bold" }}>
    158119                            PC Forge
    159120                        </Typography>
    … …  
    179140                            {COMPONENT_CATEGORIES.map((cat) => (
    180141                                <MenuItem key={cat.id} onClick={() => handleCategorySelect(cat.id)}>
    181                                     <ListItemIcon>{cat.icon}</ListItemIcon>
     142                                    {/*<ListItemIcon>{cat.icon}</ListItemIcon>*/}
    182143                                    <ListItemText>{cat.label}</ListItemText>
    183144                                </MenuItem>
    … …  
    190151                    <Box sx={{ flexGrow: 1 }} />
    191152
    192                     <Box sx={{ display: { xs: 'none', md: 'flex' }, gap: 1 }}>
     153                    <Box sx={{ display: 'flex', gap: 1 }}>
    193154                        {auth?.isLoggedIn ? (
    194155                            <>
    … …  
    198159                        ) : (
    199160                            <>
    200                                 <Button color="inherit" href="/auth/login" sx={onHoverNav}>Login</Button>
    201                                 <Button color="inherit" href="/auth/register" sx={onHoverNav}>Register</Button>
     161                                <Button color="inherit" href="/auth/login">Login</Button>
     162                                <Button color="inherit" href="/auth/register">Register</Button>
    202163                            </>
    203164                        )}
    204165                    </Box>
    205 
    206                     <IconButton
    207                         color="inherit"
    208                         edge="end"
    209                         onClick={() => setMobileDrawerOpen(true)}
    210                         sx={{ display: { xs: 'block', md: 'none' } }}
    211                     >
    212                         <MenuIcon />
    213                     </IconButton>
    214166                </Toolbar>
    215167            </AppBar>
    216 
    217             <Drawer
    218                 anchor="right"
    219                 open={mobileDrawerOpen}
    220                 onClose={() => setMobileDrawerOpen(false)}
    221                 sx={{
    222                     display: { xs: 'block', md: 'none' },
    223                     '& .MuiDrawer-paper': { width: 280 , height: '60%'}
    224                 }}
    225             >
    226                 <Box sx={{ p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    227                     <Typography variant="h6" fontWeight="bold">Menu</Typography>
    228                     <IconButton onClick={() => setMobileDrawerOpen(false)}>
    229                         <CloseIcon />
    230                     </IconButton>
    231                 </Box>
    232                 <Divider />
    233 
    234                 <List>
    235                     <ListItem disablePadding>
    236                         <ListItemButton onClick={() => { window.location.href = '/forge'; }}>
    237                             <ListItemIcon><BuildIcon /></ListItemIcon>
    238                             <ListItemText primary="Forge" />
    239                         </ListItemButton>
    240                     </ListItem>
    241 
    242                     <ListItem disablePadding>
    243                         <ListItemButton onClick={() => setMobileComponentsOpen(!mobileComponentsOpen)}>
    244                             <ListItemIcon><ViewListIcon /></ListItemIcon>
    245                             <ListItemText primary="Components" />
    246                             {mobileComponentsOpen ? <ExpandLess /> : <ExpandMore />}
    247                         </ListItemButton>
    248                     </ListItem>
    249                     <Collapse in={mobileComponentsOpen} timeout="auto" unmountOnExit>
    250                         <List component="div" disablePadding>
    251                             {COMPONENT_CATEGORIES.map((cat) => (
    252                                 <ListItemButton
    253                                     key={cat.id}
    254                                     sx={{ pl: 4 }}
    255                                     onClick={() => handleCategorySelect(cat.id)}
    256                                 >
    257                                     <ListItemIcon>{cat.icon}</ListItemIcon>
    258                                     <ListItemText primary={cat.label} />
    259                                 </ListItemButton>
    260                             ))}
    261                         </List>
    262                     </Collapse>
    263 
    264                     <ListItem disablePadding>
    265                         <ListItemButton onClick={() => { window.location.href = '/completed-builds'; }}>
    266                             <ListItemIcon><ViewListIcon /></ListItemIcon>
    267                             <ListItemText primary="Completed Builds" />
    268                         </ListItemButton>
    269                     </ListItem>
    270 
    271                     <Divider sx={{ my: 1 }} />
    272 
    273                     {auth?.isLoggedIn ? (
    274                         <>
    275                             <ListItem disablePadding>
    276                                 <ListItemButton onClick={() => { window.location.href = checkDashboardUrl; }}>
    277                                     <ListItemIcon><PersonIcon /></ListItemIcon>
    278                                     <ListItemText primary={"My Profile"} />
    279                                 </ListItemButton>
    280                             </ListItem>
    281                             <ListItem disablePadding>
    282                                 <ListItemButton onClick={handleLogoutClick}>
    283                                     <ListItemIcon><LogoutIcon /></ListItemIcon>
    284                                     <ListItemText primary="Logout" />
    285                                 </ListItemButton>
    286                             </ListItem>
    287                         </>
    288                     ) : (
    289                         <>
    290                             <ListItem disablePadding>
    291                                 <ListItemButton onClick={() => { window.location.href = '/auth/login'; }}>
    292                                     <ListItemIcon><LoginIcon /></ListItemIcon>
    293                                     <ListItemText primary="Login" />
    294                                 </ListItemButton>
    295                             </ListItem>
    296                             <ListItem disablePadding>
    297                                 <ListItemButton onClick={() => { window.location.href = '/auth/register'; }}>
    298                                     <ListItemIcon><PersonAddIcon /></ListItemIcon>
    299                                     <ListItemText primary="Register" />
    300                                 </ListItemButton>
    301                             </ListItem>
    302                         </>
    303                     )}
    304                 </List>
    305             </Drawer>
    306168
    307169            <Dialog open={openLogoutDialog} onClose={() => setOpenLogoutDialog(false)}>
Note: See TracChangeset for help on using the changeset viewer.