Skip to content

Drop down UI Enhanced #314

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

Closed
wants to merge 7 commits into from
Closed

Drop down UI Enhanced #314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
51b348a
style issue fixed
vaishcodescape Jul 13, 2025
8b680bd
css issue fixed
vaishcodescape Jul 13, 2025
421bd2b
Merge pull request #1 from vaishcodescape/css_issue
vaishcodescape Jul 13, 2025
6ee8be3
UI of drop down enhanced
vaishcodescape Jul 13, 2025
ccb89b5
Update pull request template with corrected contributing link
vaishcodescape Jul 13, 2025
04db442
linting fixed
vaishcodescape Jul 13, 2025
11596a1
minor fixes made
vaishcodescape Jul 14, 2025
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/PULL_REQUEST_TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,6 @@ This PR fixes #

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See [contributing instructions](https://github.com/sugarlabs/musicblocks/blob/master/README.md).
📚 See [contributing instructions](https://github.com/sugarlabs/www-v2/blob/master/README.md).

🙋🏾🙋🏼 Questions: [Community Matrix Server](https://matrix.to/#/#sugar:matrix.org).
72 changes: 72 additions & 0 deletions PULL_REQUEST_DESCRIPTION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
name: Pull Request
about: Submit changes to the project for review and inclusion
---

## Description

This pull request enhances the dropdown navigation UI with significant visual improvements and animations. The changes transform the basic dropdown into a modern, interactive component with enhanced user experience through advanced animations, hover effects, and visual feedback.

## Related Issue

This PR enhances the dropdown navigation UI experience.

## Changes Made

- **Enhanced Button Styling**:
- Upgraded from basic styling to modern rounded-xl design with enhanced padding
- Added font-semibold for better typography hierarchy
- Implemented group hover effects with scale and rotation animations
- Added border and shadow effects on hover for better visual feedback

- **Advanced Animation System**:
- Replaced simple fade animations with complex 3D transforms (rotateX, scale)
- Implemented spring-based animations with custom easing curves
- Added staggered animations for dropdown items with index-based delays
- Enhanced transition timing and easing for smoother interactions

- **Visual Enhancements**:
- Added shimmer effects that sweep across elements on hover
- Implemented layered background effects with opacity transitions
- Created animated dot indicators that scale and appear on hover
- Added enhanced arrow indicators with slide-in animations
- Included top and bottom accent bars with gradient effects

- **Improved Layout and Spacing**:
- Increased dropdown width from 56 to 72 units for better content display
- Enhanced padding and margins throughout the component
- Added rounded-3xl for more modern appearance
- Implemented better shadow system with blue tinting

- **Interactive Feedback**:
- Added scale effects on hover for dropdown items
- Implemented font weight transitions (medium to semibold)
- Created smooth color transitions with enhanced contrast
- Added border effects that appear on hover

## Testing Performed

- Tested dropdown functionality across different screen sizes
- Verified all hover animations work smoothly
- Confirmed dropdown items navigate correctly
- Tested accessibility with keyboard navigation
- Validated animations perform well on different devices
- Ensured no layout breaking on various viewport sizes

## Checklist

- [x] I have tested these changes locally and they work as expected.
- [x] I have followed the project's coding style guidelines.
- [x] I have addressed the code review feedback from the previous submission, if applicable.

## Additional Notes for Reviewers

The enhanced dropdown provides a significantly improved user experience with modern animations and visual feedback. The changes maintain accessibility while adding sophisticated visual effects. The spring-based animations and staggered item reveals create a polished, professional feel that aligns with modern web design standards.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See [contributing instructions](https://github.com/sugarlabs/www-v2/blob/master/README.md).

🙋🏾🙋🏼 Questions: [Community Matrix Server](https://matrix.to/#/#sugar:matrix.org).
120 changes: 97 additions & 23 deletions src/sections/NavDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,16 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
onMouseLeave={() => setActive(null)}
>
<button
className={`px-2 lg:px-3 py-2 text-gray-700 hover:text-blue-600 font-medium rounded-md
transition-all duration-200 hover:bg-gray-50 flex items-center space-x-1
${isActive ? 'text-blue-600' : ''}`}
className={`px-4 lg:px-5 py-3 text-gray-700 hover:text-blue-600 font-semibold rounded-xl
transition-all duration-300 hover:bg-blue-50
flex items-center space-x-2 group relative overflow-hidden border border-transparent
hover:border-blue-200/50 hover:shadow-lg hover:shadow-blue-500/10
${isActive ? 'text-blue-600 bg-blue-50 shadow-lg shadow-blue-500/20 border-blue-200/50' : ''}`}
aria-expanded={isActive}
>
<span>{label}</span>
<span className="relative z-10">{label}</span>
<svg
className={`w-4 h-4 transition-transform duration-200 ${isActive ? 'rotate-180' : ''}`}
className={`w-4 h-4 transition-all duration-300 group-hover:scale-110 group-hover:rotate-12 ${isActive ? 'rotate-180' : ''}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -45,34 +47,106 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
d="M19 9l-7 7-7-7"
/>
</svg>
{/* Enhanced hover effect background */}
<div className="absolute inset-0 bg-blue-100/60 opacity-0 group-hover:opacity-100 transition-all duration-300 rounded-xl" />
{/* Shimmer effect */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
</button>

<AnimatePresence>
{isActive && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.2 }}
className="absolute left-0 mt-2 w-56 rounded-xl bg-white shadow-xl ring-1 ring-black ring-opacity-5 overflow-hidden"
initial={{ opacity: 0, y: -15, scale: 0.9, rotateX: -15 }}
animate={{ opacity: 1, y: 0, scale: 1, rotateX: 0 }}
exit={{ opacity: 0, y: -15, scale: 0.9, rotateX: -15 }}
transition={{
duration: 0.3,
ease: [0.4, 0, 0.2, 1],
type: 'spring',
stiffness: 300,
damping: 30,
}}
className="absolute left-0 mt-4 w-72 rounded-3xl bg-white
shadow-2xl shadow-blue-500/20 ring-1 ring-black/5 border border-gray-100 overflow-hidden
transform origin-top perspective-1000"
>
<div className="py-2">
{items.map((item) => (
<Link
{/* Subtle border effect */}
<div className="absolute inset-0 bg-blue-50/30 rounded-3xl" />

{/* Top accent */}
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-blue-400/30 rounded-full" />

<div className="relative py-3">
{items.map((item, index) => (
<motion.div
key={item.path}
to={item.path}
onClick={onNavigate}
className="group flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-gray-50
transition-all duration-200 hover:text-blue-600"
initial={{ opacity: 0, x: -30, scale: 0.9 }}
animate={{ opacity: 1, x: 0, scale: 1 }}
transition={{
delay: index * 0.08,
duration: 0.3,
ease: [0.4, 0, 0.2, 1],
type: 'spring',
stiffness: 200,
}}
>
<span
className="w-2 h-2 rounded-full bg-blue-600 opacity-0 group-hover:opacity-100
transition-all duration-200 mr-2 transform scale-0 group-hover:scale-100"
/>
{item.label}
</Link>
<Link
to={item.path}
onClick={onNavigate}
className="group flex items-center px-5 py-4 text-sm text-gray-700 hover:text-blue-600
transition-all duration-300 hover:bg-blue-50
relative overflow-hidden mx-3 rounded-2xl hover:scale-[1.02] hover:shadow-lg hover:shadow-blue-500/10
border border-transparent hover:border-blue-200/50"
>
{/* Enhanced hover background */}
<div className="absolute inset-0 bg-blue-100/40 opacity-0 group-hover:opacity-100 transition-all duration-300 rounded-2xl" />

{/* Shimmer effect on hover */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-500 rounded-2xl" />

{/* Animated dot indicator */}
<div className="relative z-10 flex items-center w-full">
<div className="relative">
<span
className="w-3 h-3 rounded-full bg-blue-500
opacity-0 group-hover:opacity-100 transition-all duration-300 mr-4
transform scale-0 group-hover:scale-100 shadow-lg shadow-blue-500/50
flex items-center justify-center"
>
<span className="w-1 h-1 bg-white rounded-full opacity-80" />
</span>
</div>

<span className="relative z-10 font-medium group-hover:font-semibold transition-all duration-300 text-gray-800 group-hover:text-blue-700">
{item.label}
</span>

{/* Enhanced arrow indicator */}
<svg
className="w-4 h-4 ml-auto opacity-0 group-hover:opacity-100 transition-all duration-300
transform translate-x-3 group-hover:translate-x-0 text-blue-500 group-hover:text-blue-600
group-hover:scale-110"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</svg>
</div>
</Link>
</motion.div>
))}
</div>

{/* Enhanced bottom accent */}
<div className="h-1.5 bg-blue-500 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse" />
</div>
</motion.div>
)}
</AnimatePresence>
Expand Down
131 changes: 64 additions & 67 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
src: url('/fonts/Caveat-Regular.ttf');
}

@plugin 'tailwindcss-animate';

@custom-variant dark (&:is(.dark *));
@font-face {
font-family: 'Roboto';
src: url('/fonts/Roboto-Regular.ttf');
Expand Down Expand Up @@ -39,74 +36,74 @@
}

:root {
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.871 0.006 286.286);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--background: rgb(255, 255, 255);
--foreground: rgb(36, 36, 36);
--card: rgb(255, 255, 255);
--card-foreground: rgb(36, 36, 36);
--popover: rgb(255, 255, 255);
--popover-foreground: rgb(36, 36, 36);
--primary: rgb(53, 53, 53);
--primary-foreground: rgb(251, 251, 251);
--secondary: rgb(246, 246, 246);
--secondary-foreground: rgb(53, 53, 53);
--muted: rgb(246, 246, 246);
--muted-foreground: rgb(140, 140, 140);
--accent: rgb(246, 246, 246);
--accent-foreground: rgb(53, 53, 53);
--destructive: rgb(239, 68, 68);
--destructive-foreground: rgb(239, 68, 68);
--border: rgb(234, 234, 234);
--input: rgb(234, 234, 234);
--ring: rgb(222, 222, 222);
--chart-1: rgb(239, 68, 68);
--chart-2: rgb(34, 197, 94);
--chart-3: rgb(59, 130, 246);
--chart-4: rgb(245, 158, 11);
--chart-5: rgb(168, 85, 247);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.21 0.006 285.885);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.871 0.006 286.286);
--sidebar: rgb(251, 251, 251);
--sidebar-foreground: rgb(36, 36, 36);
--sidebar-primary: rgb(53, 53, 53);
--sidebar-primary-foreground: rgb(251, 251, 251);
--sidebar-accent: rgb(246, 246, 246);
--sidebar-accent-foreground: rgb(53, 53, 53);
--sidebar-border: rgb(234, 234, 234);
--sidebar-ring: rgb(222, 222, 222);
}

.dark {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.141 0.005 285.823);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.141 0.005 285.823);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.274 0.006 286.033);
--input: oklch(0.274 0.006 286.033);
--ring: oklch(0.442 0.017 285.786);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.274 0.006 286.033);
--sidebar-ring: oklch(0.442 0.017 285.786);
--background: rgb(36, 36, 36);
--foreground: rgb(251, 251, 251);
--card: rgb(36, 36, 36);
--card-foreground: rgb(251, 251, 251);
--popover: rgb(36, 36, 36);
--popover-foreground: rgb(251, 251, 251);
--primary: rgb(251, 251, 251);
--primary-foreground: rgb(53, 53, 53);
--secondary: rgb(70, 70, 70);
--secondary-foreground: rgb(251, 251, 251);
--muted: rgb(70, 70, 70);
--muted-foreground: rgb(179, 179, 179);
--accent: rgb(70, 70, 70);
--accent-foreground: rgb(251, 251, 251);
--destructive: rgb(127, 29, 29);
--destructive-foreground: rgb(248, 113, 113);
--border: rgb(70, 70, 70);
--input: rgb(70, 70, 70);
--ring: rgb(113, 113, 113);
--chart-1: rgb(124, 58, 237);
--chart-2: rgb(34, 197, 94);
--chart-3: rgb(168, 85, 247);
--chart-4: rgb(236, 72, 153);
--chart-5: rgb(239, 68, 68);
--sidebar: rgb(53, 53, 53);
--sidebar-foreground: rgb(251, 251, 251);
--sidebar-primary: rgb(124, 58, 237);
--sidebar-primary-foreground: rgb(251, 251, 251);
--sidebar-accent: rgb(70, 70, 70);
--sidebar-accent-foreground: rgb(251, 251, 251);
--sidebar-border: rgb(70, 70, 70);
--sidebar-ring: rgb(113, 113, 113);
}

@theme inline {
Expand Down