import React from 'react';
import Icon from '../icon/Icon';
import AppLink, { Props as LinkProps } from '../link/AppLink';

interface Props extends LinkProps {
    icon: string;
    info: string;
}
export const SidebarListItemHeaderLinkButton = ({ info, icon, ...rest }: Props) => {
    return (
        <AppLink className="navigation-link-header-group-link flex-item-noshrink" type="button" {...rest}>
            <Icon name={icon} className="navigation-icon" />
            <span className="sr-only">{info}</span>
        </AppLink>
    );
};

export default SidebarListItemHeaderLinkButton;

import React from 'react';
import Icon from '../icon/Icon';
import AppLink, { Props as LinkProps } from '../link/AppLink';

interface Props extends LinkProps {
    icon: string;
    info: string;
}
export const SidebarListItemHeaderLinkButton = ({ info, icon, ...rest }: Props) => {
    return (
        <AppLink className="flex navigation-link-header-group-link flex-item-noshrink" type="button" {...rest}>
            <Icon name={icon} className="navigation-icon" />
            <span className="sr-only">{info}</span>
        </AppLink>
    );
};

export default SidebarListItemHeaderLinkButton;

Add flex to align items
Add flex to align items
