salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dd

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-16 21:33:55 +00:00
parent 9ab87416d8
commit cb0e42bb8d
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/header/NotificationDropdown.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react"; import { useState, useRef } from "react";
import { Dropdown } from "../ui/dropdown/Dropdown"; import { Dropdown } from "../ui/dropdown/Dropdown";
import { DropdownItem } from "../ui/dropdown/DropdownItem"; import { DropdownItem } from "../ui/dropdown/DropdownItem";
import { Link } from "react-router"; import { Link } from "react-router";
@@ -6,6 +6,7 @@ import { Link } from "react-router";
export default function NotificationDropdown() { export default function NotificationDropdown() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [notifying, setNotifying] = useState(true); const [notifying, setNotifying] = useState(true);
const buttonRef = useRef<HTMLButtonElement>(null);
function toggleDropdown() { function toggleDropdown() {
setIsOpen(!isOpen); setIsOpen(!isOpen);
@@ -22,6 +23,7 @@ export default function NotificationDropdown() {
return ( return (
<div className="relative"> <div className="relative">
<button <button
ref={buttonRef}
className="relative flex items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full dropdown-toggle hover:text-gray-700 h-11 w-11 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white" className="relative flex items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full dropdown-toggle hover:text-gray-700 h-11 w-11 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
onClick={handleClick} onClick={handleClick}
> >
@@ -50,7 +52,9 @@ export default function NotificationDropdown() {
<Dropdown <Dropdown
isOpen={isOpen} isOpen={isOpen}
onClose={closeDropdown} onClose={closeDropdown}
className="absolute -right-[240px] mt-[17px] flex h-[480px] w-[350px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark sm:w-[361px] lg:right-0" anchorRef={buttonRef}
placement="bottom-right"
className="flex h-[480px] w-[350px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark sm:w-[361px]"
> >
<div className="flex items-center justify-between pb-3 mb-3 border-b border-gray-100 dark:border-gray-700"> <div className="flex items-center justify-between pb-3 mb-3 border-b border-gray-100 dark:border-gray-700">
<h5 className="text-lg font-semibold text-gray-800 dark:text-gray-200"> <h5 className="text-lg font-semibold text-gray-800 dark:text-gray-200">

8
frontend/src/components/header/UserDropdown.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react"; import { useState, useRef } from "react";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import { DropdownItem } from "../ui/dropdown/DropdownItem"; import { DropdownItem } from "../ui/dropdown/DropdownItem";
import { Dropdown } from "../ui/dropdown/Dropdown"; import { Dropdown } from "../ui/dropdown/Dropdown";
@@ -9,6 +9,7 @@ export default function UserDropdown() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const { user, logout } = useAuthStore(); const { user, logout } = useAuthStore();
const buttonRef = useRef<HTMLButtonElement>(null);
function toggleDropdown() { function toggleDropdown() {
setIsOpen(!isOpen); setIsOpen(!isOpen);
@@ -26,6 +27,7 @@ export default function UserDropdown() {
return ( return (
<div className="relative"> <div className="relative">
<button <button
ref={buttonRef}
onClick={toggleDropdown} onClick={toggleDropdown}
className="flex items-center text-gray-700 dropdown-toggle dark:text-gray-400" className="flex items-center text-gray-700 dropdown-toggle dark:text-gray-400"
> >
@@ -65,7 +67,9 @@ export default function UserDropdown() {
<Dropdown <Dropdown
isOpen={isOpen} isOpen={isOpen}
onClose={closeDropdown} onClose={closeDropdown}
className="absolute right-0 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark" anchorRef={buttonRef}
placement="bottom-right"
className="flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
> >
<div> <div>
<span className="block font-medium text-gray-700 text-theme-sm dark:text-gray-400"> <span className="block font-medium text-gray-700 text-theme-sm dark:text-gray-400">