Kieran/snort
5
14
Fork 14
Code Issues 36 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

hover:no-underline, smaller nav gap
Some checks are pending
continuous-integration/drone/push Build is running
Details

Browse Source
This commit is contained in:
Martti Malmi 2023-12-05 16:32:45 +02:00
parent a6c5674f85
commit f15cb45879
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,10 +59,14 @@ const MENU_ITEMS = [
]; ];
const getNavLinkClass = (isActive: boolean, narrow: boolean) => { const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
const c = isActive const baseClasses =
? "rounded-full p-3 active font-bold hover:bg-bg-secondary hover:no-underline flex flex-1 flex-row items-center" "rounded-full p-3 flex flex-row items-center transition-colors duration-200 hover:bg-bg-secondary hover:no-underline";
: "rounded-full p-3 hover:no-underline hover:bg-bg-secondary flex flex-row items-center"; const activeClasses = "active font-bold";
return classNames(c, { "xl:px-4": !narrow });
return classNames(baseClasses, {
[activeClasses]: isActive,
"xl:px-4": !narrow,
});
}; };
export default function NavSidebar({ narrow = false }) { export default function NavSidebar({ narrow = false }) {
@ -77,8 +81,8 @@ export default function NavSidebar({ narrow = false }) {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const className = classNames( const className = classNames(
{ "xl:w-56 xl:gap-3 xl:items-start": !narrow }, { "xl:w-56 xl:gap-2 xl:items-start": !narrow },
"overflow-y-auto hide-scrollbar sticky items-center border-r border-border-color top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2", "overflow-y-auto hide-scrollbar sticky items-center border-r border-border-color top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-1",
); );
const readOnlyIcon = readonly && ( const readOnlyIcon = readonly && (
@ -93,8 +97,8 @@ export default function NavSidebar({ narrow = false }) {
<div className="mt-1 flex-grow flex flex-col justify-between"> <div className="mt-1 flex-grow flex flex-col justify-between">
<div <div
className={classNames( className={classNames(
{ "xl:items-start": !narrow, "xl:gap-3": !narrow }, { "xl:items-start": !narrow, "xl:gap-2": !narrow },
"gap-2 flex flex-col items-center text-lg", "gap-1 flex flex-col items-center text-lg",
)}> )}>
{MENU_ITEMS.filter(a => { {MENU_ITEMS.filter(a => {
if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) { if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {
@ -137,8 +141,8 @@ export default function NavSidebar({ narrow = false }) {
</div> </div>
{publicKey && ( {publicKey && (
<> <>
<ProfileLink pubkey={publicKey} user={profile}> <ProfileLink pubkey={publicKey} user={profile} className="hover:no-underline">
<div className="mt-2 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"> <div className="mt-2 flex flex-row items-center justify-center font-bold text-md p-1 xl:px-4 xl:py-3 hover:bg-bg-secondary rounded-full cursor-pointer">
<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>