Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

active nav styles & icons

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app/src/Pages/Layout/Footer.tsx
View File

@ -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",
)
}>
<Icon name={item.icon} width={24} />
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
<Icon name={`${item.icon}-outline`} className="icon-outline" size={24} />
</NavLink>
);
};

9
packages/app/src/Pages/Layout/NavSidebar.tsx
View File

@ -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 }) {
<div className={className}>
<LogoHeader showText={!narrow} />
<div className="flex-grow flex flex-col justify-between">
<div className={classNames({ "xl:items-start": !narrow }, "flex flex-col items-center font-bold text-lg")}>
<div className={classNames({ "xl:items-start": !narrow }, "flex flex-col items-center text-lg")}>
{MENU_ITEMS.filter(a => {
if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {
return false;
@ -106,7 +106,8 @@ export default function NavSidebar({ narrow = false }) {
}
return (
<NavLink key={item.link} to={item.link} className={({ isActive }) => getNavLinkClass(isActive, narrow)}>
<Icon name={item.icon} size={24} />
<Icon name={`${item.icon}-outline`} className="icon-outline" size={24} />
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
{item.label === "Notifications" && <HasNotificationsMarker />}
{!narrow && <span className="hidden xl:inline ml-3">{item.label}</span>}
</NavLink>

15
packages/app/src/Pages/Layout/NotificationsHeader.tsx
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>
);
};