made some changes in sidebar

[amanpoddar-dev12]

Description

Related Issues

Changes Proposed

Checklist

• I have read and followed the Contribution Guidelines.
• All new and existing tests passed.
• I have updated the documentation to reflect the changes I've made.
• My code follows the code style of this project.
• The title of my pull request is a short description of the requested changes.

Screenshots

Note to reviewers

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
devdisplay	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2024 6:36am

[netlify]

❌ Deploy Preview for devdisplay failed.

Name	Link
🔨 Latest commit	2bac152
🔍 Latest deploy log	https://app.netlify.com/sites/devdisplay/deploys/66fe3b61fa05940008b3b2a7

[amanpoddar-dev12]

Problem with this button is that it renders before state update that's why I use useEffect for checking state whenever it change

const [theme, setTheme] = useState(() => {
return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
});

In this code, I give the default value of the theme by checking from HTML document classist

here I useEffect for rerendring whenever userchange theme and I update theme from toggle theme
in useEffect, basically change the theme of page using dom manupulation.
useEffect(() => {
const htmlElement = document.documentElement;
if (theme === 'dark') {
htmlElement.classList.add('dark');
htmlElement.classList.remove('light');
} else {
htmlElement.classList.add('light');
htmlElement.classList.remove('dark');
}
}, [theme]);
here this it basic toggle theme button that will toggle the value of theme
function toggleTheme() {
setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
}
I hope u understand.

below there is scrrenshot of logs.

here u can see logs are totally perfect