Skip to content

Commit

Permalink
only show the complete nav and toggle when there are menu items
Browse files Browse the repository at this point in the history
  • Loading branch information
@unconnect
unconnect committed May 11, 2021
1 parent 602d4ea commit 16d4071
Showing 1 changed file with 53 additions and 47 deletions.
100 changes: 53 additions & 47 deletions packages/nikolas-real-frontend/src/components/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,54 +22,60 @@ const BsNavbar = ({state}) => {

<Navbar bg="dark" variant="dark" fixed={"top"} expand="md">
<Link className={'navbar-brand h1 mb-0 font-weight-bold'} link="/">{brandname}</Link>
{ items.length > 0 ? <Navbar.Toggle aria-controls="basic-navbar-nav"/> : null }
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" aria-label="toolbar">
<ul className="navbar-nav mr-auto">
{items.map((item) => {
// Make URL Object from item.url string
const itemFrontendUrl = new URL(item.url)
const isCurrent = (itemFrontendUrl.pathname == state.router.link) ? "active" : ""
if (!item.child_items) {
return (
// Only output pathname and has from URL
<li className={`nav-item ${isCurrent}`} key={item.ID}>
<Link className={"nav-link"}
link={itemFrontendUrl.pathname + itemFrontendUrl.hash}>{item.title}</Link>
</li>
)
} else {
const childItems = item.child_items
return (
<li className="nav-item" key={item.ID}>
<Dropdown key={"dropdown" + item.ID} as={ButtonGroup} variant="default">
<Link key={item.ID}
link={itemFrontendUrl.pathname + itemFrontendUrl.hash}
className={`nav-link ${isCurrent}`}
>{item.title}</Link>
<Dropdown.Toggle key={"dropdown-toggle" + item.ID}
id={"dropdown-toggle" + item.ID}
split
variant={"link"}/>
{/* Only show Nav and Toggle when there are items in the wordpress menu*/}
{ items.length > 0 && (
<>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" aria-label="toolbar">
<ul className="navbar-nav mr-auto">
{items.map((item) => {
// Make URL Object from item.url string
const itemFrontendUrl = new URL(item.url)
const isCurrent = (itemFrontendUrl.pathname == state.router.link) ? "active" : ""
if (!item.child_items) {
return (
// Only output pathname and has from URL
<li className={`nav-item ${isCurrent}`} key={item.ID}>
<Link className={"nav-link"}
link={itemFrontendUrl.pathname + itemFrontendUrl.hash}>{item.title}</Link>
</li>
)
} else {
const childItems = item.child_items
return (
<li className="nav-item" key={item.ID}>
<Dropdown key={"dropdown" + item.ID} as={ButtonGroup} variant="default">
<Link key={item.ID}
link={itemFrontendUrl.pathname + itemFrontendUrl.hash}
className={`nav-link ${isCurrent}`}
>{item.title}</Link>
<Dropdown.Toggle key={"dropdown-toggle" + item.ID}
id={"dropdown-toggle" + item.ID}
split
variant={"link"}/>

<Dropdown.Menu>
{childItems.map((item) => {
const childFrontendUrl = new URL(item.url)
return (
<Link key={item.ID}
link={childFrontendUrl.pathname + childFrontendUrl.hash}
className={`dropdown-item ${isCurrent}`}>{item.title}</Link>
)
})}
</Dropdown.Menu>
</Dropdown>
</li>
)
}
})}
</ul>
</Nav>
</Navbar.Collapse>
<Dropdown.Menu>
{childItems.map((item) => {
const childFrontendUrl = new URL(item.url)
return (
<Link key={item.ID}
link={childFrontendUrl.pathname + childFrontendUrl.hash}
className={`dropdown-item ${isCurrent}`}>{item.title}</Link>
)
})}
</Dropdown.Menu>
</Dropdown>
</li>
)
}
})}
</ul>
</Nav>
</Navbar.Collapse>
</>
)
}
</Navbar>
)
}
Expand Down

1 comment on commit 16d4071

@vercel
Copy link

@vercel vercel bot commented on 16d4071 May 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.