@furystack/shades-common-components/esm/components/app-bar-link.js

import { attachProps, createComponent, LocationService, RouteLink, Shade } from '@furystack/shades';
import { match } from 'path-to-regexp';
import { ThemeProviderService } from '../services/theme-provider-service.js';
export const AppBarLink = Shade({
    shadowDomName: 'shade-app-bar-link',
    render: ({ children, props, useObservable, injector, element }) => {
        const getAnchorStyle = (currentUrl) => {
            const isActive = !!match(props.href, props.routingOptions)(currentUrl);
            const themeProviderService = injector.getInstance(ThemeProviderService);
            const { theme } = themeProviderService;
            return {
                display: 'flex',
                height: '100%',
                textDecoration: 'none',
                alignItems: 'center',
                padding: '0 8px',
                transition: 'color .2s ease-in-out, transform .2s ease-in-out',
                color: isActive ? theme.text.primary : theme.text.secondary,
                opacity: isActive ? '1' : '0.8',
                transform: isActive ? 'scale(1)' : 'scale(0.9)',
                cursor: 'pointer',
            };
        };
        const [currentUrl] = useObservable('locationChange', injector.getInstance(LocationService).onLocationPathChanged);
        attachProps(element, { style: getAnchorStyle(currentUrl) });
        return createComponent(RouteLink, { ...props }, children);
    },
});
//# sourceMappingURL=app-bar-link.js.map