matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add some css animation to make the project prettier #7

Merged
matthieu merged 7 commits from feature/issue-6-add-some-css-animation-to-make-the-project-prettie into master 2025-10-23 16:43:10 +02:00
Conversation 0 Commits 7 Files Changed 7 +198 -198
1 changed files with 198 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0475131b37 - Show all commits

30
src/components/Navigation.tsx
View File

@@ -74,18 +74,18 @@ import React, { useState, useRef, useEffect } from 'react';
return ( return (
<> <>
{/* Desktop Navigation - Top */} {/* Desktop Navigation - Top */}
<nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50"> <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50 animate-slide-in-left">
<div className="max-w-7xl mx-auto px-4"> <div className="max-w-7xl mx-auto px-4">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<div className="flex items-center space-x-8"> <div className="flex items-center space-x-8">
<span className="text-2xl font-bold text-orange-500">Deckerr</span> <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
{navItems.map((item) => ( {navItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => setCurrentPage(item.id)} onClick={() => setCurrentPage(item.id)}
className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-smooth
${currentPage === item.id ${currentPage === item.id
? 'text-white bg-gray-900' ? 'text-white bg-gray-900 animate-pulse-glow'
: 'text-gray-300 hover:text-white hover:bg-gray-700' : 'text-gray-300 hover:text-white hover:bg-gray-700'
}`} }`}
> >
@@ -100,32 +100,32 @@ import React, { useState, useRef, useEffect } from 'react';
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
<button <button
onClick={() => setShowDropdown(!showDropdown)} onClick={() => setShowDropdown(!showDropdown)}
className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700" className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700 transition-smooth"
> >
<img <img
src={getAvatarUrl(user.id)} src={getAvatarUrl(user.id)}
alt="User avatar" alt="User avatar"
className="w-8 h-8 rounded-full bg-gray-700" className="w-8 h-8 rounded-full bg-gray-700 transition-smooth hover:scale-110"
/> />
<span className="text-gray-300 text-sm">{username || user.email}</span> <span className="text-gray-300 text-sm">{username || user.email}</span>
<ChevronDown size={16} className="text-gray-400" /> <ChevronDown size={16} className="text-gray-400" />
</button> </button>
{showDropdown && ( {showDropdown && (
<div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700"> <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
<button <button
onClick={() => { onClick={() => {
setCurrentPage('profile'); setCurrentPage('profile');
setShowDropdown(false); setShowDropdown(false);
}} }}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<Settings size={16} /> <Settings size={16} />
<span>Profile Settings</span> <span>Profile Settings</span>
</button> </button>
<button <button
onClick={handleSignOut} onClick={handleSignOut}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<LogOut size={16} /> <LogOut size={16} />
<span>Sign Out</span> <span>Sign Out</span>
@@ -140,9 +140,9 @@ import React, { useState, useRef, useEffect } from 'react';
</nav> </nav>
{/* Mobile Navigation - Bottom */} {/* Mobile Navigation - Bottom */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50"> <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 animate-slide-in-right">
<div className="flex justify-between items-center h-16 px-4"> <div className="flex justify-between items-center h-16 px-4">
<span className="text-2xl font-bold text-orange-500">Deckerr</span> <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
<div className="relative" ref={mobileMenuRef}> <div className="relative" ref={mobileMenuRef}>
<button <button
onClick={() => setShowMobileMenu(!showMobileMenu)} onClick={() => setShowMobileMenu(!showMobileMenu)}
@@ -151,7 +151,7 @@ import React, { useState, useRef, useEffect } from 'react';
<Menu size={24} /> <Menu size={24} />
</button> </button>
{showMobileMenu && ( {showMobileMenu && (
<div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700"> <div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
{navItems.map((item) => ( {navItems.map((item) => (
<button <button
key={item.id} key={item.id}
@@ -159,7 +159,7 @@ import React, { useState, useRef, useEffect } from 'react';
setCurrentPage(item.id); setCurrentPage(item.id);
setShowMobileMenu(false); setShowMobileMenu(false);
}} }}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<item.icon size={16} /> <item.icon size={16} />
<span>{item.label}</span> <span>{item.label}</span>
@@ -172,14 +172,14 @@ import React, { useState, useRef, useEffect } from 'react';
setCurrentPage('profile'); setCurrentPage('profile');
setShowMobileMenu(false); setShowMobileMenu(false);
}} }}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<Settings size={16} /> <Settings size={16} />
<span>Profile Settings</span> <span>Profile Settings</span>
</button> </button>
<button <button
onClick={handleSignOut} onClick={handleSignOut}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700" className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
> >
<LogOut size={16} /> <LogOut size={16} />
<span>Sign Out</span> <span>Sign Out</span>