zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve site header account and navigation item styling

Browse Source 
The styling of the site header account sign-up button and navigation items has been updated. Class names and transition durations were adjusted for better visualization and usability. The changes particularly enhance the hover effect on the sign-up button and navigation items.
This commit is contained in:
giancarlo
2024-04-20 02:24:00 +08:00
parent ecdb9ac717
commit 6ff82ec5ef
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/app/(marketing)/_components/site-header-account-section.tsx
View File

@@ -79,9 +79,10 @@ function AuthButtons() {
</div> </div>
<Link href={pathsConfig.auth.signUp}> <Link href={pathsConfig.auth.signUp}>
<Button variant={'default'}> <Button className='group' variant={'default'}>
<Trans i18nKey={'auth:signUp'} /> <Trans i18nKey={'auth:signUp'} />
<ChevronRight className={'h-4'} />
<ChevronRight className={'h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-500'} />
</Button> </Button>
</Link> </Link>
</div> </div>

9
apps/web/app/(marketing)/_components/site-navigation-item.tsx
View File

@@ -10,11 +10,11 @@ const getClassName = (path: string, currentPathName: string) => {
const isActive = isRouteActive(path, currentPathName); const isActive = isRouteActive(path, currentPathName);
return cn( return cn(
`text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-200`, `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-100`,
{ {
'hover:border-border active:dark:bg-secondary active:bg-gray-50 dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white': 'hover:border-border dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white':
!isActive, !isActive,
'dark:bg-secondary bg-gray-50': isActive, 'dark:text-white text-current': isActive,
}, },
); );
}; };
@@ -26,10 +26,11 @@ export function SiteNavigationItem({
path: string; path: string;
}>) { }>) {
const currentPathName = usePathname(); const currentPathName = usePathname();
const className = getClassName(path, currentPathName);
return ( return (
<NavigationMenuItem key={path}> <NavigationMenuItem key={path}>
<Link className={getClassName(path, currentPathName)} href={path}> <Link className={className} href={path}>
{children} {children}
</Link> </Link>
</NavigationMenuItem> </NavigationMenuItem>