forked from Kieran/snort
nav & footer hover styles
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 useLogin from "@/Hooks/useLogin";
|
||||
import Icon from "@/Icons/Icon";
|
||||
@ -9,9 +9,18 @@ import { useUserProfile } from "@snort/system-react";
|
||||
import Avatar from "@/Element/User/Avatar";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
const MENU_ITEMS = [
|
||||
{ url: "/", icon: "home" },
|
||||
{ url: "/messages", icon: "mail", hideReadOnly: true },
|
||||
type MenuItem = {
|
||||
label?: string;
|
||||
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: (
|
||||
<div className="flex flex-grow items-center justify-center">
|
||||
@ -20,7 +29,7 @@ const MENU_ITEMS = [
|
||||
),
|
||||
hideReadOnly: true,
|
||||
},
|
||||
{ url: "/search", icon: "search" },
|
||||
{ link: "/search", icon: "search" },
|
||||
];
|
||||
|
||||
const Footer = () => {
|
||||
@ -31,28 +40,6 @@ const Footer = () => {
|
||||
const profile = useUserProfile(publicKey);
|
||||
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 && (
|
||||
<span style={{ transform: "rotate(135deg)" }} title={formatMessage({ defaultMessage: "Read-only", id: "djNL6D" })}>
|
||||
<Icon name="openeye" className="text-nostr-red" size={20} />
|
||||
@ -62,7 +49,9 @@ const Footer = () => {
|
||||
return (
|
||||
<footer className="md:hidden fixed bottom-0 z-10 w-full bg-base-200 pb-safe-area bg-bg-color">
|
||||
<div className="flex">
|
||||
{MENU_ITEMS.map(item => renderButton(item))}
|
||||
{MENU_ITEMS.map(item => (
|
||||
<FooterNavItem item={item} readonly={readonly} />
|
||||
))}
|
||||
{publicKey && (
|
||||
<ProfileLink
|
||||
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;
|
||||
|
@ -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 {
|
||||
background: var(--highlight);
|
||||
border-radius: 100%;
|
||||
|
@ -26,11 +26,11 @@ export function LogoHeader({ showText = false }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Link to="/" className="logo" onClick={handleLogoClick}>
|
||||
<h1 className="flex flex-row items-center md:justify-center">
|
||||
<Link to="/" className="logo hover:no-underline" onClick={handleLogoClick}>
|
||||
<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 && (
|
||||
<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]}
|
||||
</span>
|
||||
)}
|
||||
|
@ -60,9 +60,9 @@ const MENU_ITEMS = [
|
||||
|
||||
const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
|
||||
const c = isActive
|
||||
? "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 });
|
||||
? "rounded-full p-3 active font-bold my-2 hover:bg-bg-secondary hover:no-underline 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:px-4": !narrow });
|
||||
};
|
||||
|
||||
export default function NavSidebar({ narrow = false }) {
|
||||
@ -134,13 +134,13 @@ export default function NavSidebar({ narrow = false }) {
|
||||
{publicKey && (
|
||||
<>
|
||||
<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} />
|
||||
{!narrow && <span className="hidden xl:inline ml-3">{profile?.name}</span>}
|
||||
</div>
|
||||
</ProfileLink>
|
||||
{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" />
|
||||
</div>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user