Fix nav jiggle by adding data-title attribute and css:after
Reorder content and display order in navbar.scsspull/1484/head
parent
2e79d97e5e
commit
5342c2eae7
|
@ -113,6 +113,14 @@ nav {
|
||||||
div {
|
div {
|
||||||
display: inline;
|
display: inline;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
&:after{
|
||||||
|
content: attr(data-title);
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -137,6 +145,14 @@ nav {
|
||||||
margin-right: 0.8rem;
|
margin-right: 0.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.nav-name:after{
|
||||||
|
content: attr(data-title);
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-popover {
|
.menu-popover {
|
||||||
|
|
|
@ -109,7 +109,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
|
||||||
position={Position.BOTTOM_RIGHT}
|
position={Position.BOTTOM_RIGHT}
|
||||||
isOpen={accountMenuOpen}
|
isOpen={accountMenuOpen}
|
||||||
onClose={this.close("accountMenuOpen")}>
|
onClose={this.close("accountMenuOpen")}>
|
||||||
<div className="nav-name"
|
<div className="nav-name" data-title={firstName}
|
||||||
onClick={this.toggle("accountMenuOpen")}>
|
onClick={this.toggle("accountMenuOpen")}>
|
||||||
{firstName}
|
{firstName}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -62,7 +62,7 @@ export const NavLinks = (props: NavLinksProps) => {
|
||||||
draggable={false}
|
draggable={false}
|
||||||
onClick={props.close("mobileMenuOpen")}>
|
onClick={props.close("mobileMenuOpen")}>
|
||||||
<i className={`fa fa-${link.icon}`} />
|
<i className={`fa fa-${link.icon}`} />
|
||||||
<div>
|
<div data-title={t(link.name)}>
|
||||||
{t(link.name)}
|
{t(link.name)}
|
||||||
{link.slug === "messages" && props.alertCount > 0 &&
|
{link.slug === "messages" && props.alertCount > 0 &&
|
||||||
<div className={"saucer fun"}>
|
<div className={"saucer fun"}>
|
||||||
|
|
Loading…
Reference in New Issue