songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve external link icon placement in navbar components

Browse Source
This commit is contained in:
javayhu 2025-03-01 14:59:17 +08:00
parent 1c85d22ed8
commit ceb279d8fb
3 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/layout/theme-swticher.tsx → src/components/layout/theme-switcher.tsx
View File

14
src/components/marketing/navbar-mobile.tsx
View File

@ -17,8 +17,8 @@ import Link from 'next/link';
import { usePathname } from 'next/navigation';
import * as React from 'react';
import { RemoveScroll } from 'react-remove-scroll';
import { Icons } from '../icons/icons';
import { ThemeSwitcherHorizontal } from '@/components/layout/theme-switcher-horizontal';
import { ExternalLinkIcon } from '../icons/external-link';
export function NavbarMobile({
className,
@ -158,7 +158,7 @@ function MainMobileMenu({ onLinkClicked }: MainMobileMenuProps) {
<Button
type="button"
variant="ghost"
className="flex h-8 w-full items-center justify-between text-left"
className="flex w-full items-center justify-between text-left"
>
<span className="text-base font-medium">
{item.title}
@ -184,19 +184,16 @@ function MainMobileMenu({ onLinkClicked }: MainMobileMenuProps) {
}
className={cn(
buttonVariants({ variant: 'ghost' }),
'm-0 h-auto w-full justify-start gap-4 p-2'
'group h-auto w-full justify-start gap-4 p-2'
)}
onClick={onLinkClicked}
>
<div className="flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors group-hover:text-foreground">
{subItem.icon}
</div>
<div>
<div className="flex-1">
<span className="text-sm font-medium">
{subItem.title}
{subItem.external && (
<Icons.externalLink className="-mt-2 ml-1 inline text-muted-foreground" />
)}
</span>
{subItem.description && (
<p className="text-xs text-muted-foreground">
@ -204,6 +201,9 @@ function MainMobileMenu({ onLinkClicked }: MainMobileMenuProps) {
</p>
)}
</div>
{subItem.external && (
<ExternalLinkIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
)}
</Link>
</li>
))}

16
src/components/marketing/navbar.tsx
View File

@ -2,8 +2,7 @@
import { LoginWrapper } from '@/components/auth/login-button';
import Container from '@/components/container';
import { Icons } from '@/components/icons/icons';
import { ThemeSwitcher } from '@/components/layout/theme-swticher';
import { ThemeSwitcher } from '@/components/layout/theme-switcher';
import { UserButton } from '@/components/layout/user-button';
import { Logo } from '@/components/logo';
import { MENU_LINKS } from '@/components/marketing/marketing-links';
@ -26,6 +25,7 @@ import { Routes } from '@/routes';
import { MarketingConfig } from '@/types';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ExternalLinkIcon } from '../icons/external-link';
interface NavBarProps {
scroll?: boolean;
@ -83,9 +83,7 @@ export function Navbar({ scroll, config }: NavBarProps) {
<NavigationMenuLink asChild>
<Link
href={subItem.href || '#'}
target={
subItem.external ? '_blank' : undefined
}
target={ subItem.external ? '_blank' : undefined }
rel={
subItem.external
? 'noopener noreferrer'
@ -96,12 +94,9 @@ export function Navbar({ scroll, config }: NavBarProps) {
<div className="flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors group-hover:text-foreground">
{subItem.icon}
</div>
<div>
<div className="flex-1">
<div className="text-sm font-medium">
{subItem.title}
{subItem.external && (
<Icons.externalLink className="-mt-2 ml-1 inline text-muted-foreground" />
)}
</div>
{subItem.description && (
<div className="text-sm text-muted-foreground">
@ -109,6 +104,9 @@ export function Navbar({ scroll, config }: NavBarProps) {
</div>
)}
</div>
{subItem.external && (
<ExternalLinkIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
)}
</Link>
</NavigationMenuLink>
</li>