Исправил подсветку в панели навигации
This commit is contained in:
parent
854e266ccb
commit
9cdda96704
1 changed files with 13 additions and 4 deletions
|
@ -3,21 +3,26 @@
|
|||
import { page } from '$app/state';
|
||||
|
||||
export let routes: App.Route[];
|
||||
export let isVertical: boolean = false;
|
||||
|
||||
function isActive(route: string): boolean {
|
||||
if (route === '/') return page.url.pathname === route;
|
||||
|
||||
return page.url.pathname.split('/')[1] === route.split('/')[1];
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="flex flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:px-2 landscape:flex-col landscape:py-2"
|
||||
>
|
||||
{#each routes as route (route.href)}
|
||||
<a class="nav-button {page.url.pathname === route.href ? 'active' : ''}" href={route.href}>
|
||||
<a class="nav-button {isActive(route.href) ? 'active' : ''}" href={route.href}>
|
||||
<div class="p-1">
|
||||
<HoverIcon
|
||||
src={route.icon}
|
||||
class="text-sm uppercase"
|
||||
text={route.href}
|
||||
size={32}
|
||||
black={page.url.pathname !== route.href}
|
||||
black={!isActive(route.href)}
|
||||
/>
|
||||
</div>
|
||||
<div class="contour">
|
||||
|
@ -34,11 +39,15 @@
|
|||
@apply flex aspect-square flex-col items-center justify-center gap-0.5 p-2 text-slate-950 not-landscape:h-24 hover:bg-emerald-400 landscape:w-24;
|
||||
|
||||
> .contour {
|
||||
@apply rounded-full bg-slate-50 px-1.5 py-0.5 text-center;
|
||||
@apply rounded-full px-1.5 py-0.5 text-center;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@apply bg-emerald-600;
|
||||
|
||||
> .contour {
|
||||
@apply bg-slate-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue