HasNotificationsMarker for left nav
This commit is contained in:
parent
836af8fbd2
commit
6190f3cd9d
@ -96,7 +96,7 @@ const AccountHeader = () => {
|
||||
);
|
||||
};
|
||||
|
||||
function HasNotificationsMarker() {
|
||||
export function HasNotificationsMarker() {
|
||||
const readNotifications = useLogin(s => s.readNotifications);
|
||||
const notifications = useSyncExternalStore(
|
||||
c => Notifications.hook(c, "*"),
|
||||
@ -112,7 +112,11 @@ function HasNotificationsMarker() {
|
||||
);
|
||||
|
||||
if (hasNotifications) {
|
||||
return <span className="has-unread"></span>;
|
||||
return (
|
||||
<div className="relative">
|
||||
<span className="has-unread absolute top-0 right-0 rounded-full "></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -43,21 +43,11 @@ header {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.header-actions .btn .has-unread {
|
||||
.has-unread {
|
||||
background: var(--highlight);
|
||||
border-radius: 100%;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.header-actions .btn .has-unread {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.stalker {
|
||||
|
@ -8,6 +8,7 @@ import { useUserProfile } from "@snort/system-react";
|
||||
import { NoteCreatorButton } from "../../Element/Event/NoteCreatorButton";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import classNames from "classnames";
|
||||
import { HasNotificationsMarker } from "@/Pages/Layout/AccountHeader";
|
||||
|
||||
const MENU_ITEMS = [
|
||||
{
|
||||
@ -58,9 +59,6 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
|
||||
export default function NavSidebar({ narrow = false }) {
|
||||
const { publicKey } = useLogin(s => ({
|
||||
publicKey: s.publicKey,
|
||||
latestNotification: s.latestNotification,
|
||||
readNotifications: s.readNotifications,
|
||||
readonly: s.readonly,
|
||||
}));
|
||||
const profile = useUserProfile(publicKey);
|
||||
const navigate = useNavigate();
|
||||
@ -82,6 +80,7 @@ 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} />
|
||||
{item.label === "Notifications" && <HasNotificationsMarker />}
|
||||
{!narrow && <span className="hidden xl:inline ml-3">{item.label}</span>}
|
||||
</NavLink>
|
||||
);
|
||||
|
@ -5,7 +5,9 @@ import TrendingNotes from "@/Element/TrendingPosts";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import classNames from "classnames";
|
||||
|
||||
export default function RightColumn({ show = true }) {
|
||||
export default function RightColumn() {
|
||||
const hideRightColumnPaths = ["/login", "/new", "/messages", "/settings"];
|
||||
const show = !hideRightColumnPaths.some(path => location.pathname.startsWith(path));
|
||||
return (
|
||||
<div
|
||||
className={classNames("flex-col hidden lg:w-1/3 sticky top-0 h-screen p-2 border-l border-neutral-900", {
|
||||
|
@ -29,9 +29,7 @@ export default function Index() {
|
||||
useLoginFeed();
|
||||
|
||||
const hideHeaderPaths = ["/login", "/new"];
|
||||
const hideRightColumnPaths = ["/login", "/new", "/messages", "/settings"];
|
||||
const shouldHideHeader = hideHeaderPaths.some(path => location.pathname.startsWith(path));
|
||||
const shouldHideRightColumn = hideRightColumnPaths.some(path => location.pathname.startsWith(path));
|
||||
|
||||
const pageClassPaths = useMemo(
|
||||
() => ({
|
||||
@ -69,7 +67,7 @@ export default function Index() {
|
||||
<Outlet />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<RightColumn show={!shouldHideRightColumn} />
|
||||
<RightColumn />
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<NoteCreatorButton className="note-create-button" />
|
||||
|
Loading…
Reference in New Issue
Block a user