Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 20:14:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: hover state for navigation (#2807)

Browse Source 
* feat: hover state for navigation

* chore: fix
This commit is contained in:
Alex Inkin
2025-01-06 22:56:16 +04:00
committed by GitHub
parent 57e75e3614
commit e6f02bf8f7
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/projects/ui/src/app/routes/portal/components/header/navigation.component.ts
View File

@@ -4,6 +4,7 @@ import {
TUI_ANIMATIONS_SPEED, TUI_ANIMATIONS_SPEED,
TuiButton, TuiButton,
tuiFadeIn, tuiFadeIn,
TuiHint,
TuiIcon, TuiIcon,
tuiScaleIn, tuiScaleIn,
tuiToAnimationOptions, tuiToAnimationOptions,
@@ -18,9 +19,13 @@ import { getMenu } from 'src/app/utils/system-utilities'
template: ` template: `
@for (item of utils; track $index) { @for (item of utils; track $index) {
<a <a
#rla="routerLinkActive"
class="link" class="link"
routerLinkActive="link_active" routerLinkActive="link_active"
tuiHintDirection="bottom"
[tuiHintShowDelay]="1000"
[routerLink]="item.routerLink" [routerLink]="item.routerLink"
[tuiHint]="!rla.isActive ? item.name : ''"
> >
<tui-badged-content <tui-badged-content
[style.--tui-radius.%]="50" [style.--tui-radius.%]="50"
@@ -47,8 +52,7 @@ import { getMenu } from 'src/app/utils/system-utilities'
display: flex; display: flex;
backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
border-radius: inherit; border-radius: inherit;
padding-inline-end: 0.75rem; margin-inline-end: 0.875rem;
margin-inline-end: -0.4375rem;
isolation: isolate; isolation: isolate;
} }
@@ -58,7 +62,7 @@ import { getMenu } from 'src/app/utils/system-utilities'
display: grid; display: grid;
grid-template-columns: 1.5rem 0fr; grid-template-columns: 1.5rem 0fr;
align-items: center; align-items: center;
padding: 0 0 0 1rem; padding: 0 0.5rem;
margin: 0; margin: 0;
border-radius: inherit; border-radius: inherit;
color: var(--tui-text-secondary); color: var(--tui-text-secondary);
@@ -102,9 +106,10 @@ import { getMenu } from 'src/app/utils/system-utilities'
&_active { &_active {
grid-template-columns: 1.5rem 1fr; grid-template-columns: 1.5rem 1fr;
padding: 0 1rem; padding: 0 1rem;
margin: 0 var(--bumper); margin: 0 calc(var(--bumper) + 0.5rem);
+ .link::before { + .link::before {
left: -0.5rem;
border-top-left-radius: var(--bumper); border-top-left-radius: var(--bumper);
border-bottom-left-radius: var(--bumper); border-bottom-left-radius: var(--bumper);
} }
@@ -120,16 +125,13 @@ import { getMenu } from 'src/app/utils/system-utilities'
} }
&:has(+ .link_active)::before { &:has(+ .link_active)::before {
right: -0.5rem;
border-top-right-radius: var(--bumper); border-top-right-radius: var(--bumper);
border-bottom-right-radius: var(--bumper); border-bottom-right-radius: var(--bumper);
} }
&:has(~ .link_active) {
padding: 0 1rem 0 0;
}
&:first-child { &:first-child {
padding-inline-start: 1rem !important; padding: 0 0.5rem 0 1rem !important;
margin-inline-start: 0; margin-inline-start: 0;
&::before { &::before {
@@ -138,10 +140,10 @@ import { getMenu } from 'src/app/utils/system-utilities'
} }
&:last-child { &:last-child {
padding-inline-end: 1rem !important;
margin-inline-end: 0; margin-inline-end: 0;
&::before { &::before {
right: -0.5rem;
border-top-right-radius: inherit; border-top-right-radius: inherit;
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
} }
@@ -167,6 +169,7 @@ import { getMenu } from 'src/app/utils/system-utilities'
RouterLink, RouterLink,
TuiIcon, TuiIcon,
RouterLinkActive, RouterLinkActive,
TuiHint,
], ],
}) })
export class HeaderNavigationComponent { export class HeaderNavigationComponent {