• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • About
  • Life
  • Tech
  • Travel
  • Work
  • Questions
  • Contact

Welcome

.

Materialize Sidenav is not working with React

April 11, 2020 by

Questions › Materialize Sidenav is not working with React
0
Vote Up
Vote Down
Garmaine asked 3 years ago

I have an app where logged in Users have a sidenav which is works from Materialize css library.

Here is the react component

import React, {Fragment, useEffect} from 'react'
import {Link} from 'react-router-dom'

// Materialize JS Import
import M from 'materialize-css/dist/js/materialize.min.js'
import "materialize-css/dist/css/materialize.min.css"

// Actions
import {logout, loadUser} from '../../actions/authActions'

const navbarStyles = {
  marginLeft: '20px'
}

const Navbar = ({loadUser, logout, auth: {isAuthenticated, loading}}) => {

  useEffect(() => {
    loadUser()

    if(isAuthenticated !== null) {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems);
    }

  }, [isAuthenticated])

  const onLogout = () => {
    logout()
  }

  return (
      <Fragment>
        {isAuthenticated && !loading ? (
          <Fragment>    
            <div className="navbar-fixed">
              <nav id="nav">
                <div className="nav-wrapper teal accent-4">
                  <Link to="/"><a href="#" className="brand-logo" style={navbarStyles}>Home</a></Link>
                  <a href="#" data-target="sidenav-overlay" className="sidenav-trigger"><i className="material-icons">menu</i></a>
                  <ul id="nav-mobile" className="right hide-on-med-and-down">
                    <li><Link to="/upload" className="waves-effect waves-dark" ><i className="small material-icons left">cloud</i>Upload</Link></li>
                    <li><Link to="/guests/list" className="waves-effect waves-dark" ><i className="small material-icons left">list</i>Guest List</Link></li>
                    <li><Link to="/apartments" className="waves-effect waves-dark" ><i className="small material-icons left">hotel</i>Apartments</Link></li>
                    <li><Link to="/keys" className="waves-effect waves-dark" ><i className="small material-icons left">vpn_key</i>Keys</Link></li>
                    <li><Link to="/logs" className="waves-effect waves-dark" ><i className="small material-icons left">history</i>Logs</Link></li>
                    <li><a href="#!" className="waves-effect waves-dark" onClick={onLogout}><i className="small material-icons left">power_settings_new</i>Logout</a></li>
                  </ul>
                </div>
              </nav>
            </div>

            <ul className="sidenav" id="sidenav-overlay">
                <li><Link to="/upload" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">cloud</i>Upload</Link></li>
                <li><Link to="/guests/list" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">list</i>Guest List</Link></li>
                <li><Link to="/apartments" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">hotel</i>Apartments</Link></li>
                <li><Link to="/keys" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">vpn_key</i>Keys</Link></li>
                <li><Link to="/logs" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">history</i>Logs</Link></li>
                <li><a href="#!" className="waves-effect waves-dark sidenav-close" onClick={onLogout}><i className="small material-icons left">power_settings_new</i>Logout</a></li>
            </ul>
          </Fragment>
        ) : (
            <div className="navbar-fixed">
            <nav id="nav">
              <div className="nav-wrapper teal accent-4">
                <Link to="/"><a href="#" className="brand-logo" style={navbarStyles}>Home</a></Link>
              </div>
            </nav>
          </div>
        )}
      </Fragment>
    )
}

export default Navbar

I have checked that Materialize actually init Sidenav into element but trigger doesn't work. Also if I call .open() method of instance I got just dark tint over the application (sidenav effect but nav is not showing up).

Also, I am using Materialize the same way in other components but other features and they work perfect. Only Sidenav part crashes.

Are you looking for the answer?
Original Question and Possible Answers can be found on `http://stackoverflow.com`

Question Tags: css, javascript, materialize, reactjs

Please login or Register to submit your answer




Primary Sidebar

Tags

Advancements architecture beautiful life best building calling city commercial convenience employment Finances Cognitive decline Future gadgets Hidden Gems highway Home houses hydration Impact Innovations lamp lighting Mental health military tech Must-See New York City occupation Productivity recreation romance sepia shopping sippy cups smartphones social Technological breakthroughs technology toddlers Treasures turns Uncover Well-being Wonders Work Young onset dementia

Newsletter

Complete the form below, and we'll send you all the latest news.

Footer

Footer Funnies

Who knew that reading the footer could be such a hilarious adventure? As we navigate websites, books, and documents, we often stumble upon the unassuming space at the bottom, only to discover a treasure trove of amusement. In this side-splitting compilation, we present 100 jokes that celebrate the unsung hero of content – the footer. Get ready to chuckle, giggle, and maybe even snort as we dive into the world of footnotes, disclaimers, and hidden comedic gems. Brace yourself for a wild ride through the footer!

Recent

  • Unveiling the Enigma: Almost-Magical Lamp Lights Highway Turns
  • The Impact of Young Onset Dementia on Employment and Finances: Optimizing Post-Diagnostic Approaches
  • 11 Wonders of 2023 Technological Breakthrough – Unveiling the Future
  • Work from Home and Stay Mentally Sane – Achieve Productivity and Well-being
  • Hidden Gems of New York City – Uncover the Must-See Treasures!

Search

Tags

Advancements architecture beautiful life best building calling city commercial convenience employment Finances Cognitive decline Future gadgets Hidden Gems highway Home houses hydration Impact Innovations lamp lighting Mental health military tech Must-See New York City occupation Productivity recreation romance sepia shopping sippy cups smartphones social Technological breakthroughs technology toddlers Treasures turns Uncover Well-being Wonders Work Young onset dementia

Copyright © 2023