lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-05-08 18:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove disable & add kodukord, anim chg for dropdn

Browse Source
This commit is contained in:
Randel Mandre
2026-05-03 00:15:10 +03:00
parent 72c360a687
commit fc931a967d
2 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/globals.css
View File

@@ -164,6 +164,18 @@ body {
} }
} }
@keyframes dropdown-item-in {
0% {
opacity: 0;
transform: translate3d(0, -8px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.tipilan-logo-letter { .tipilan-logo-letter {
animation: none; animation: none;

66
src/components/Header.tsx
View File

@@ -40,19 +40,15 @@ const Header = ({ navItems }: HeaderProps) => {
const pathname = usePathname(); const pathname = usePathname();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// Filter nav items for the horizontal bar (exclude kodukord and avaleht) // Header navigation should include all options except homepage
const mainNavItems = navItems.filter( const mainNavItems = navItems.filter((item) => item.href !== "/");
(item) => item.href !== "/kodukord" && item.href !== "/", const dropdownNavItems = mainNavItems;
);
// Mobile dropdown should match the visual menu, without homepage
const dropdownNavItems = mainNavItems.filter((item) => item.href !== "/");
const disabledNavHrefs = new Set<NavItem["href"]>(["/messiala", "/ajakava"]);
const navIconByHref: Partial<Record<NavItem["href"], string>> = { const navIconByHref: Partial<Record<NavItem["href"], string>> = {
"/messiala": "weekend", "/messiala": "weekend",
"/ajakava": "event_note", "/ajakava": "event_note",
"/piletid": "confirmation_number", "/piletid": "local_activity",
"/turniirid": "trophy", "/turniirid": "rewarded_ads",
}; };
useEffect(() => { useEffect(() => {
@@ -101,21 +97,18 @@ const Header = ({ navItems }: HeaderProps) => {
<nav className="hidden lg:flex items-center gap-3"> <nav className="hidden lg:flex items-center gap-3">
{mainNavItems.map((item) => { {mainNavItems.map((item) => {
const isActive = pathname === item.href; const isActive = pathname === item.href;
const isDisabled = disabledNavHrefs.has(item.href);
return ( return (
<Link <Link
key={item.href} key={item.href}
href={item.href} href={item.href}
aria-current={isActive ? "page" : undefined} aria-current={isActive ? "page" : undefined}
aria-disabled={isActive || isDisabled ? true : undefined} aria-disabled={isActive ? true : undefined}
tabIndex={isActive || isDisabled ? -1 : undefined} tabIndex={isActive ? -1 : undefined}
className={`${vipnagorgialla.className} group font-bold italic text-lg uppercase px-4 py-1.5 border-2 border-[#00A3E0] transition ${ className={`${vipnagorgialla.className} group font-bold italic text-lg uppercase px-4 py-1.5 border-2 border-[#00A3E0] transition ${
isActive isActive
? "bg-[#00A3E0] text-black cursor-default pointer-events-none" ? "bg-[#00A3E0] text-black cursor-default pointer-events-none"
: isDisabled : "bg-[#1F5673] text-[#EEE5E5] hover:bg-[#00A3E0] hover:text-black"
? "bg-[#1F5673] text-[#EEE5E5] opacity-50 cursor-not-allowed pointer-events-none"
: "bg-[#1F5673] text-[#EEE5E5] hover:bg-[#00A3E0] hover:text-black"
}`} }`}
> >
{item.label} {item.label}
@@ -150,13 +143,13 @@ const Header = ({ navItems }: HeaderProps) => {
> >
{dropdownNavItems.map((item, index) => { {dropdownNavItems.map((item, index) => {
const isActive = pathname === item.href; const isActive = pathname === item.href;
const isDisabled = disabledNavHrefs.has(item.href);
const hasBottomBorder = index !== dropdownNavItems.length - 1; const hasBottomBorder = index !== dropdownNavItems.length - 1;
return ( return (
<DropdownMenuItem <DropdownMenuItem
key={item.href} key={item.href}
className="p-0 focus:bg-transparent data-highlighted:bg-transparent" style={{ animationDelay: `${index * 55}ms` }}
className="p-0 opacity-0 animate-[dropdown-item-in_220ms_cubic-bezier(0.16,1,0.3,1)_forwards] focus:bg-transparent data-highlighted:bg-transparent"
> >
{isActive ? ( {isActive ? (
<span <span
@@ -167,22 +160,17 @@ const Header = ({ navItems }: HeaderProps) => {
<span className="flex items-center justify-between gap-3"> <span className="flex items-center justify-between gap-3">
<span>{item.label}</span> <span>{item.label}</span>
{navIconByHref[item.href] ? ( {navIconByHref[item.href] ? (
<span className="material-symbols-outlined text-[2rem]! leading-none"> <span
{navIconByHref[item.href]} className="material-symbols-outlined text-[2rem]! leading-none"
</span> style={
) : null} item.href === "/piletid"
</span> ? {
</span> fontVariationSettings:
) : isDisabled ? ( '"FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24',
<span }
className={`${vipnagorgialla.className} block w-full cursor-not-allowed bg-[#0E0F19] px-5 py-2.5 text-xl font-bold italic uppercase text-[#8A90A0] ${ : undefined
hasBottomBorder ? "border-b-3 border-[#1F5673]" : "" }
}`} >
>
<span className="flex items-center justify-between gap-3">
<span>{item.label}</span>
{navIconByHref[item.href] ? (
<span className="material-symbols-outlined text-[2rem]! leading-none text-[#00A3E0]">
{navIconByHref[item.href]} {navIconByHref[item.href]}
</span> </span>
) : null} ) : null}
@@ -198,7 +186,17 @@ const Header = ({ navItems }: HeaderProps) => {
<span className="flex items-center justify-between gap-3"> <span className="flex items-center justify-between gap-3">
<span>{item.label}</span> <span>{item.label}</span>
{navIconByHref[item.href] ? ( {navIconByHref[item.href] ? (
<span className="material-symbols-outlined text-[2rem]! leading-none text-[#00A3E0] group-hover:text-black"> <span
className="material-symbols-outlined text-[2rem]! leading-none text-[#00A3E0] group-hover:text-black"
style={
item.href === "/piletid"
? {
fontVariationSettings:
'"FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24',
}
: undefined
}
>
{navIconByHref[item.href]} {navIconByHref[item.href]}
</span> </span>
) : null} ) : null}