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.

Sign up for GitHub

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 active class #139

Merged
merged 2 commits into from
Oct 14, 2022
Merged

added active class #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8d261b
added active class
biswajit035 Oct 13, 2022
0333a4d
Merge branch 'main' into main
biswajit035 Oct 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"react-helmet": "^6.1.0",
"react-icons": "^4.4.0",
"react-js-switch": "^1.1.6",
"react-router-dom": "^6.3.0",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"react-toastify": "^9.0.8",
"react-top-loading-bar": "^2.1.0",
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/components/Sidenav/Sidenav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,10 @@ header .image-text .profession {
color: var(--sidebar-color);
}

.active{
background-color: #e4e9f7;
}

Comment on lines +171 to +174
Copy link
Contributor Author

Choose a reason for hiding this comment

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

for active class background color

body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
color: var(--text-color);
Expand All @@ -189,6 +193,7 @@ body.dark .sidebar li a:hover .text {
background-color: var(--primary-color);
}


.bottom-content li .logout:hover {
color: white;
}
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/components/Sidenav/Sidenav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React, { useContext, useEffect, useState } from 'react'
import './Sidenav.css'
import { Link, useNavigate } from 'react-router-dom';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import logo from '../../assets/logo.png'
import GlobalContext from '../../context/GlobalContext';
import NotesContext from '../../context/NotesContext';

const Sidenav = () => {
const location = window.location.pathname;
const { theme ,setTheme } = useContext(GlobalContext)
const { getNotes } = useContext(NotesContext)
const [search, setSearch] = useState('')
Expand Down Expand Up @@ -68,14 +69,14 @@ const Sidenav = () => {
</li>

<ul className="menu-links">
<li className="nav-link">
<li className={`nav-link ${location === '/notes'?"active":""}`}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For automatically adding the active class according to the url

<Link to={'/notes'}>
<i className="fa-solid fa-house icon"></i>
<span className="text nav-text">Dashboard</span>
</Link>
</li>

<li className="nav-link">
<li className={`nav-link ${location === '/myaccount' ? "active" : ""}`}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For automatically adding the active class according to the url

<Link to={'/myaccount'}>
<i className="fa-solid fa-circle-user icon"></i>
<span className="text nav-text">My Account</span>
Expand All @@ -89,7 +90,7 @@ const Sidenav = () => {
</a>
</li>

<li className="nav-link">
<li className={`nav-link ${location === '/bin' ? "active" : ""}`}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For automatically adding the active class according to the url

<Link to={'/bin'}>
<i className="fa-solid fa-trash icon"></i>
<span className="text nav-text">Bin</span>
Expand Down