DarkCat09/dc09.ru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Highlighting icon in MenuItem on :hover

Browse source
This commit is contained in:
DarkCat09 2023-07-25 09:54:38 +04:00
parent e176173730
commit b50e79ae4d
1 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/MenuItem.astro
View file

@ -15,7 +15,7 @@ const { name, link, icon, atLeft = true } = Astro.props;
<slot name="js-dataset"></slot> <slot name="js-dataset"></slot>
<a href={link}> <a href={link}>
{!atLeft ? name : ""} {!atLeft ? name : ""}
<span class:list={["icon-wrapper", {"highlight-icon": name == ""}]}> <span class="icon-wrapper">
<Icon code={icon} /> <Icon code={icon} />
</span> </span>
{atLeft ? name : ""} {atLeft ? name : ""}
@ -37,8 +37,10 @@ const { name, link, icon, atLeft = true } = Astro.props;
font-size: 1.5rem; font-size: 1.5rem;
color: var(--fg-sec); color: var(--fg-sec);
}
&.highlight-icon:hover { li:hover {
.icon-wrapper {
color: var(--fg); color: var(--fg);
} }
} }