nav bar menu items flash when clicking between pages


Topic: nav bar menu items flash when clicking between pages

Nates pro premium asked 6 years ago

Expected behavior Not to flash

Actual behavior flashes

The code is basically taken from your navbar as per the website.

Question 2: What is the correct way to make each menu item active when clicked on.

Resources (screenshots, code snippets etc.)

constructor (props) { super(props); this.state = { collapse: false, }; this.onClick = this.onClick.bind(this); }

onClick() {
    this.setState({
        collapse: !this.state.collapse
    });
    console.log("look at me")
}

 <header>

            <MDBNavbar light expand="md" scrolling fixed="top" color="white">

                <MDBNavbarBrand href="/"                        >
                    <img src={ logo } height="auto" width="150" alt=" Logo" />
                </MDBNavbarBrand>

                <MDBNavbarToggler onClick={ this.onClick } />

                <MDBCollapse isOpen={ this.state.collapse } navbar>

                    <MDBNavbarNav left>

                        <MDBNavItem onClick={ this.onClick } active>
                            <MDBNavLink to="/">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem onClick={ this.onClick } >
                            <MDBNavLink to="/lessons">Lessons</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem onClick={ this.onClick } >
                            <MDBNavLink to="/settings">Settings</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem onClick={ this.onClick } >
                            <MDBNavLink to="/about#">About</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem onClick={ this.onClick } >
                            <MDBNavLink to="/faq">FAQ</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem onClick={ this.onClick } >
                            <MDBNavLink to="/contact">Contact</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem onClick={ this.onClick } >
                            <MDBNavLink to="/donate">Donate</MDBNavLink>
                        </MDBNavItem>

                    </MDBNavbarNav>

                    <MDBNavbarNav right>

                        <MDBNavItem>
                            <a href="#" target="_blank" rel="noopener noreferrer">
                                <MDBIcon fab icon="facebook-f" fixed className="mx-1" />
                            </a>
                        </MDBNavItem>

                    </MDBNavbarNav>

                </MDBCollapse>
            </MDBNavbar>

        </header>

Aliaksandr Andrasiuk staff answered 6 years ago

Unfortunately, that wasn't an obvious problem.

Our design team will test this issue and fix it.

Best regards, Aliaksandr from MDB.


Aliaksandr Andrasiuk staff answered 6 years ago

Hello,

Thank you for reaching us.

1) Problem with flashes

Please actualize your version of MDB Pro to version 4.12. It should solve problems with flashes.

2) What is the correct way to make each menu item active when clicked on?

You can store your 'active' state in the state of your component.

If it doesn't help or you have questions please contact us again.

Best regards,

Aliaksandr from MDB.


Nates pro premium answered 6 years ago

How do I actualise it to the new version?>

mdbreact": "git+https://oauth2:MYCODE-J@git.mdbootstrap.com/mdb/react/re-pro.git

I got this in my package.json

I am using create-react-app

SIDE QUESTION: Another thing, why do I get 2-3 emails everytime I get a response from support


Aliaksandr Andrasiuk staff answered 6 years ago

Hello,

You can actualize your version by following this instruction:

Delete your node_modules folder, then delete package-lock.json and use 'yarn' or 'npm install' command again.

SIDE QUESTION: Another thing, why do I get 2-3 emails everytime I get a response from support.

It was my fault, sorry. It will not happen again.

Best regards,

Aliaksandr from MDB.


Nates pro premium answered 6 years ago

I am getting this error when trying to build. I am using CRA without any custom stuff.

Attempted import error: 'Arrow' is not exported from 'react-popper'


Nates pro premium answered 6 years ago

3:23:33 PM: > react-scripts build 3:23:36 PM: Creating an optimized production build... 3:24:40 PM: Failed to compile. 3:24:40 PM: ./node_modules/mdbreact/dist/mdbreact.esm.js 3:24:40 PM: Attempted import error: 'Arrow' is not exported from 'react-popper'. 3:24:40 PM: npm 3:24:40 PM: ERR! code ELIFECYCLE 3:24:40 PM: npm 3:24:40 PM: ERR! errno 1


Nates pro premium answered 6 years ago

I had to back to version 4.11.1 to make the site build again :(


Aliaksandr Andrasiuk staff answered 6 years ago

Be sure you deleted node_modules folder and package-lock.json files.

Can you type 'npm ls react' command in command line and show me the result?

If it still doesn't work try to get our Gitlab repository from branch named next and make the same.

Best regards,

Aliaksandr from MDB.


Nates pro premium answered 6 years ago

I did all that

2:10:54 PM: ./node_modules/mdbreact/dist/mdbreact.esm.js 2:10:54 PM: Attempted import error: 'Arrow' is not exported from 'react-popper'.


+-- mdbreact@4.12.0 (git+https://oauth2:MYCODE-J@git.mdbootstrap.com/mdb/react/re-pro.git#9c308706c6272ddd1007b936784895d6d938926d) | -- react@16.8.6 deduped -- react@16.8.6

--

https://git.mdbootstrap.com/mdb/react/re-pro/tree/next << this worked.. now what?


Nates pro premium answered 6 years ago

it still flashes between pages


Aliaksandr Andrasiuk staff answered 6 years ago

What do you mean by 'flashes'? Can you show me the full code of your application? Seems like a problem with the Routing.

Best regards,

Aliaksandr from MDB.


Nates pro premium answered 6 years ago

// HEADER.JS

import React from 'react'; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';

    import { withRouter } from 'react-router-dom';

import logo from '../images/logo.svg'

import MenuItems from '../data/menuItems.json'
import MenuItemsSocial from '../data/menuItemsSocial.json'


class NavBar extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            collapse: false,
            active: "/"
        };
        this.onClick = this.onClick.bind(this);
    }

    /*
        After rendering, we check the current pathname e.g. lessons
        During the re-rendering of the menu items, we check if this pathname = the path of the menu item
        If so, we set that item as active
    */

    componentDidMount() {
        this.setState({
            active: this.props.location.pathname
        })
    }

    componentDidUpdate(prevProps) {

        if (this.props.location.pathname !== prevProps.location.pathname)
        {
            this.setState({
                active: this.props.location.pathname
            })
        }
    }

    // Collapses the Menu after user clicks a menu item
    onClick() {
        this.setState({
            collapse: !this.state.collapse
        })
    }

    render() {

        let currentPath = this.props.location.pathname

        return (
            <header>

                <MDBNavbar light expand="md" scrolling fixed="top" color="white">

                    <MDBNavbarBrand href="/">
                        <img src={ logo } width="150px" alt="Central - Logo" />
                    </MDBNavbarBrand>

                    <MDBNavbarToggler onClick={ this.onClick } />

                    <MDBCollapse isOpen={ this.state.collapse } navbar>

                        {
                            // Menu Items LHS
                        }
                        <MDBNavbarNav left>
                            {
                                MenuItems.map((item) => (
                                    <MDBNavItem
                                        key={ item["path"] }
                                        onClick={ this.onClick }
                                        active={ currentPath === ("/" + item["path"]).trim() ? true : false }
                                    >
                                        <MDBNavLink to={ item["path"] }>{ item["title"] }</MDBNavLink>
                                    </MDBNavItem>
                                ))
                            }

                        </MDBNavbarNav>


                        {
                            // Menu Items RHS (Social Icons)
                        }
                        <MDBNavbarNav right>

                            {
                                MenuItemsSocial.map((item) => (
                                    <MDBNavItem
                                        key={ item["icon"] }>
                                        <a
                                            href={ item["url"] }
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            <MDBIcon
                                                fab
                                                icon={ item["icon"] }
                                                fixed
                                                className="mx-1 ac-fonts" />
                                        </a>
                                    </MDBNavItem>
                                ))
                            }

                        </MDBNavbarNav>

                    </MDBCollapse>
                </MDBNavbar>

            </header>
        );
    }
}

export default withRouter(NavBar);

// APP.JS

import React, { Component } from 'react';
import { Router, Route, Switch } from "react-router-dom";


// MDBoostrap & CSS
import './App.css'
import { MDBContainer } from "mdbreact";
import { ToastContainer } from 'mdbreact';


// Core Components
import Header from './components/header';

// Lessons
import Lesson1 from './components/lessons/lesson1'
import Lesson2 from './components/lessons/lesson2'
import Lesson3 from './components/lessons/lesson3'
import Lesson4 from './components/lessons/lesson4'
import Lesson5 from './components/lessons/lesson5'
import Lesson6 from './components/lessons/lesson6'
import Lesson7 from './components/lessons/lesson7'
import Lesson8 from './components/lessons/lesson8'
import Lesson9 from './components/lessons/lesson9'
import Lesson10 from './components/lessons/lesson10'
import Lesson11 from './components/lessons/lesson11'
import Lesson12 from './components/lessons/lesson12'
import Lesson13 from './components/lessons/lesson13'
import Lesson14 from './components/lessons/lesson14'
import Lesson15 from './components/lessons/lesson15'
import Lesson16 from './components/lessons/lesson16'
import Lesson17 from './components/lessons/lesson17'
import Lesson18 from './components/lessons/lesson18'

// "Pages"
import Home from './components/pageHome';
import About from './components/pageAbout';
import Contact from './components/pageContact';
import Donate from './components/pageDonate';
import FAQ from './components/pageFAQ';
import NotFound from './components/page404';
import Lessons from './components/pageLessons';
import Settings from './components/pageSettings';

// Google Analytics Implementation
import ReactGA from 'react-ga';
const createHistory = require("history").createBrowserHistory
const history = createHistory()
const snap = navigator.userAgent !== 'ReactSnap';
const production = process.env.NODE_ENV === 'production'

// per the react-snap specific: Usage with Google Analytics
if (production && snap)
{
  ReactGA.initialize('UA-51335467-12');
  history.listen((location, action) => {
    ReactGA.pageview(location.pathname + location.search);
    // console.log(location.pathname)
  });
}


class App extends Component {

  contextMenu = (e) => {
    e.preventDefault();
    //addMenu.popup(e.clientX, e.clientY);
  }

  render() {

    const navStyle = { marginTop: "6.5rem", marginBottom: "2rem" };

    return (

      <div className="App" onContextMenu={ this.contextMenu }      >

        <Router history={ history }>

          <div>

            <Header />

            <main>

              <MDBContainer style={ navStyle }>

                <Switch>

                  {
                    // Pages 
                  }
                  <Route exact path="/" component={ Home } />
                  <Route path="/about" component={ About } />
                  <Route path="/contact" component={ Contact } />
                  <Route path="/donate" component={ Donate } />
                  <Route path="/faq" component={ FAQ } />
                  <Route path="/lessons" component={ Lessons } />
                  <Route path="/settings" component={ Settings } />

                  {
                    // Lessons 
                  }
                  <Route path="/lesson1" component={ Lesson1 } />
                  <Route path="/lesson2" component={ Lesson2 } />
                  <Route path="/lesson3" component={ Lesson3 } />
                  <Route path="/lesson4" component={ Lesson4 } />
                  <Route path="/lesson5" component={ Lesson5 } />
                  <Route path="/lesson6" component={ Lesson6 } />
                  <Route path="/lesson7" component={ Lesson7 } />
                  <Route path="/lesson8" component={ Lesson8 } />
                  <Route path="/lesson9" component={ Lesson9 } />
                  <Route path="/lesson10" component={ Lesson10 } />
                  <Route path="/lesson11" component={ Lesson11 } />
                  <Route path="/lesson12" component={ Lesson12 } />
                  <Route path="/lesson13" component={ Lesson13 } />
                  <Route path="/lesson14" component={ Lesson14 } />
                  <Route path="/lesson15" component={ Lesson15 } />
                  <Route path="/lesson16" component={ Lesson16 } />
                  <Route path="/lesson17" component={ Lesson17 } />
                  <Route path="/lesson18" component={ Lesson18 } />

                  <Route path="*" component={ NotFound } />

                </Switch>



              </MDBContainer>

            </main>

          </div>

        </Router>

        <ToastContainer
          hideProgressBar={ true }
          newestOnTop={ true }
          autoClose={ 3000 }
        />

      </div>

    );
  }
}

export default App;

Nates pro premium answered 6 years ago

I tried putting the outisde of the but then it complains, because I use withRouter inside

I also noticed mdbreact requires react-router-dom v4.3 but v5 is out, maybe it is related?


Nates pro premium answered 6 years ago

Somebody else had the same issue.. they had to do this...

On click of menu item, some js code is adding height : 0px on the collapse navbar-collapse element (for the closing dropdown animation effect in mobile view) and then removing it after a few miliseconds. Add the following style, it will not allow the height 0 to get applied in desktop views because of higher specificity and important attribute. Hence, the flickering will not occur.

@media (min-width: 768px) { .navbar-expand-md .navbar-collapse { height: auto !important; } }

https://stackoverflow.com/questions/51126378/how-to-fix-a-css-navigation-flashing-issue/51472008

Is this maybe a bug?

Also, you said to use the NEXT branch, when can I use teh main branch again, I am just concerned I will forget to go back.. clearly, something in the NEXT branch is fixing my build problem, so I cannot go to the main branch..


Aliaksandr Andrasiuk staff answered 6 years ago

Please, send the full code, because I can do nothing without all imported Components. It will be good if you have a repositrory with this project and just give me the link to it.

Best regards,

Aliaksandr from MDB


Nates pro premium answered 6 years ago

What is your email address? It is a private repo I can add you. GitHub

As mentioned, this @media (min-width: 768px) { .navbar-expand-md .navbar-collapse { height: auto !important; } }

fixed the flahsing problem.

Also, today I updated to 4.12.0 AGAIN and it works, I noticed sometimes the build fails for no reason and sometimes it works. After I push non-meaningful updates like just changing some wording in a paragraph.. the builds fail/pass its odd.

So I guess I am good for now.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

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