From 80a53d5d159fd5e8b6c0af73540a5e00b048ac60 Mon Sep 17 00:00:00 2001
From: RKWojs <rkwojs@gmail.com>
Date: Mon, 6 Oct 2025 16:01:29 +0200
Subject: [PATCH] feat: Add notifications dropdown to navigation and update
 translations for notifications

---
 src/components/ui/Navigation.js | 77 +++++++++++++++++++++++++++++++--
 src/lib/i18n.js                 |  7 +++
 2 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/Navigation.js b/src/components/ui/Navigation.js
index 7e26145..a31eb1e 100644
--- a/src/components/ui/Navigation.js
+++ b/src/components/ui/Navigation.js
@@ -4,13 +4,29 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useSession, signOut } from "next-auth/react";
 import { useTranslation } from "@/lib/i18n";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 
 const Navigation = () => {
 	const pathname = usePathname();
 	const { data: session, status } = useSession();
 	const { t } = useTranslation();
 	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+	const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
+	const notificationsRef = useRef(null);
+
+	// Close notifications dropdown when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (notificationsRef.current && !notificationsRef.current.contains(event.target)) {
+				setIsNotificationsOpen(false);
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, []);
 
 	const isActive = (path) => {
 		if (path === "/") return pathname === "/";
@@ -74,12 +90,43 @@ const Navigation = () => {
 						) : null}
 					</div>
 
-					{/* Right side - User/Auth section */}
+					{/* Right side - Notifications and User/Auth section */}
 					<div className="flex items-center space-x-4">
 						{status === "loading" ? (
 							<div className="text-blue-100">{t('navigation.loading')}</div>
 						) : session ? (
 							<>
+								{/* Notifications */}
+								<div className="relative" ref={notificationsRef}>
+									<button
+										onClick={() => setIsNotificationsOpen(!isNotificationsOpen)}
+										className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors relative"
+									>
+										<svg className="w-6 h-6" fill="currentColor" stroke="none" viewBox="0 0 640 640">
+											<path d="M320 64C306.7 64 296 74.7 296 88L296 97.7C214.6 109.3 152 179.4 152 264L152 278.5C152 316.2 142 353.2 123 385.8L101.1 423.2C97.8 429 96 435.5 96 442.2C96 463.1 112.9 480 133.8 480L506.2 480C527.1 480 544 463.1 544 442.2C544 435.5 542.2 428.9 538.9 423.2L517 385.7C498 353.1 488 316.1 488 278.4L488 263.9C488 179.3 425.4 109.2 344 97.6L344 87.9C344 74.6 333.3 63.9 320 63.9zM488.4 432L151.5 432L164.4 409.9C187.7 370 200 324.6 200 278.5L200 264C200 197.7 253.7 144 320 144C386.3 144 440 197.7 440 264L440 278.5C440 324.7 452.3 370 475.5 409.9L488.4 432zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L252.1 528z" />
+										</svg>
+										{/* Notification badge */}
+										<span className="absolute -top-1 -right-1 h-4 w-4 bg-gray-400 dark:bg-gray-500 text-white text-xs rounded-full flex items-center justify-center">
+											0
+										</span>
+									</button>
+
+									{/* Notifications Dropdown */}
+									{isNotificationsOpen && (
+										<div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+											<div className="p-4 border-b border-gray-200 dark:border-gray-700">
+												<h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('notifications.title')}</h3>
+											</div>
+											<div className="max-h-96 overflow-y-auto">
+												<div className="p-4 text-center text-gray-500 dark:text-gray-400">
+													<p className="text-sm">{t('notifications.noNotifications')}</p>
+													<p className="text-xs mt-1">{t('notifications.placeholder')}</p>
+												</div>
+											</div>
+										</div>
+									)}
+								</div>
+
 								{/* User Info */}
 								<div className="hidden md:flex items-center space-x-3">
 									<Link href="/settings" className="text-right hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md px-2 py-1 transition-colors">
@@ -117,7 +164,10 @@ const Navigation = () => {
 						{/* Mobile menu button */}
 						{session && (
 							<button
-								onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+								onClick={() => {
+									setIsMobileMenuOpen(!isMobileMenuOpen);
+									setIsNotificationsOpen(false);
+								}}
 								className="md:hidden p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
 							>
 								<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -140,7 +190,10 @@ const Navigation = () => {
 								<Link
 									key={item.href}
 									href={item.href}
-									onClick={() => setIsMobileMenuOpen(false)}
+									onClick={() => {
+										setIsMobileMenuOpen(false);
+										setIsNotificationsOpen(false);
+									}}
 									className={`px-4 py-3 rounded-md text-sm font-medium transition-colors ${
 										isActive(item.href)
 											? "bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-700"
@@ -167,6 +220,22 @@ const Navigation = () => {
 									</div>
 								</Link>
 								<div className="flex items-center space-x-2">
+									{/* Mobile Notifications */}
+									<button
+										onClick={() => {
+											setIsNotificationsOpen(!isNotificationsOpen);
+											setIsMobileMenuOpen(false);
+										}}
+										className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors relative"
+									>
+										<svg className="w-5 h-5" fill="currentColor" stroke="none" viewBox="0 0 640 640">
+											<path d="M320 64C306.7 64 296 74.7 296 88L296 97.7C214.6 109.3 152 179.4 152 264L152 278.5C152 316.2 142 353.2 123 385.8L101.1 423.2C97.8 429 96 435.5 96 442.2C96 463.1 112.9 480 133.8 480L506.2 480C527.1 480 544 463.1 544 442.2C544 435.5 542.2 428.9 538.9 423.2L517 385.7C498 353.1 488 316.1 488 278.4L488 263.9C488 179.3 425.4 109.2 344 97.6L344 87.9C344 74.6 333.3 63.9 320 63.9zM488.4 432L151.5 432L164.4 409.9C187.7 370 200 324.6 200 278.5L200 264C200 197.7 253.7 144 320 144C386.3 144 440 197.7 440 264L440 278.5C440 324.7 452.3 370 475.5 409.9L488.4 432zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L252.1 528z" />
+										</svg>
+										{/* Notification badge */}
+										<span className="absolute -top-1 -right-1 h-3 w-3 bg-gray-400 dark:bg-gray-500 text-white text-xs rounded-full flex items-center justify-center">
+											0
+										</span>
+									</button>
 									<button
 										onClick={() => {
 											setIsMobileMenuOpen(false);
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index fd8e11f..446b018 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -23,6 +23,13 @@ const translations = {
       signOut: "Wyloguj się",
       signIn: "Zaloguj się"
     },
+
+    // Notifications
+    notifications: {
+      title: "Powiadomienia",
+      noNotifications: "Brak powiadomień",
+      placeholder: "To jest miejsce na przyszłe powiadomienia"
+    },
     
     // Common UI elements
     common: {