chore: tweak navigation styles

This commit is contained in:
Steven
2024-01-06 19:12:26 +08:00
parent 4c59035757
commit 83141f9be2
4 changed files with 21 additions and 10 deletions

View File

@ -15,7 +15,11 @@ interface NavLinkItem {
icon: React.ReactNode;
}
const Navigation = () => {
interface Props {
className?: string;
}
const Navigation = (props: Props) => {
const t = useTranslate();
const user = useCurrentUser();
const inboxStore = useInboxStore();
@ -110,7 +114,12 @@ const Navigation = () => {
: [exploreNavLink, signInNavLink, aboutNavLink];
return (
<header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30">
<header
className={classNames(
"w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
props.className
)}
>
<UserBanner />
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
{navLinks.map((navLink) => (

View File

@ -23,7 +23,7 @@ const UserBanner = () => {
<Dropdown
className="w-auto inline-flex"
trigger={
<div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800">
<UserAvatar className="shadow shrink-0 mr-2" avatarUrl={user?.avatarUrl} />
<span className="text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
</div>