ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: add open/close animation to NotificationCenter dropdown

Browse Source 
Match AppLauncher & UserMenu Framer Motion treatment:
opacity + scale + y-offset with 0.15s transition
This commit is contained in:
Usman Baig
2026-03-24 21:45:26 +01:00
parent 538df57d2b
commit d48479ee5b
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/notifications/NotificationCenter.tsx
View File

@@ -6,6 +6,7 @@
import { useEffect, useState, useRef, useCallback } from 'react' import { useEffect, useState, useRef, useCallback } from 'react'
import { createPortal } from 'react-dom' import { createPortal } from 'react-dom'
import { motion, AnimatePresence } from 'framer-motion'
import Link from 'next/link' import Link from 'next/link'
import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications' import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
import { getAuthErrorMessage } from '@ciphera-net/ui' import { getAuthErrorMessage } from '@ciphera-net/ui'
@@ -198,12 +199,18 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
</button> </button>
{(() => { {(() => {
const panel = open ? ( const panel = (
<div <AnimatePresence>
{open && (
<motion.div
ref={panelRef} ref={panelRef}
id="notification-dropdown" id="notification-dropdown"
role="dialog" role="dialog"
aria-label="Notifications" aria-label="Notifications"
initial={{ opacity: 0, y: 10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }}
transition={{ duration: 0.15 }}
className={`bg-white dark:bg-neutral-900/65 border border-neutral-200 dark:border-white/[0.08] rounded-xl shadow-xl dark:shadow-black/20 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:dark:bg-neutral-900/60 overflow-hidden z-[100] ${ className={`bg-white dark:bg-neutral-900/65 border border-neutral-200 dark:border-white/[0.08] rounded-xl shadow-xl dark:shadow-black/20 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:dark:bg-neutral-900/60 overflow-hidden z-[100] ${
anchor === 'right' anchor === 'right'
? `fixed w-96 ${fixedPos?.bottom !== undefined ? 'origin-bottom-left' : 'origin-top-left'}` ? `fixed w-96 ${fixedPos?.bottom !== undefined ? 'origin-bottom-left' : 'origin-top-left'}`
@@ -321,10 +328,12 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
Manage settings Manage settings
</Link> </Link>
</div> </div>
</div> </motion.div>
) : null )}
</AnimatePresence>
)
return anchor === 'right' && panel && typeof document !== 'undefined' return anchor === 'right' && typeof document !== 'undefined'
? createPortal(panel, document.body) ? createPortal(panel, document.body)
: panel : panel
})()} })()}