This commit is contained in:
parent
1812e0391f
commit
5b992ed3ab
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import NavLink from "@/Element/Button/NavLink";
|
import NavLink from "@/Element/Button/NavLink";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
@ -9,9 +9,18 @@ import { useUserProfile } from "@snort/system-react";
|
|||||||
import Avatar from "@/Element/User/Avatar";
|
import Avatar from "@/Element/User/Avatar";
|
||||||
import { useIntl } from "react-intl";
|
import { useIntl } from "react-intl";
|
||||||
|
|
||||||
const MENU_ITEMS = [
|
type MenuItem = {
|
||||||
{ url: "/", icon: "home" },
|
label?: string;
|
||||||
{ url: "/messages", icon: "mail", hideReadOnly: true },
|
icon?: string;
|
||||||
|
link?: string;
|
||||||
|
nonLoggedIn?: boolean;
|
||||||
|
el?: React.ReactNode;
|
||||||
|
hideReadOnly?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const MENU_ITEMS: MenuItem[] = [
|
||||||
|
{ link: "/", icon: "home" },
|
||||||
|
{ link: "/messages", icon: "mail", hideReadOnly: true },
|
||||||
{
|
{
|
||||||
el: (
|
el: (
|
||||||
<div className="flex flex-grow items-center justify-center">
|
<div className="flex flex-grow items-center justify-center">
|
||||||
@ -20,7 +29,7 @@ const MENU_ITEMS = [
|
|||||||
),
|
),
|
||||||
hideReadOnly: true,
|
hideReadOnly: true,
|
||||||
},
|
},
|
||||||
{ url: "/search", icon: "search" },
|
{ link: "/search", icon: "search" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
@ -31,28 +40,6 @@ const Footer = () => {
|
|||||||
const profile = useUserProfile(publicKey);
|
const profile = useUserProfile(publicKey);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
|
|
||||||
const renderButton = item => {
|
|
||||||
if (readonly && item.hideReadOnly) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
if (item.el) {
|
|
||||||
return item.el;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<NavLink
|
|
||||||
to={item.url}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
classNames(
|
|
||||||
{ active: isActive, "hover:text-nostr-purple": !isActive },
|
|
||||||
"flex flex-grow p-4 justify-center items-center cursor-pointer",
|
|
||||||
)
|
|
||||||
}>
|
|
||||||
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
|
|
||||||
<Icon name={`${item.icon}-outline`} className="icon-outline" size={24} />
|
|
||||||
</NavLink>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const readOnlyIcon = readonly && (
|
const readOnlyIcon = readonly && (
|
||||||
<span style={{ transform: "rotate(135deg)" }} title={formatMessage({ defaultMessage: "Read-only", id: "djNL6D" })}>
|
<span style={{ transform: "rotate(135deg)" }} title={formatMessage({ defaultMessage: "Read-only", id: "djNL6D" })}>
|
||||||
<Icon name="openeye" className="text-nostr-red" size={20} />
|
<Icon name="openeye" className="text-nostr-red" size={20} />
|
||||||
@ -62,7 +49,9 @@ const Footer = () => {
|
|||||||
return (
|
return (
|
||||||
<footer className="md:hidden fixed bottom-0 z-10 w-full bg-base-200 pb-safe-area bg-bg-color">
|
<footer className="md:hidden fixed bottom-0 z-10 w-full bg-base-200 pb-safe-area bg-bg-color">
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
{MENU_ITEMS.map(item => renderButton(item))}
|
{MENU_ITEMS.map(item => (
|
||||||
|
<FooterNavItem item={item} readonly={readonly} />
|
||||||
|
))}
|
||||||
{publicKey && (
|
{publicKey && (
|
||||||
<ProfileLink
|
<ProfileLink
|
||||||
className="flex flex-grow p-2 justify-center items-center cursor-pointer"
|
className="flex flex-grow p-2 justify-center items-center cursor-pointer"
|
||||||
@ -76,4 +65,29 @@ const Footer = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const FooterNavItem = ({ item, readonly }: { item: MenuItem; readonly: boolean }) => {
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
|
||||||
|
if (readonly && item.hideReadOnly) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.el) {
|
||||||
|
return item.el;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
to={item.link ?? "/"}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
classNames({ active: isActive || isHovered }, "flex flex-grow p-4 justify-center items-center cursor-pointer")
|
||||||
|
}>
|
||||||
|
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
|
||||||
|
<Icon name={`${item.icon}-outline`} className="icon-outline" size={24} />
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default Footer;
|
export default Footer;
|
||||||
|
@ -1,20 +1,3 @@
|
|||||||
.logo {
|
|
||||||
cursor: pointer;
|
|
||||||
text-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo h1 {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 29px;
|
|
||||||
line-height: 23px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-unread {
|
.has-unread {
|
||||||
background: var(--highlight);
|
background: var(--highlight);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
@ -26,11 +26,11 @@ export function LogoHeader({ showText = false }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to="/" className="logo" onClick={handleLogoClick}>
|
<Link to="/" className="logo hover:no-underline" onClick={handleLogoClick}>
|
||||||
<h1 className="flex flex-row items-center md:justify-center">
|
<h1 className="flex flex-row items-center md:justify-center font-bold my-0 p-0 md:mx-3 font-bold text-3xl">
|
||||||
{CONFIG.navLogo && <img src={CONFIG.navLogo} className="w-8" />}
|
{CONFIG.navLogo && <img src={CONFIG.navLogo} className="w-8" />}
|
||||||
{!CONFIG.navLogo && (
|
{!CONFIG.navLogo && (
|
||||||
<span className="text-2xl p-5 hidden md:flex xl:hidden w-8 h-8 rounded-xl bg-dark text-xl font-bold flex items-center justify-center">
|
<span className="p-5 hidden md:flex xl:hidden w-8 h-8 rounded-xl bg-dark flex items-center justify-center">
|
||||||
{CONFIG.appName[0]}
|
{CONFIG.appName[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -60,9 +60,9 @@ const MENU_ITEMS = [
|
|||||||
|
|
||||||
const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
|
const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
|
||||||
const c = isActive
|
const c = isActive
|
||||||
? "active font-bold py-4 hover:no-underline flex flex-row items-center"
|
? "rounded-full p-3 active font-bold my-2 hover:bg-bg-secondary hover:no-underline flex flex-row items-center"
|
||||||
: "py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
|
: "rounded-full p-3 my-2 hover:no-underline hover:bg-bg-secondary flex flex-row items-center";
|
||||||
return classNames(c, { "xl:ml-1": !narrow });
|
return classNames(c, { "xl:px-4": !narrow });
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function NavSidebar({ narrow = false }) {
|
export default function NavSidebar({ narrow = false }) {
|
||||||
@ -134,13 +134,13 @@ export default function NavSidebar({ narrow = false }) {
|
|||||||
{publicKey && (
|
{publicKey && (
|
||||||
<>
|
<>
|
||||||
<ProfileLink pubkey={publicKey} user={profile}>
|
<ProfileLink pubkey={publicKey} user={profile}>
|
||||||
<div className="flex flex-row items-center font-bold text-md">
|
<div className="flex flex-row items-center font-bold text-md p-1 xl:px-4 xl:py-3 hover:bg-bg-secondary rounded-full cursor-pointer hover:no-underline">
|
||||||
<Avatar pubkey={publicKey} user={profile} size={40} icons={readOnlyIcon} />
|
<Avatar pubkey={publicKey} user={profile} size={40} icons={readOnlyIcon} />
|
||||||
{!narrow && <span className="hidden xl:inline ml-3">{profile?.name}</span>}
|
{!narrow && <span className="hidden xl:inline ml-3">{profile?.name}</span>}
|
||||||
</div>
|
</div>
|
||||||
</ProfileLink>
|
</ProfileLink>
|
||||||
{readonly && (
|
{readonly && (
|
||||||
<div className="hidden xl:block text-nostr-red text-sm">
|
<div className="hidden xl:block text-nostr-red text-sm m-3">
|
||||||
<FormattedMessage defaultMessage="Read-only" id="djNL6D" />
|
<FormattedMessage defaultMessage="Read-only" id="djNL6D" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user