Я только начал использовать semanti c -ui-реагировать на создание личного сайта, и когда я добавляю lo go в меню в качестве изображения, это сбрасывает выравнивание значков справа. Я возился с различными атрибутами меню semanti c -ui безрезультатно, и я не очень хорош с css, поэтому любая помощь приветствуется. Я пытался использовать атрибут fit = для пунктов меню, но это не помогает. Если я попытаюсь обернуть пункты меню в div и дополнить их, все меню будет сброшено.
Код:
import React, { Component } from 'react'
import { Link, NavLink, withRouter } from 'react-router-dom'
import { Button, Icon, Image, Menu } from 'semantic-ui-react'
//TODO: make paths absolute
import logo from '../../static/images/bridge-logo-trans.png'
const menuItems = [
{name: "About", link: "/about"},
{name: "Resume", link: "/resume"},
{name: "Blog", link: "/blog"},
];
const contactItems = [
{color: "black", icon: "github", link: "link1"},
{color: "linkedin", icon: "linkedin", link: "link2"},
{color: "red", icon: "mail", link: "link3"}
];
class TopMenu extends Component {
constructor(props) {
super(props);
this.state = {
activeItem: "",
}
this.handleItemClick = this.handleItemClick.bind(this);
this.handleLogoClick = this.handleLogoClick.bind(this);
}
handleItemClick(e, menuItem) {
this.setState({ activeItem: menuItem.name });
}
handleLogoClick(e) {
this.setState({ activeItem: menuItems[0].name });
}
render() {
return (
<Menu stackable>
<Menu.Item>
<Image as={NavLink} to="/"
src={logo} size='small' onClick={this.handleLogoClick}/>
</Menu.Item>
{menuItems.map((item) => (
<Menu.Item
as={NavLink}
to={item.link}
name={item.name}
active={this.state.activeItem === item.name}
onClick={this.handleItemClick}
>
{item.name}
</Menu.Item>
))}
<Menu.Menu position="right">
{contactItems.map((item) => (
<Menu.Item
as="a"
href={item.link}
target="_blank"
>
<Button circular color={item.color} icon={item.icon} />
</Menu.Item>
))}
</Menu.Menu>
</Menu>
)
}
}
export default withRouter(TopMenu);