Looking for help with 'Advanced Double Navigation with fixed SideNav & fixed Navbar' component

okia pro asked 3 months ago

Hello!
May I ask you please to help me with the using 'Advanced Double Navigation with fixed SideNav & fixed Navbar' PRO component? Here is what I did:
Step 1: followed all the steps from the https://mdbootstrap.com/react/5-min-quick-start/ tutorial
Step 2: was unable to find any 'Advanced Double Navigation with fixed SideNav & fixed Navbar' component in <my project dir>node_modulesmdbreactsrccomponentspro folder, so I copied it from https://mdbootstrap.com/react/layout/react-navigation/ by pressing "copy code" button and saving it to the file.
Step 3: Composed a very simple app comprising just one 'Advanced Double Navigation with fixed SideNav & fixed Navbar' component:
```
class App extends Component {
render() {
return (
<div className="App">
<DoubleNavigationWithFixedSideNavFixedNavbar/>
</div>
);
}
}

Step 4: run and observe the result.
- I'd expect something like the screenshot from your web site: https://drive.google.com/file/d/1X18FT3zcOGIe1GSZuQh-AREPRoYdYI0S/view
- This is what I am actually getting: https://drive.google.com/file/d/1QOxzF7aXZ4a1zXeZayYuWD3WIEJp_k-g/view

Question 1: Am I getting this component from the right place? If not, where shall I get it?
Question 2: It looks like I am missing CSS part of the component, but where shall I get it? Note, I have this line 'import 'mdbreact/dist/css/mdb.css';' in my app.
Thoughts?
Any feedback will be greatly appreciated!

 

 


Hi there Okia,

Thanks for reaching out and the visual aid you provided! There are few things I feel are worth mentioning here.
Firstly - this one is obviously a bug, so thanks again for bringing it to our attention. The <NavItem> element should have an additional margin-left to be visible.
Secondly - the DoubleNavigationWithFixedSideNavFixedNavbar is used to present a UI solution and is not a "self contained, self-sufficient" "component" per se. As such, it consists of two components (a SideNav and a Navbar), both of which feature a fixed prop. The reason for this bug is that the documentation has not been properly updated since our nifty SideNav refactoring in MBR React 4.6.0. It shall be fixed in the upcoming days, so stay tuned!
Thirdly - it indeed seems like there are some styles missing, but I am not sure what got bamboozled exactly.

TL;DR: The place you got it is OK, but there is an issue with the snippet. You should not be having to import any additional styles, so I suggest making sure that your package is up to date and checking out the documentation tomorrow, when the new snippet shall be provided. Our last line of defense shall be walking through the code line by line while checking whether the classes get applied correctly (as in the jQ version).

Sorry for all this hussle.

With Best Regards,
Kuba


Jakub Strebeyko commented 3 months ago

The SideNav snippet has already been updated. Please check out whether pasting it into your project renders the component correctly. The snippets of the more complex navigation arrangements will get fixed soon. :)


okia pro answered 2 months ago

>The SideNav snippet has already been updated.

okia: Really? I cannot see that :(
Here is what I am doing:

Step 1: Updated mdbreact-pro as described by Anna Morawska [here](https://mdbootstrap.com/support/mdb-react-new-version/). Now my project refers to the latest mdbreact pro version, correct?
Step 2: repeated steps 2-4 from the original test case (see this post, above).
Result: the same. Problem is not solved. SideNav continues to overlap NavBar :(

Thoughts?


okia pro answered 2 months ago

Hello?
Any suggestions?
This topic should be a novelty for you, this bug has been reported already about month ago, [here](https://mdbootstrap.com/support/react-advanced-double-navigation-with-fixed-sidenav-fixed-navbar/)

Are you going to fix it anytime soon? Or at all?

Sincerely,


Hi there,

Sorry I kept you waiting. My suggestion: SideNav default width is 240px. Consider creating a CSS class with {margin-left:250px} (and perhaps some transition) and applying it to the Navbar's NavbarBrand component whenever the SideNav is open, which in a fixed propped case means always. Fixing snippets has just been scheduled.

With Best Regards,
Kuba


okia pro answered 2 months ago

Hello, Jakub!

I am not sure I understood your advice correctly ... did you try it yourself?
If not, may I ask you to do it? I.e.
1. Insert NavBarBrand with {margin-left:250px} CSS class into ‘Advanced Double Navigation with fixed SideNav & fixed Navbar’ PRO component (there is currently none in the snippet)
2. Start the simple app comprising only one ‘Advanced Double Navigation with fixed SideNav & fixed Navbar’ PRO component (as described above)
3. Now make the page smaller by resizing browser window and observe the position of the hamburger icon
See what I mean?
Is it an expected behavior?
I don't think so ...

Thoughts?


Yes, I did. Was fun!

I suggest starting off with snippets that are not, as I mentioned, "overdue". Going with original SideNav and Navbar components can get you way further with little cunning!
Anyway, thanks to you we realized our omission and starting tomorrow there will be a new props on SideNav called onOverlayClick! It will help people wire up the logic the moving NavbarBrand. Thanks again!

With the Friendliest of Regards,
Kuba


okia pro answered 2 months ago

>I suggest starting off with snippets that are not, as I mentioned, “overdue”. Going with original SideNav and Navbar components can get you way further with little cunning!

Thank you, I really appreciate your suggestion!

But, since we are on this note, let me share my part of the story. Your website is advertising MDB React Pro's "compositions" as follows: "MDB provides you several useful, ready-to-use navigation layouts with various predefined navigation types" (here: https://mdbootstrap.com/react/layout/react-navigation/). Frankly, ‘Advanced Double Navigation with fixed SideNav & fixed Navbar’ component (along with very few others) was one of the main motivations for my purchase - I thought I'd get working "template" web-site component, fill/replace it with my specific data and voila - would save myself a lot of time. But, honestly, is it really quite "ready-to-use" ?

Sincerely,

 


Hi there,

I completely get you - it is said to be working out of the box, while in fact the documentation does not catch up with the package. I am sorry that what you came for, a page navigation solution snippet, was not delivered to you in a desired manner. Thanks to yours and others feedback we are able to make the package and the documentation better. We will be replacing the faulty documentation on Double Navigation shortly.

Meanwhile, please be informed that the MDB React PRO 4.7.0 is out and it features some new tools to deal with the issue. For dynamic changes consider using onOverlayClick hook, designating the moment SideNav is closed on user interaction, allowing to apply custom changes in styles (like, say, moving something onto the SideNav space). It seems, though, that yours is a less dynamic use case, as it involves two fixed entities. Here I present a hotfix using left padding. Please paste the following into a MDB React-enabled project.

import React, { Component } from 'react'; import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Fa, SideNavItem, SideNavCat, SideNavNav, SideNav, SideNavLink } from 'mdbreact'; import { BrowserRouter as Router } from 'react-router-dom'; class DoubleNavigationExample extends React.Component { constructor(props) { super(props); this.state = { collapse: false }; } onClick = () => { this.setState({ collapse: !this.state.collapse, }); } render() { return ( <Router> <div> <Navbar color="indigo" dark expand="md" scrolling style={{paddingLeft: '250px'}}> <NavbarBrand href="/"> <strong>Navbar</strong> </NavbarBrand> { !this.state.isWideEnough && } <Collapse isOpen = { this.state.collapse } navbar> <NavbarNav left> <NavItem active> <NavLink to="#">Home </NavItem> <NavItem> <NavLink to="#">Features </NavItem> <NavItem> <NavLink to="#">Pricing </NavItem> </NavbarNav> <NavbarNav right> <NavItem> <form className="form-inline md-form my-0"> <input className="form-control mr-sm-2 mb-0 text-white" type="text" placeholder="Search" aria-label="Search"/> </form> </NavItem> </NavbarNav> </Collapse> </Navbar> <SideNav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png" hidden triggerOpening={this.state.isLeftOpen} breakWidth={1300} className="deep-purple darken-4" fixed> <li> <ul className="social"> <li><a href="#!"><Fa icon="facebook"></Fa></a></li> <li><a href="#!"><Fa icon="pinterest"></Fa></a></li> <li><a href="#!"><Fa icon="google-plus"></Fa></a></li> <li><a href="#!"><Fa icon="twitter"></Fa></a></li> </ul> </li> <SideNavNav> <SideNavLink>Submit listing <SideNavLink>Registration form </SideNavCat> <SideNavCat name="Instruction" icon="hand-pointer-o" href="#"> <SideNavLink>For bloggers</SideNavLink> <SideNavLink>For authors</SideNavLink> </SideNavCat> <SideNavCat name="About" icon="eye"> <SideNavLink>Instruction</SideNavLink> <SideNavLink>Monthly meetings</SideNavLink> </SideNavCat> <SideNavCat name="Contact me" icon="envelope-o"> <SideNavLink>FAQ</SideNavLink> <SideNavLink>Write a message</SideNavLink> </SideNavCat> </SideNavNav> </SideNav> </div> </Router> ); } } export default DoubleNavigationExample 

Again, sorry for the inconvenience. And huge thanks for reaching out!
I will be out for some time, but do not hesitate to let us know whether the solution covered you for at least a small bit. In any case, my colleagues are at your disposal.

with Best Regards,
Kuba


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No