Create 1 link sideNavCat

Topic: Create 1 link sideNavCat

gllermaly free asked 6 years ago

Hello , I'm using mdb admin pro and I need some sideNav categories to have only 1 item, this means I want the same title with icon but no right arrow and link direct to component when I click.

<SideNavCat name="Dashboards" id="dashboard-cat" icon="tachometer">
<SideNavLink exact={true} to="/app" onClick={onLinkClick}>
 Version 1
</SideNavLink>
</SideNavCat>

Add comment

gllermaly free answered 6 years ago

0 0 Best answer

Problem with my solution is it not emulates the NavCat hover effect, instead underline the text , how can I get the same hover effect? Thanks!

Add comment

gllermaly free answered 6 years ago

0 0 Best answer

Awesome! , works and sidebar still there as I want it. Will be updating on monday.

Edit: When you change from a component to another with the alpha black background beside the bar it doesnt dissapear, you have to click outside

Anna Morawska staff commented 6 years ago

Yes, it's the default behaviour. If you want to hide it on click, use sth like this, with your toggle function, which hides sidenav.

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

Hi there,

this is an interesting question. Please try this:

<li><MDBSideNavLink className="collapsible-header" to="/custom route"><MDBIcon icon="camera-retro" />Submit listing</MDBSideNavLink></li>

We will try to add additional prop to MDBSideNavCat to make it more convenient.

Best,

Ania

Anna Morawska staff commented 6 years ago

In the next release, it will be possible to implement it like that, using topLevel prop. Please update your mdbreact version on Monday :)

<SideNavLink to="/page" topLevel><MDBIcon icon="pencil" />Submit listing</SideNavLink>

Anna Morawska staff commented 6 years ago

In the next release, it will be possible to implement it like that, using topLevel prop. Please update your mdbreact version on Monday :)

<SideNavLink to="/page" topLevel><MDBIcon icon="pencil" />Submit listing</SideNavLink>

Add comment

gllermaly free answered 6 years ago

1 0 Best answer

Solved with this :<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;"><pre class="code-toolbar grey lighten-2 p-3 mb-3"><SideNavLink style={{ color: "black" }}> <Fa icon="camera-retro" /> Test </SideNavLink></pre></div>

Please insert min. 20 characters.

Solved with this :

<SideNavLink style={{ color: "black" }}>

<Fa icon="camera-retro" /> Test

</SideNavLink>

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: Free
Premium support: No
Technology: MDB React
MDB Version: 4.7.1
Device: Macbook pro retina
Browser: Chrome
OS: Sierra
Provided sample code: No
Provided link: No

gllermaly

281Support score
18Questions 18Answers 0Snippets