Skip to content

feat(home): enhance UI with reveal animations and improve layout for better UX #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hoangsonww merged 2 commits into from
Feb 4, 2026
Merged

feat(home): enhance UI with reveal animations and improve layout for better UX #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5efdd48
feat(home): enhance UI with reveal animations and improve layout for …
hoangsonww Feb 4, 2026
8eb3478
feat(home): enhance UI with reveal animations and improve layout for …
hoangsonww Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ The API also integrates with **PostgreSQL**, **MongoDB**, **MySQL**, **Redis**,
</a>
</p>

Below is a _very_ _comprehensive_ guide to setting up, running, and utilizing this API. 💸🚀
Below is a _very_ _comprehensive_ guide to setting up, running, and utilizing this API! 💸🚀

## **Table of Contents**

Expand Down
21 changes: 18 additions & 3 deletions frontend/src/components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
import React, { useState, useEffect } from 'react';
import { AppBar, Toolbar, Typography, IconButton, Button, Drawer, List, ListItemButton, ListItemIcon, ListItemText, Box, Stack } from '@mui/material';
import {
AppBar,
Toolbar,
Typography,
IconButton,
Button,
Drawer,
List,
ListItemButton,
ListItemIcon,
ListItemText,
Box,
Stack,
useMediaQuery,
} from '@mui/material';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeIcon from '@mui/icons-material/DarkMode';
Expand All @@ -20,6 +34,7 @@ function Navbar({ mode, setMode }) {
const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('token'));
const navigate = useNavigate();
const location = useLocation();
const isMobileNav = useMediaQuery('(max-width:1350px)');

@gemini-code-assist gemini-code-assist Bot Feb 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better maintainability and consistency with the Material-UI theme, it's recommended to use theme breakpoints instead of a hardcoded pixel value in useMediaQuery. This makes your responsive logic more robust and easier to manage alongside the rest of your theme. You can pass a callback to useMediaQuery to access the theme's breakpoint helpers.

Suggested change
const isMobileNav = useMediaQuery('(max-width:1350px)');
const isMobileNav = useMediaQuery(theme => theme.breakpoints.down('lg'));

Copilot AI Feb 4, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The custom breakpoint value '1350px' in useMediaQuery doesn't align with Material-UI's standard breakpoints (xs: 0px, sm: 600px, md: 900px, lg: 1200px, xl: 1536px). Using a non-standard breakpoint can lead to inconsistent responsive behavior across the application. Consider using Material-UI's theme.breakpoints.down('lg') or theme.breakpoints.down('xl') instead, or document why this specific breakpoint is needed.

Copilot uses AI. Check for mistakes.

const handleToggleMode = () => {
setMode(prev => (prev === 'light' ? 'dark' : 'light'));
Expand Down Expand Up @@ -86,7 +101,7 @@ function Navbar({ mode, setMode }) {
<>
<AppBar position="sticky" elevation={0}>
<Toolbar sx={{ py: 1, gap: 2 }}>
<IconButton sx={{ display: { xs: 'block', md: 'none' } }} color="inherit" onClick={() => setDrawerOpen(true)}>
<IconButton sx={{ display: isMobileNav ? 'block' : 'none' }} color="inherit" onClick={() => setDrawerOpen(true)}>
<MenuIcon />
</IconButton>
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ flexGrow: 1 }}>
Expand Down Expand Up @@ -115,7 +130,7 @@ function Navbar({ mode, setMode }) {
</Box>
</Stack>

<Box sx={{ display: { xs: 'none', md: 'flex' }, gap: 1 }}>
<Box sx={{ display: isMobileNav ? 'none' : 'flex', gap: 1 }}>
{navLinks.map(link => {
const isActive = location.pathname === link.to;
const isLogout = link.label === 'Logout';
Expand Down
Loading
Loading