deblan-mirror/iconoir
deblan-mirror/iconoir
1
0
Fork 0
mirror of https://github.com/iconoir-icons/iconoir synced 2024-06-13 19:32:32 +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 <NavigationItemContainer
as={'a'} as={'a'}
style={style} style={style}
$text={children.toString()}
$isActive={ $isActive={
href.slice(1) href.slice(1)
? router.asPath.slice(1).startsWith(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-weight: ${(props) => (props.$isActive ? '700' : '500')};
font-size: 18px; font-size: 18px;
@ -44,9 +48,11 @@ export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
position: relative; position: relative;
z-index: 2; z-index: 2;
transition: background 0.1s linear; transition: background 0.1s linear;
&:not(:last-child) { &:not(:last-child) {
border-bottom: solid 1px var(--light-gray); border-bottom: solid 1px var(--light-gray);
} }
${media.lg} { ${media.lg} {
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
@ -55,8 +61,21 @@ export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
color: var(--g0); color: var(--g0);
width: auto; width: auto;
border-bottom: none !important; border-bottom: none !important;
transition: 0.2s; 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 { &::before {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
@ -69,6 +88,7 @@ export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>`
border-radius: 10px; border-radius: 10px;
transition: background 0.1s linear; transition: background 0.1s linear;
} }
&:hover::before { &:hover::before {
background: var(--g6); background: var(--g6);
transition: 0.2s; transition: 0.2s;