nav & footer hover styles

packages/app/src/Pages/Layout/Footer.tsx

@@ -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;

packages/app/src/Pages/Layout/Layout.css

@@ -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%;

packages/app/src/Pages/Layout/LogoHeader.tsx

@@ -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>
         )}

packages/app/src/Pages/Layout/NavSidebar.tsx

@@ -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>
           )}