refactor: improve navigation styling and active state handling
- Update navbar mobile and desktop components with consistent styling - Enhance active and hover states for navigation menu items - Remove dark mode specific text color variants - Add active state detection for sub-menu items - Simplify background and text color transitions - Remove testimonials component - Switch to default theme CSS import
This commit is contained in:
javayhu
parent
45b407765b
commit
35836cdc56
@ -137,27 +137,27 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
<LocaleLink
|
||||
href={Routes.Login}
|
||||
onClick={onLinkClicked}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: 'outline',
|
||||
size: 'lg'
|
||||
}),
|
||||
'w-full'
|
||||
)}
|
||||
>
|
||||
{commonTranslations("login")}
|
||||
</LocaleLink>
|
||||
<LocaleLink
|
||||
href={Routes.Register}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: 'default',
|
||||
size: 'lg'
|
||||
}),
|
||||
'w-full'
|
||||
)}
|
||||
onClick={onLinkClicked}
|
||||
>
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: 'outline',
|
||||
size: 'lg'
|
||||
}),
|
||||
'w-full'
|
||||
)}
|
||||
>
|
||||
{commonTranslations("login")}
|
||||
</LocaleLink>
|
||||
<LocaleLink
|
||||
href={Routes.Register}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: 'default',
|
||||
size: 'lg'
|
||||
}),
|
||||
'w-full'
|
||||
)}
|
||||
onClick={onLinkClicked}
|
||||
>
|
||||
{commonTranslations("signUp")}
|
||||
</LocaleLink>
|
||||
</div>
|
||||
@ -189,8 +189,9 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
variant="ghost"
|
||||
className={cn(
|
||||
"flex w-full items-center justify-between text-left",
|
||||
"text-muted-foreground hover:text-primary",
|
||||
isActive && "font-bold text-primary dark:text-primary-foreground"
|
||||
"bg-transparent text-muted-foreground",
|
||||
"hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary",
|
||||
isActive && "font-semibold bg-transparent text-primary"
|
||||
)}
|
||||
>
|
||||
<span className="text-base">
|
||||
@ -221,31 +222,44 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
className={cn(
|
||||
buttonVariants({ variant: 'ghost' }),
|
||||
'group h-auto w-full justify-start gap-4 p-2',
|
||||
"text-muted-foreground hover:text-primary",
|
||||
isSubItemActive && "font-bold text-primary dark:text-primary-foreground"
|
||||
"bg-transparent text-muted-foreground",
|
||||
"hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary",
|
||||
isSubItemActive && "font-semibold bg-transparent text-primary"
|
||||
)}
|
||||
onClick={onLinkClicked}
|
||||
>
|
||||
<div className={cn(
|
||||
"flex size-8 shrink-0 items-center justify-center transition-colors",
|
||||
"text-muted-foreground group-hover:text-primary",
|
||||
isSubItemActive && "text-primary dark:text-primary-foreground"
|
||||
"bg-transparent text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary",
|
||||
isSubItemActive && "bg-transparent text-primary"
|
||||
)}>
|
||||
{subItem.icon ? subItem.icon : null}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium">
|
||||
<span className={cn(
|
||||
"text-sm text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary",
|
||||
isSubItemActive && "font-semibold bg-transparent text-primary"
|
||||
)}>
|
||||
{subItem.title}
|
||||
</span>
|
||||
{subItem.description && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<p className={cn(
|
||||
"text-xs text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary/80 group-focus:bg-transparent group-focus:text-primary/80",
|
||||
isSubItemActive && "bg-transparent text-primary/80"
|
||||
)}>
|
||||
{subItem.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{subItem.external && (
|
||||
<ArrowUpRightIcon className="size-4 shrink-0 text-muted-foreground
|
||||
transition-colors group-hover:text-primary" />
|
||||
<ArrowUpRightIcon className={cn(
|
||||
"size-4 shrink-0 text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary",
|
||||
isSubItemActive && "bg-transparent text-primary"
|
||||
)} />
|
||||
)}
|
||||
</LocaleLink>
|
||||
</li>
|
||||
@ -262,8 +276,9 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
className={cn(
|
||||
buttonVariants({ variant: 'ghost' }),
|
||||
'w-full justify-start',
|
||||
"text-muted-foreground hover:text-primary",
|
||||
isActive && "font-semibold text-primary dark:text-primary-foreground"
|
||||
"bg-transparent text-muted-foreground",
|
||||
"hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary",
|
||||
isActive && "font-semibold bg-transparent text-primary"
|
||||
)}
|
||||
onClick={onLinkClicked}
|
||||
>
|
||||
|
||||
@ -37,7 +37,6 @@ const customNavigationMenuTriggerStyle = cn(
|
||||
"hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary",
|
||||
"data-[active]:font-semibold data-[active]:bg-transparent data-[active]:text-primary",
|
||||
"data-[state=open]:bg-transparent data-[state=open]:text-primary",
|
||||
"dark:hover:text-primary dark:data-[active]:text-primary-foreground"
|
||||
);
|
||||
|
||||
export function Navbar({ scroll }: NavBarProps) {
|
||||
@ -91,43 +90,62 @@ export function Navbar({ scroll }: NavBarProps) {
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid w-[400px] gap-4 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
|
||||
{item.items && item.items.map((subItem, subIndex) => (
|
||||
<li key={subIndex}>
|
||||
<NavigationMenuLink asChild>
|
||||
<LocaleLink
|
||||
href={subItem.href || '#'}
|
||||
target={subItem.external ? '_blank' : undefined}
|
||||
rel={
|
||||
subItem.external
|
||||
? 'noopener noreferrer'
|
||||
: undefined
|
||||
}
|
||||
className="group flex select-none flex-row items-center gap-4 rounded-md
|
||||
p-2 leading-none no-underline outline-none transition-colors
|
||||
hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className="flex size-8 shrink-0 items-center justify-center
|
||||
text-muted-foreground group-hover:text-primary">
|
||||
{subItem.icon ? subItem.icon : null}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-medium group-hover:text-primary">
|
||||
{subItem.title}
|
||||
{item.items && item.items.map((subItem, subIndex) => {
|
||||
const isSubItemActive = subItem.href && localePathname.startsWith(subItem.href);
|
||||
return (
|
||||
<li key={subIndex}>
|
||||
<NavigationMenuLink asChild>
|
||||
<LocaleLink
|
||||
href={subItem.href || '#'}
|
||||
target={subItem.external ? '_blank' : undefined}
|
||||
rel={
|
||||
subItem.external
|
||||
? 'noopener noreferrer'
|
||||
: undefined
|
||||
}
|
||||
className="group flex select-none flex-row items-center gap-4 rounded-md
|
||||
p-2 leading-none no-underline outline-none transition-colors
|
||||
hover:bg-accent hover:text-accent-foreground
|
||||
focus:bg-accent focus:text-accent-foreground"
|
||||
>
|
||||
<div className={cn(
|
||||
"flex size-8 shrink-0 items-center justify-center transition-colors",
|
||||
"bg-transparent text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary",
|
||||
isSubItemActive && "bg-transparent text-primary"
|
||||
)}>
|
||||
{subItem.icon ? subItem.icon : null}
|
||||
</div>
|
||||
{subItem.description && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{subItem.description}
|
||||
<div className="flex-1">
|
||||
<div className={cn(
|
||||
"text-sm font-medium text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary",
|
||||
isSubItemActive && "bg-transparent text-primary"
|
||||
)}>
|
||||
{subItem.title}
|
||||
</div>
|
||||
{subItem.description && (
|
||||
<div className={cn(
|
||||
"text-sm text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary/80 group-focus:bg-transparent group-focus:text-primary/80",
|
||||
isSubItemActive && "bg-transparent text-primary/80"
|
||||
)}>
|
||||
{subItem.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{subItem.external && (
|
||||
<ArrowUpRightIcon className={cn(
|
||||
"size-4 shrink-0 text-muted-foreground",
|
||||
"group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary",
|
||||
isSubItemActive && "bg-transparent text-primary"
|
||||
)} />
|
||||
)}
|
||||
</div>
|
||||
{subItem.external && (
|
||||
<ArrowUpRightIcon className="size-4 shrink-0
|
||||
text-muted-foreground hover:text-primary-foreground" />
|
||||
)}
|
||||
</LocaleLink>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
))}
|
||||
</LocaleLink>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
@ -1,94 +0,0 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<section className="py-16 md:py-32">
|
||||
<div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
|
||||
<h2 className="text-4xl font-medium lg:text-5xl">Build by makers, loved by thousand developers</h2>
|
||||
<p>Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 [--color-card:var(--color-muted)] *:border-none *:shadow-none sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2 dark:[--color-muted:var(--color-zinc-900)]">
|
||||
<Card className="grid grid-rows-[auto_1fr] gap-8 sm:col-span-2 sm:p-6 lg:row-span-2">
|
||||
<CardHeader>
|
||||
<img className="h-6 w-fit dark:invert" src="https://html.tailus.io/blocks/customers/nike.svg" alt="Nike Logo" height="24" width="auto" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p className="text-xl font-medium">Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/shekinah.webp" alt="Shekinah Tshiokufila" height="400" width="400" loading="lazy" />
|
||||
<AvatarFallback>ST</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Shekinah Tshiokufila</cite>
|
||||
<span className="text-muted-foreground block text-sm">Software Ingineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="md:col-span-2">
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p className="text-xl font-medium">Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/jonathan.webp" alt="Jonathan Yombo" height="400" width="400" loading="lazy" />
|
||||
<AvatarFallback>JY</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Jonathan Yombo</cite>
|
||||
<span className="text-muted-foreground block text-sm">Software Ingineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p>Great work on tailfolio template. This is one of the best personal website that I have seen so far!</p>
|
||||
|
||||
<div className="grid items-center gap-3 [grid-template-columns:auto_1fr]">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/yucel.webp" alt="Yucel Faruksahan" height="400" width="400" loading="lazy" />
|
||||
<AvatarFallback>YF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<cite className="text-sm font-medium">Yucel Faruksahan</cite>
|
||||
<span className="text-muted-foreground block text-sm">Creator, Tailkits</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="card variant-mixed">
|
||||
<CardContent className="h-full pt-6">
|
||||
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
|
||||
<p>Great work on tailfolio template. This is one of the best personal website that I have seen so far!</p>
|
||||
|
||||
<div className="grid grid-cols-[auto_1fr] gap-3">
|
||||
<Avatar className="size-12">
|
||||
<AvatarImage src="https://tailus.io/images/reviews/rodrigo.webp" alt="Rodrigo Aguilar" height="400" width="400" loading="lazy" />
|
||||
<AvatarFallback>YF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Rodrigo Aguilar</p>
|
||||
<span className="text-muted-foreground block text-sm">Creator, TailwindAwesome</span>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -7,7 +7,8 @@
|
||||
/* all the themes are from https://ui.shadcn.com/themes */
|
||||
/* @import "./theme-blue.css"; */
|
||||
/* @import "./theme-violet.css"; */
|
||||
@import "./theme-blue.css";
|
||||
/* @import "./theme-zinc.css"; */
|
||||
@import "./theme.css";
|
||||
|
||||
html {
|
||||
/* prevent the layout from shifting when the scrollbar appears or disappears. */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user