I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here.
This is how I structured my code for the Navigation "Item":
import React from "react";
import styled from "styled-components";
const NavigationItemList = styled.div`
margin: 0;
box-sizing: border-box;
display: flex;
height: 100%;
align-items: center;
`;
const NavigationItemA = styled.div`
color: white;
text-decoration: none;
height: 100%;
padding: 16px 10px;
border-bottom: 4px solid transparent;
box-sizing: border-box;
display: block;
:hover,
:active {
background-color: #8f5C2;
border-bottom: 4px solid #40a4c8;
color: white;
}
`;
const NavigationItem = (props) => {
return (
<NavigationItemList active={props.active}>
<NavigationItemA href={props.link}>{props.children}</NavigationItemA>
</NavigationItemList>
);
};
export default NavigationItem;
This is where I defined my "Items":
const NavigationItemsStyled = styled.div`
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
height: 100%;
`;
const NavigationItems = (props) => {
return (
<NavigationItemsStyled>
<ul>
<NavigationItem>Burger Builder</NavigationItem>
<NavigationItem>Checkout</NavigationItem>
</ul>
</NavigationItemsStyled>
);
};
The toolbar is where I place my Items:
import React from "react";
import styled from "styled-components";
import NavigationItems from "../NavigationItems/NavigationItems";
const ToolbarStyled = styled.div`
height: 56px;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
background-color: #da291c;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
z-index: 90;
color: white;
`;
const Toolbar = (props) => {
return (
<ToolbarStyled>
<p>Logo</p>
<nav>
<NavigationItems />
</nav>
</ToolbarStyled>
);
};
export default Toolbar;
Any assistance on resolving this issue would be greatly appreciated :)