.side-nav .collapsible>li a.collapsible-header.active {

    background-color: rgba(255, 0, 0, 0.445) !important;

}

.side-nav .collapsible>li a.collapsible-header:hover {

    background-color: rgba(200, 20, 216, 0.788) !important;

}

.side-nav .collapsible li a:hover {

    background-color: rgba(70, 182, 35, 0.719) !important;

}

import React, { Component } from "react";

​

import { Route, Redirect } from 'react-router-dom';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { Image } from 'react-bootstrap';

import { 

    MDBNavbar, 

    MDBNavbarNav, 

    MDBNavItem,

    MDBDropdown, 

    MDBDropdownToggle, 

    MDBDropdownMenu, 

    MDBDropdownItem, 

    MDBIcon, 

    MDBSideNavItem, 

    MDBSideNavCat, 

    MDBSideNavNav, 

    MDBSideNav,

    MDBSideNavLink

} from "mdbreact";

​

import ServerPicker from '../ServerPicker/ServerPicker';

​

class TestSideNav extends Component {

​

    _isMounted = false;

​

    constructor(props) {

        super(props);

        this.state = {

            userData: this.props.userData,

            toggleStateA: false,

            breakWidth: 1300,

            windowWidth: 0

        };

    }

​

    componentDidMount() {

        this._isMounted = true;

        this.handleResize();

        window.addEventListener("resize", this.handleResize);

    }

​

    componentWillUnmount() {

        this._isMounted = false;

        window.removeEventListener("resize", this.handleResize);

    }

​

    handleResize = () =>

        this.setState({

        windowWidth: window.innerWidth

    });

​

    handleToggleClickA = () => {

        this.setState({

        toggleStateA: !this.state.toggleStateA

        });

    };

​

    render() {

        const navStyle = { paddingLeft: this.state.windowWidth > this.state.breakWidth ? "210px" : "16px" };

​

        return (

            <div className="fixed-sn black-skin">

                <MDBSideNav

                logo="https://i.imgur.com/ZbXbXaC.png"

                triggerOpening={this.state.toggleStateA}

                breakWidth={this.state.breakWidth}

                bg="https://i.imgur.com/OrxckTo.png"

                mask="light"

                fixed

                onClick={() => this.setState({ homeRedirect: true })}

                >

                <MDBSideNavNav>

                    <MDBSideNavLink to="/dashboard" topLevel className="SideNav-El">

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="tachometer-alt" />

                        Dashboard

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/customcommands" topLevel className="SideNav-El">

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="magic" />

                        Custom Commands

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/analytics" topLevel className="SideNav-El">

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="chart-line" />

                        Analytics

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/ranks" topLevel className="SideNav-El">

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="award" />

                        Ranks

                    </MDBSideNavLink>

                    <MDBSideNavCat

                    name="Music"

                    id="music-cat"

                    icon="music"

                    >

                    <MDBSideNavLink to="/autodj">

                        Auto DJ

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/playlists">

                        Playlists

                    </MDBSideNavLink>

                    </MDBSideNavCat>

                    <MDBSideNavLink to="/economy" topLevel>

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="coins" />

                        Economy

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/moderation" topLevel>

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="bolt" />

                        Moderation

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/trackers" topLevel>

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="crosshairs" />

                        Trackers

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/moderation" topLevel>

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="comments" />

                        Support

                    </MDBSideNavLink>

                    <MDBSideNavLink to="/settings" topLevel>

                        <FontAwesomeIcon className="FontAwesomeIcon" icon="cogs" />

                        Settings

                    </MDBSideNavLink>

                </MDBSideNavNav>

                </MDBSideNav>

                <MDBNavbar style={{ paddingLeft: this.state.windowWidth > this.state.breakWidth ? "210px" : "16px" }} double expand="md" fixed="top" scrolling>

                <MDBNavbarNav left>

                    <MDBNavItem>

                        <div

                        onClick={this.handleToggleClickA}

                        key="sideNavToggleA"

                        style={{

                            lineHeight: "32px",

                            marginRight: "1em",

                            verticalAlign: "middle"

                        }}

                        >

                        <MDBIcon icon="bars" color="white" size="2x" />

                        </div>

                    </MDBNavItem>

                    <MDBNavItem>

                        <ServerPicker 

                        nav

                        userData={this.props.userData} 

                        manageServer={this.props.manageServer} 

                        getManageServer={this.props.getManageServer} 

                        togglePostCollapse={this.togglePostCollapse} 

                        />

                    </MDBNavItem>

                </MDBNavbarNav>

                <MDBNavbarNav right>

                    <MDBNavItem>

                    <MDBDropdown>

                        <MDBDropdownToggle nav caret>

                        {this.state.avatar ? <Image src={this.state.avatar} roundedCircle style={{ height: "32px", border: "solid 3px #151515" }} /> : <FontAwesomeIcon icon="user" style={{ marginRight: "5%" }} />}

                        </MDBDropdownToggle>

                        <MDBDropdownMenu right={this.state.width > 800 ? true : false} className="dropdown-default TopNav__DropDownMenu">

                        <MDBDropdownItem>

                            <FontAwesomeIcon className="FontAwesomeIcon TopNav-Dropdown-Item-Span" icon="lightbulb" />

                            <span className="TopNav-Dropdown-Item-Span">Feature Suggestion</span>

                        </MDBDropdownItem>

                        <MDBDropdownItem>

                            <FontAwesomeIcon className="FontAwesomeIcon TopNav-Dropdown-Item-Span" icon="cog" />

                            <span className="TopNav-Dropdown-Item-Span">Settings</span>

                        </MDBDropdownItem>

                        <MDBDropdownItem divider />

                        <MDBDropdownItem onClick={() => this.handleLogout()}>

                            <FontAwesomeIcon className="FontAwesomeIcon TopNav-Dropdown-Item-Span" icon="sign-out-alt" />

                            <span className="TopNav-Dropdown-Item-Span">Logout</span>

                        </MDBDropdownItem>

                        </MDBDropdownMenu>

                    </MDBDropdown>

                    </MDBNavItem>

                </MDBNavbarNav>

                </MDBNavbar>

                <main style={{ margin: "0 6%", paddingTop: "5.5rem", paddingLeft: this.state.windowWidth > this.state.breakWidth ? "240px" : "0" }}>

                </main>

            </div>

        );

    }

}

​

export default TestSideNav;