diff --git a/packages/app/src/Pages/Layout/Footer.tsx b/packages/app/src/Pages/Layout/Footer.tsx
index 1589902dc..0bf46ea7b 100644
--- a/packages/app/src/Pages/Layout/Footer.tsx
+++ b/packages/app/src/Pages/Layout/Footer.tsx
@@ -43,11 +43,12 @@ const Footer = () => {
to={item.url}
className={({ isActive }) =>
classNames(
- { "text-nostr-purple": isActive, "hover:text-nostr-purple": !isActive },
+ { active: isActive, "hover:text-nostr-purple": !isActive },
"flex flex-grow p-4 justify-center items-center cursor-pointer",
)
}>
-
+
+
);
};
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index 919c16a4f..42bc9ff96 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -27,7 +27,7 @@ const MENU_ITEMS = [
},
{
label: "Notifications",
- icon: "bell-02",
+ icon: "bell",
link: "/notifications",
},
{
@@ -60,7 +60,7 @@ const MENU_ITEMS = [
const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
const c = isActive
- ? "py-4 hover:no-underline flex flex-row items-center text-nostr-purple"
+ ? "active font-bold py-4 hover:no-underline flex flex-row items-center"
: "py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
return classNames(c, { "xl:ml-1": !narrow });
};
@@ -91,7 +91,7 @@ export default function NavSidebar({ narrow = false }) {
-
+
{MENU_ITEMS.filter(a => {
if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {
return false;
@@ -106,7 +106,8 @@ export default function NavSidebar({ narrow = false }) {
}
return (
getNavLinkClass(isActive, narrow)}>
-
+
+
{item.label === "Notifications" && }
{!narrow && {item.label}}
diff --git a/packages/app/src/Pages/Layout/NotificationsHeader.tsx b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
index 090846794..41cb8fb13 100644
--- a/packages/app/src/Pages/Layout/NotificationsHeader.tsx
+++ b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
@@ -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 (
-
-
-
-
-
-
+
classNames({ active: isActive }, "px-2 py-3 flex")}
+ to="/notifications"
+ onClick={goToNotifications}>
+
+
+
+
);
};
diff --git a/packages/app/src/icons.svg b/packages/app/src/icons.svg
index fd4343492..9f82b92d4 100644
--- a/packages/app/src/icons.svg
+++ b/packages/app/src/icons.svg
@@ -15,9 +15,6 @@
-
-
-
@@ -42,9 +39,14 @@
-
+
+
+
+
+
+
@@ -170,17 +172,23 @@
-
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
@@ -384,14 +392,24 @@
-
+
-
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
@@ -399,26 +417,26 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index fcb5f430a..5cf67985d 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -942,3 +942,15 @@ svg.repeat {
.pb-safe-area {
padding-bottom: env(safe-area-inset-bottom);
}
+
+.active > .icon-outline {
+ display: none;
+}
+
+.active > .icon-solid {
+ display: inline-block;
+}
+
+.icon-solid {
+ display: none;
+}