Skip to main content

​
Overview

Cat Web features a Material-UI based dashboard with a responsive navigation drawer, AppBar, and user-friendly interface. The layout is built with modern React patterns and provides seamless navigation throughout the application.

​
Dashboard Page

The main dashboard page welcomes authenticated users and provides quick access to logout functionality:
src/pages/Dashboard/Dashboard.tsx
import React from 'react';
import { Box, Button, Typography } from '@mui/material';
import { useAuth0 } from '@auth0/auth0-react';

const Dashboard: React.FC = () => {
    const { user, logout } = useAuth0();

    return (
        <Box sx={{ my: 4 }}>
            <Typography variant="h4" component="h1" gutterBottom>
                Dashboard
            </Typography>
            <Typography variant="h2" component="h2" gutterBottom>
                Welcome, {user?.name}
            </Typography>
            <Button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
                Logout
            </Button>
        </Box>
    );
};

​
Key Features

Personalized Greeting

Displays the authenticated user’s name from Auth0

Quick Logout

One-click logout with automatic redirect

Material-UI Styling

Consistent spacing and typography using MUI’s sx prop

Responsive Layout

Adapts to different screen sizes automatically

​
Master Layout

The MasterLayout component provides the application shell with an AppBar, navigation drawer, and content area:

​
AppBar Component

The AppBar displays the application title, user information, and menu toggle:
src/components/MasterLayout.tsx
<AppBar position="static">
    <Toolbar sx={{ justifyContent: 'space-between' }}>
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <Inventory2Icon sx={{ mr: 1 }} />
            <Typography variant="h6" component="div">
                Inventory catalogue
            </Typography>
        </Box>
        {isAuthenticated && !isLoading && (
            <Box display="flex" alignItems="center">
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                    <Typography variant="body1" sx={{ mr: 2 }}>
                        {user?.name}
                    </Typography>
                </Box>
                <IconButton
                    color="inherit"
                    aria-label="open drawer"
                    edge="end"
                    onClick={toggleDrawer}
                >
                    <MenuIcon />
                </IconButton>
            </Box>
        )}
    </Toolbar>
</AppBar>
The AppBar conditionally renders the user menu only when a user is authenticated, providing a clean interface for unauthenticated visitors.
The navigation drawer provides access to all major sections of the application:
src/components/MasterLayout.tsx
<Drawer
    anchor="right"
    open={drawerOpen}
    onClose={toggleDrawer}
>
    <Box
        sx={{ width: 250 }}
        role="presentation"
        onClick={toggleDrawer}
    >
        <List>
            <ListItem>
                <Link to="/" style={{ textDecoration: 'none', color: 'inherit', display: 'block', width: '100%' }}>
                    <ListItemButton>
                        <ListItemIcon>
                            <HomeIcon />
                        </ListItemIcon>
                        <ListItemText primary="Home" />
                    </ListItemButton>
                </Link>
            </ListItem>
            <ListItem>
                <Link to="/dashboard" style={{ textDecoration: 'none', color: 'inherit', display: 'block', width: '100%' }}>
                    <ListItemButton>
                        <ListItemIcon>
                            <Inventory2Icon />
                        </ListItemIcon>
                        <ListItemText primary="Inventory" />
                    </ListItemButton>
                </Link>
            </ListItem>
            <ListItem>
                <Link to="/api-tests" style={{ textDecoration: 'none', color: 'inherit', display: 'block', width: '100%' }}>
                    <ListItemButton>
                        <ListItemIcon>
                            <ApiIcon />
                        </ListItemIcon>
                        <ListItemText primary="API tests" />
                    </ListItemButton>
                </Link>
            </ListItem>
            <ListItem>
                <ListItemButton onClick={() => {
                    logout({ logoutParams: { returnTo: window.location.origin } });
                }}>
                    <ListItemIcon>
                        <LogoutIcon />
                    </ListItemIcon>
                    <ListItemText primary="Logout" />
                </ListItemButton>
            </ListItem>
        </List>
    </Box>
</Drawer>
Takes users to the landing page:
<Link to="/">
    <ListItemButton>
        <ListItemIcon><HomeIcon /></ListItemIcon>
        <ListItemText primary="Home" />
    </ListItemButton>
</Link>

​
Material-UI Components

The dashboard leverages several Material-UI components:
  • Box - Flexible container with sx prop for styling
  • Container - Responsive wrapper for main content
  • AppBar - Top application bar
  • Toolbar - AppBar content container
  • Typography - Text with consistent styling
  • Button - Action buttons
  • IconButton - Icon-only buttons
  • Inventory2Icon - Inventory/catalogue icon
  • MenuIcon - Hamburger menu icon
  • HomeIcon - Home navigation icon
  • LogoutIcon - Logout action icon
  • ApiIcon - API testing icon

​
Drawer State Management

The drawer uses React’s useState hook for simple, effective state management:
src/components/MasterLayout.tsx
const [drawerOpen, setDrawerOpen] = useState(false);

const toggleDrawer = () => {
    setDrawerOpen(!drawerOpen);
};
The drawer automatically closes when a navigation item is clicked: 
<Box
    sx={{ width: 250 }}
    role="presentation"
    onClick={toggleDrawer}  // Closes drawer on any click
>

​
Layout Structure

The layout uses a flex column structure to ensure the footer stays at the bottom:
src/components/MasterLayout.tsx
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
    <AppBar position="static">
        {/* AppBar content */}
    </AppBar>

    <Drawer>
        {/* Navigation drawer */}
    </Drawer>

    <Container component="main" sx={{ flexGrow: 1, py: 3 }}>
        <Outlet />  {/* React Router renders child routes here */}
    </Container>
</Box>
The <Outlet /> component from React Router renders the active route’s component within the layout.

​
Styling with sx Prop

Material-UI’s sx prop provides inline styling with theme access: 
<Box sx={{ my: 4 }}>  {/* margin-top and margin-bottom: 4 * theme spacing */}

​
Responsive Design

The layout automatically adapts to different screen sizes:
  • Mobile: Drawer provides compact navigation
  • Tablet: Full drawer width with touch-friendly targets
  • Desktop: Smooth drawer animations and hover states

​
Next Steps

Authentication

Learn how Auth0 protects the dashboard

API Integration

See how the dashboard fetches data from APIs

Build docs developers (and LLMs) love

Get started for freeTalk to us