Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Indication for Current Menu Items (issue #33) #35

Merged
merged 4 commits into from
Aug 24, 2023

Conversation

kumaryogesh17
Copy link
Contributor

@kumaryogesh17 kumaryogesh17 commented Aug 23, 2023

Fixes #33

Added Highlight or Indications For Current Menu Items,
Used Color : #312e67,

Github.mp4

@undera
Copy link
Collaborator

undera commented Aug 23, 2023

The style that I would like to achieve is this:

.bPqkoB.active {
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.08);
    border-left: 0.25rem solid rgb(19, 71, 255);
}

@@ -83,31 +88,31 @@ export default function App() {
<Divider/>
<List>
<ListItem key="Claims" disablePadding>
<ListItemButton component={RouterLink} to="/claims">
<ListItemButton component={RouterLink} to="/claims" sx={{ backgroundColor: isLinkActive('/claims') ? '#312e67' : 'transparent' }}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The duplication does not look good.
Can you extract function that would return full sx style? Because I'd like to get the style similar to Komodor app.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implemented a function styleHighLight(path: string) and passing this function in sx style in ListItemButton.
eg: <ListItemButton component={RouterLink} to="/claims" sx={styleHighLight("/claims")}>

I think this approach has minimized code redundancy.

Screenshot 2023-08-24 142027

@kumaryogesh17 kumaryogesh17 requested a review from undera August 24, 2023 09:27
@undera
Copy link
Collaborator

undera commented Aug 24, 2023

The code cooks perfect now. Thank you very much for contribution!

@undera undera merged commit 10a4a0d into komodorio:main Aug 24, 2023
@kumaryogesh17
Copy link
Contributor Author

ThankYou!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make left main menu items highlight current item
2 participants