Links inside Sidebar after click have no active color

[einazare]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The links should have the active colors set from the Right Menu (FixedPlugin) after pressing one of them.

Current Behavior

When clicking the links in the Left Menu (Sidebar) component, the active color disappears.

Failure Information (for bugs)

This happens due to the focus css prop.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Go on the live preview: https://demos.creative-tim.com/material-dashboard-react/#/admin/dashboard
2. Click on any of the links inside the Left Menu (Sidebar component)
3. Without any further clicking, or defocusing from the clicked link, move the cursor away
4. Notice how the link remains with no background color

Context

Unrelevant

Failure Logs

This happens due to the focus css prop.

Solution

1. Go inside src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx
2. Change lines 191, 206, 228, 250 and 272 from "&:hover": { to "&:hover,&:focus": {

Best,
Manu

[gkarapeev]

@einazare thanks for the solution - it was bothering me so much but I didn't have the skill to pinpoint it! You're a star!

[Samriddhi25]

@einazare when I switch from one page to another, I had to re-load the page to see the content on the webpage otherwise is it not showing up can you please tell me why am I facing this issue.

[einazare]

Hello there @Samriddhi25 ,

Can you please share with me your code inside index.js?

Best,
Manu

[Samriddhi25]

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
  rel="apple-touch-icon"
  sizes="76x76"
  href="%PUBLIC_URL%/apple-icon.png"
/>
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
/>

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" ></script>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>Material Dashboard React by Creative Tim</title>

@einazare I have not altered the code at all

[einazare]

Hello again, @Samriddhi25 ,

That is the index.html not the index.js file.

Best,
Manu

[Samriddhi25]

@einazare I misinterpreted it, here is the index,js

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

const hist = createBrowserHistory();

ReactDOM.render(
Router history={hist}
Switch
Route path="/admin" component={Admin}
Route path="/rtl" component={RTL}
Redirect from="/" to="/admin/dashboard"
Switch
Router>
document.getElementById("root")
);

I have deliberately removed the angular brackets as the content inside it was not appearing.

[einazare]

Hello again, @Samriddhi25 ,

Please send the code in code format to show you the changes you need to make.

[Samriddhi25]

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

const hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Route path="/rtl" component={RTL} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </Router>,
  document.getElementById("root")
);

@einazare

[einazare]

Please try this code:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Route path="/rtl" component={RTL} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

I've seen recently that sometimes, the combination of history & react-router-dom fails.

[Samriddhi25]

Thanks a lot @einazare it worked!

[Fuadissa]

Thanks it fix my issues.
Am really grateful 🥰🥲🥲