@selfcommunity/react-theme-default/lib/esm/components/SCNavigationToolbarMobile.js

Default theme to use with SelfCommunity TS library

import { getContrastRatio } from '@mui/material';
const Component = {
    styleOverrides: {
        root: ({ theme }) => {
            var _a, _b;
            return ({
                padding: `${theme.spacing(0, 1, 0, 1)} !important`,
                '& .SCNavigationToolbarMobile-logo, & .SCNavigationToolbarMobile-custom-item': {
                    margin: theme.spacing(0.5, 2, 0.5, 0.5),
                    flexGrow: 1,
                    '& img': {
                        verticalAlign: 'middle',
                        maxHeight: `calc(${theme.mixins.toolbar.minHeight}px - ${theme.spacing(2)})`
                    }
                },
                '& .SCNavigationToolbarMobile-logo-flex': {
                    flexGrow: 0
                },
                '& .MuiIconButton-root': {
                    color: getContrastRatio((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
                },
                '& h4': {
                    fontSize: '1.286rem',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                }
            });
        },
        skeletonRoot: ({ theme }) => ({
            '& .SCNavigationToolbarMobile-logo': {
                width: 100,
                height: 20
            }
        })
    }
};
export default Component;