deblan-mirror/iconoir
deblan-mirror/iconoir
1
0
Fork 0
mirror of https://github.com/iconoir-icons/iconoir synced 2024-05-20 15:26:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: prevent layout shift for active nav items

Browse source
This commit is contained in:
Pascal Jufer 2023-09-26 01:10:40 +02:00
parent de8ba37023
commit 42c8c37a96
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
iconoir.com/components/NavigationItem.tsx
View file

@ -17,6 +17,7 @@ export function NavigationItem({ href, children, style }: NavigationItemProps) {
<NavigationItemContainer
as={'a'}
style={style}
$text={children.toString()}
$isActive={
href.slice(1)
? router.asPath.slice(1).startsWith(href.slice(1))
@ -29,7 +30,10 @@ export function NavigationItem({ href, children, style }: NavigationItemProps) {
);
}
export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
export const NavigationItemContainer = styled(Text15)<{
$text: string;
$isActive?: boolean;
}>`
&&& {
font-weight: ${(props) => (props.$isActive ? '700' : '500')};
font-size: 18px;
@ -44,9 +48,11 @@ export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
position: relative;
z-index: 2;
transition: background 0.1s linear;
&:not(:last-child) {
border-bottom: solid 1px var(--light-gray);
}
${media.lg} {
font-size: 15px;
line-height: 20px;
@ -55,8 +61,21 @@ export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
color: var(--g0);
width: auto;
border-bottom: none !important;
transition: 0.2s;
/* Prevent layout shift */
display: inline-flex;
flex-direction: column;
&::after {
content: '${(props) => props.$text}';
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
pointer-events: none;
font-weight: 600;
}
&::before {
position: absolute;
z-index: -1;
@ -69,6 +88,7 @@ export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
border-radius: 10px;
transition: background 0.1s linear;
}
&:hover::before {
background: var(--g6);
transition: 0.2s;