nav bar menu items flash when clicking between pages

Topic: nav bar menu items flash when clicking between pages

Nates premium asked 5 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>

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

Unfortunately, that wasn't an obvious problem.

Our design team will test this issue and fix it.

Best regards, Aliaksandr from MDB.

Add comment

Nates premium answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

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

Add comment

Nates premium answered 5 years ago

0 0 Best answer

<p>Somebody else had the same issue.. they had to do this...</p>

<pre class="prettyprint"><code>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.
</code></pre>

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

<p><a href="https://stackoverflow.com/questions/51126378/how-to-fix-a-css-navigation-flashing-issue/51472008" target="_blank" rel="nofollow">https://stackoverflow.com/questions/51126378/how-to-fix-a-css-navigation-flashing-issue/51472008</a></p>

<p>Is this maybe a bug?</p>

<p>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..</p>

Please insert min. 20 characters.

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..

Add comment

Nates premium answered 5 years ago

0 0 Best answer

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?

Add comment

Nates premium answered 5 years ago

0 0 Best answer

<p>// HEADER.JS </p>

<pre class="prettyprint"><code>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>

{
                            // 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);
</code></pre>

<pre class="prettyprint"><code>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>

<main>

{
                    // 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 } />

</Switch>

</MDBContainer>

</main>

</div>

</Router>

</div>

);
  }
}

export default App;
</code></pre>

Please insert min. 20 characters.

// 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;

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

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.

Add comment

Nates premium answered 5 years ago

0 0 Best answer

it still flashes between pages

Add comment

Nates premium answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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?

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

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.

Add comment

Nates premium answered 5 years ago

0 0 Best answer

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

Add comment

Nates premium answered 5 years ago

0 0 Best answer

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

Add comment

Nates premium answered 5 years ago

0 0 Best answer

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'

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

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.

Add comment

Nates premium answered 5 years ago

0 0 Best answer

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

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB React
MDB Version: 4.11.1
Device: All
Browser: All
OS: Windows
Provided sample code: No
Provided link: No

Nates

Premium support 356Support score
17Questions 28Answers 0Snippets