search

snehilvj / dmc-docs

Documentation for Dash Mantine Components library.
https://github.com/snehilvj/dash-mantine-components
MIT License
53 stars 17 forks source link

Make the current doc more visible in the sidebar. #84

Open NOTMEE12 opened 2 weeks ago

NOTMEE12 commented 2 weeks ago

I look at DMC docs really often and it would be nice to have a little indicator or maybe a background color change on the currently selected doc (I think that a background color change or a border would be quite nice).

This is how the docs currently look: image If I want to search on the sidebar where am I and maybe check out more components in the same category, I'll have to read all of them.

A simple change like this would be enough. image

Those changes I made are just in the devtools:

background-color: var(--mantine-color-dark-5);
border-radius: var(--mantine-radius-sm);

They won't work for light mode. The changes I made are just a proposal.

AnnMarieW commented 1 week ago

Hi @NOTMEE12

This is a good suggestion - thanks.

The styling would work properly in both light and dark modes by setting active=True in the dmc.NavLInk. However, currently there is no easy way to know which link should be set to active since you can navigate there by clicking on the link or by the search input, or by setting the URL.

The ideal solution would be to have the active set based on the URL - similar to how it's done with dash-bootstrap-components, but this would need to be a PR in the dmc library. Can you think of any workarounds?

Here's the dbc.Navlink https://dash-bootstrap-components.opensource.faculty.ai/docs/components/nav/

active (boolean | a value equal to: 'partial', 'exact'; default False): Apply 'active' style to this component. Set to "exact" to automatically toggle active status when the current pathname matches href, or to "partial" to automatically toggle on a partial match. Assumes that href is a relative url such as /link rather than an absolute such as https://example.com/link For example - dbc.NavLink(..., href="/my-page", active="exact") will be active on "/my-page" but not "/my-page/other" or "/random" - dbc.NavLink(..., href="/my-page", active="partial") will be active on "/my-page" and "/my-page/other" but not "/random".

NOTMEE12 commented 1 week ago

Hi!

I've searched a little and plotly dash has a dcc.Location. It's possible to use Partial Matching on this and the dmc.NavLink (or when using pages do something with the buttons? I don't know). I'm not 100% sure this approach would work.