react-bootstrap-sidebar-menu
react-bootstrap-sidebar-menu copied to clipboard
ivp-dev
Using the provided example code does not produce a navbar
I am trying to create a navbar, but when I use the example code, no menus or submenus appear visually in my browser, despite rendered HTML being present.
Using the following code (provided from README.md)
CoachingDashboard.scss
@import "~bootstrap/scss/bootstrap";
@import "react-bootstrap-sidebar-menu/dist/sidebar-menu";
CoachingDashboard.tsx
import SidebarMenu from 'react-bootstrap-sidebar-menu';
import './styles/CoachingDashboard.scss';
import logo from '../common/images/logo.png'
type Props = {
userId: number
}
export const CoachingDashboard = ({userId}:Props) => {
return (
<SidebarMenu>
<SidebarMenu.Collapse>
<SidebarMenu.Header>
<SidebarMenu.Brand>
{<img src={logo}/>}
</SidebarMenu.Brand>
<SidebarMenu.Toggle />
</SidebarMenu.Header>
<SidebarMenu.Body>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Icon>
{/* Menu item icon */}
</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>
{'Menu Title'}
</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
</SidebarMenu.Nav>
<SidebarMenu.Sub>
<SidebarMenu.Sub.Toggle>
<SidebarMenu.Nav.Icon />
<SidebarMenu.Nav.Title>
{'Submenu'}
</SidebarMenu.Nav.Title>
</SidebarMenu.Sub.Toggle>
<SidebarMenu.Sub.Collapse>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Icon>
{/* Submenu item icon */}
</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>
{/* Submenu item title */}
</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
</SidebarMenu.Nav>
</SidebarMenu.Sub.Collapse>
</SidebarMenu.Sub>
</SidebarMenu.Body>
</SidebarMenu.Collapse>
</SidebarMenu>
)
}
This is the rendered HTML. It looks like the <span> tags contain the text, but it's not rendered by my browser.
<div>
<aside
class="sidebar-menu sidebar-menu-expand show sidebar-menu-light"
role="navigation"
>
<div
class="sidebar-menu-collapse collapse show collapse-horizontal"
>
<div
class="sidebar-menu-header"
>
<span
class="sidebar-menu-brand"
>
<img
src="logo.png"
/>
</span>
<button
aria-label="Toggle navigation"
class="sidebar-menu-toggle"
type="button"
>
<span
class="sidebar-menu-toggle-icon"
/>
</button>
</div>
<div
class="sidebar-menu-body"
>
<div
class="sidebar-menu-nav"
>
<a
class="sidebar-menu-nav-link"
href="#"
role="button"
tabindex="0"
>
<span
class="sidebar-menu-nav-icon"
/>
<span
class="sidebar-menu-nav-title"
>
Menu Title
</span>
</a>
</div>
<div
class="sidebar-menu-sub"
>
<button
aria-label="Toggle navigation"
class="sidebar-menu-sub-toggle collapsed"
type="button"
>
<span
class="sidebar-menu-nav-icon"
/>
<span
class="sidebar-menu-nav-title"
>
Submenu
</span>
</button>
<div
class="sidebar-menu-sub-collapse collapse"
>
<div
class="sidebar-menu-nav"
>
<a
class="sidebar-menu-nav-link"
href="#"
role="button"
tabindex="0"
>
<span
class="sidebar-menu-nav-icon"
/>
<span
class="sidebar-menu-nav-title"
/>
</a>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
Can you provide a full set of working example code so I can sandbox it and verify it's working?
And why this lib should produce an example of navbar? It should produce an example of sidebar. Use this lib to add navbar.
I have the same issue with example code from README.md. I use the code from demo source and it works fine.
Here is the modified code from demo source. You can paste it to your source to see if it works for you.
<SidebarMenu
defaultExpanded={true}
expand="lg"
hide="md"
>
<SidebarMenu.Collapse>
<SidebarMenu.Header>
<SidebarMenu.Brand title="React-Bootstrap" href="https://github.com/react-bootstrap/react-bootstrap">
<span className="react-bootstrap-img" />
</SidebarMenu.Brand>
<SidebarMenu.Toggle />
</SidebarMenu.Header>
<SidebarMenu.Body>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link eventKey="setup">
<SidebarMenu.Nav.Icon>1</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>How to install</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="usage">
<SidebarMenu.Nav.Icon>2</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>Usage</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="overview">
<SidebarMenu.Nav.Icon>3</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>Overview</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Sub eventKey={0}>
<SidebarMenu.Sub.Toggle>
<SidebarMenu.Nav.Icon />
<SidebarMenu.Nav.Title>Api</SidebarMenu.Nav.Title>
</SidebarMenu.Sub.Toggle>
<SidebarMenu.Sub.Collapse>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link eventKey="sidebarmenu">
<SidebarMenu.Nav.Icon>4</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Sub eventKey={1}>
<SidebarMenu.Sub.Toggle>
<SidebarMenu.Nav.Icon />
<SidebarMenu.Nav.Title>Built-in elements</SidebarMenu.Nav.Title>
</SidebarMenu.Sub.Toggle>
<SidebarMenu.Sub.Collapse>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.nav">
<SidebarMenu.Nav.Icon>4.1</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Nav</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Sub eventKey={2}>
<SidebarMenu.Sub.Toggle>
<SidebarMenu.Nav.Icon />
<SidebarMenu.Nav.Title>Built-in elements</SidebarMenu.Nav.Title>
</SidebarMenu.Sub.Toggle>
<SidebarMenu.Sub.Collapse>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.link">
<SidebarMenu.Nav.Icon>4.1.1</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Nav.Link</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.item">
<SidebarMenu.Nav.Icon>4.1.2</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Nav.Item</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.icon">
<SidebarMenu.Nav.Icon>4.1.3</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Nav.Icon</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.nav.title">
<SidebarMenu.Nav.Icon>4.1.4</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Nav.Title</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
</SidebarMenu.Nav>
</SidebarMenu.Sub.Collapse>
</SidebarMenu.Sub>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.sub">
<SidebarMenu.Nav.Icon>4.2</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Sub</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Sub eventKey={3}>
<SidebarMenu.Sub.Toggle>
<SidebarMenu.Nav.Icon />
<SidebarMenu.Nav.Title>Built-in elements</SidebarMenu.Nav.Title>
</SidebarMenu.Sub.Toggle>
<SidebarMenu.Sub.Collapse>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.sub.collapse">
<SidebarMenu.Nav.Icon>4.2.1</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Sub.Collapse</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.sub.toggle">
<SidebarMenu.Nav.Icon>4.2.2</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Sub.Toggle</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
</SidebarMenu.Nav>
</SidebarMenu.Sub.Collapse>
</SidebarMenu.Sub>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.brand">
<SidebarMenu.Nav.Icon>4.3</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Brand</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.toggle">
<SidebarMenu.Nav.Icon>4.4</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Toggle</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.collapse">
<SidebarMenu.Nav.Icon>4.5</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Collapse</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.text">
<SidebarMenu.Nav.Icon>4.6</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Text</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.header">
<SidebarMenu.Nav.Icon>4.7</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Header</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.body">
<SidebarMenu.Nav.Icon>4.8</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Body</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Link eventKey="sidebarmenu.footer">
<SidebarMenu.Nav.Icon>4.9</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>SidebarMenu.Footer</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
</SidebarMenu.Nav>
</SidebarMenu.Sub.Collapse>
</SidebarMenu.Sub>
</SidebarMenu.Nav>
</SidebarMenu.Sub.Collapse>
</SidebarMenu.Sub>
</SidebarMenu.Nav>
</SidebarMenu.Body>
<SidebarMenu.Footer>
</SidebarMenu.Footer>
</SidebarMenu.Collapse>
</SidebarMenu>
It seems that something wrong with demo code. I will create an example in codesandbox and will share here.
Just a thought, but could some example code maybe be included in the README, or at least the demo? I couldn't find this at all before I stumbled across this thread, and like OP could not get what was in the README to work.
It's a lot easier to use a library if there's a working example that you can use and then modify, as opposed to trying to work out how everything works from scratch.
