import { observer } from 'mobx-react-lite' ; import styled , { css } from 'reshadow' ; import { useService } from '@cloudbeaver/core-di' ; import { TopMenuItem } from '../shared/TopMenuItem' ; import { MainMenuService } from './MainMenuService' ; const styles = css `
  menu-wrapper {
    display: flex;
    height: 100%;
    background: #338ecc;
  }
  TopMenuItem {
    text-transform: uppercase;
    font-weight: 700;
    height: 100%;
  }
` ; export const MainMenu = observer ( function MainMenu ( ) { const mainMenuService = useService ( MainMenuService ) ; return styled ( styles ) ( < menu - wrapper > { mainMenuService . getMainMenu ( ) . map ( ( topItem , i ) => ( < TopMenuItem key = { i } menuItem = { topItem } / > ) ) } < /menu-wrapper>); } ) ;