How to fix badge position in menu header React with ant design - html

Question

im trying to put an element Badge to the right of header menu in my page, but I don't know how do that, currently de Menu element of ant design push to another position the badge (bell icon):
The code:
const HeaderComp = (props) => {
let navigation = useNavigate()
const root= AppConfig.BucciaratiRoot.length>0 ? "/"+AppConfig.BucciaratiRoot:"/"
return (
<Layout>
<Header className="header" style={{position:'fixed', zIndex: 1, width: '100%'}}>
<div style={{float:'left', marginRight:'5%'}}>
<img style={{width: 120, height:31}} src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"/>
</div>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} >
<Menu.Item key="1" onClick={()=>navigation(root)}>Home</Menu.Item>
<Menu.Item key="3">About</Menu.Item>
</Menu>
<div style={{float:'right', marginLeft:'5%'}}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</Header>
</Layout>
)
}
How cain I put the badge to the right of the header menu ?

Answer 1

You can use flex instead of float, and then but every element you want to be at the right in a div and every element to the left in another div, and using some justify-content:"space-between" property in flex you can make the space left in the navbar to be in between those to divs.
See more on FlexBox
your code should look like:
return (
<Layout>
<Header
className='header'
style={{
position: "fixed",
zIndex: 1,
width: "100%",
display: "flex", // make the header flex
justifyContent: "space-between", // put all the space between the left and right sections of the menu
}}
>
<div className='header-left'>
{/* The left side of the menu */}
<div style={{ /* remove float */ marginRight: "5%" }}>
<img
style={{ width: 120, height: 31 }}
src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png'
/>
</div>
<Menu
theme='dark'
mode='horizontal'
defaultSelectedKeys={["1"]}
>
<Menu.Item key='1' onClick={() => navigation(root)}>
Home
</Menu.Item>
<Menu.Item key='3'>About</Menu.Item>
</Menu>
</div>
<div className='header-right'>
{/* The right side of the menu */}
<div style={{ /* remove float */ marginLeft: "5%" }}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</div>
</Header>
</Layout>
);

Answer 2

<Layout>
<Header
className="header"
style={{
position: 'fixed',
zIndex: 1,
width: '100%',
display: 'flex',
justifyContent: 'space-between',
}}
>
<div>
<div style={{ marginRight: '5%' }}>
<img
style={{ width: 120, height: 31 }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"
/>
</div>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
<Menu.Item key="1" onClick={() => navigation(root)}>
Home
</Menu.Item>
<Menu.Item key="3">About</Menu.Item>
</Menu>
</div>
<div style={{ marginLeft: '5%' }}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</Header>
</Layout>;