active nav styles & icons

This commit is contained in:
Martti Malmi
2023-12-05 12:31:06 +02:00
parent 3682f38398
commit 79c3cfd903
7 changed files with 76 additions and 41 deletions

View File

@ -9,6 +9,7 @@ import useEventPublisher from "@/Hooks/useEventPublisher";
import SnortApi from "@/External/SnortApi";
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
import NavLink from "@/Element/Button/NavLink";
import classNames from "classnames";
const NotificationsHeader = () => {
const navigate = useNavigate();
@ -69,12 +70,14 @@ const NotificationsHeader = () => {
}
return (
<div className="flex justify-between">
<NavLink className="btn" to="/notifications" onClick={goToNotifications}>
<Icon name="bell-02" size={24} />
<HasNotificationsMarker />
</NavLink>
</div>
<NavLink
className={({ isActive }) => classNames({ active: isActive }, "px-2 py-3 flex")}
to="/notifications"
onClick={goToNotifications}>
<Icon name="bell-solid" className="icon-solid" size={24} />
<Icon name="bell-outline" className="icon-outline" size={24} />
<HasNotificationsMarker />
</NavLink>
);
};