Enhance Navbar

[naisargi17]

Pull Request

Title

background of navbar

Description

changed the navbar .

Checklist

• [X ] I have tested the changes locally
• [ X] Documentation has been updated (if necessary)
• [X] Changes are backward-compatible

Screenshots (if applicable)

(https://github.com/VaibhavArora314/StyleShare/assets/111778403/a90533a2-cfad-4dc4-8d14-136cb595f3d3)

Footer

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
style-share	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 14, 2024 3:16pm

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[github-actions[bot]]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your valuable contribution to our project. Your efforts are greatly appreciated. Feel free to reach out if you have any more contributions or if there's anything else we can assist you with. Keep up the fantastic work! 🚀

[manikumarreddyu]

hey @VaibhavArora314 @naisargi17 after this PR is merged code editor is no more coming ..kindly please check it once

[naisargi17]

hi, @manikumarreddyu I just change the background of navbar . I swear i also don't know what has happen.

[manikumarreddyu]

dont worry @naisargi17 we are working on it.it will be resolved soon..moreover your design is excellent.

you just unknowingly remove two lines of code which belongs to code editor. here it is..lines 121 to 123

[naisargi17]

I apologize for my inconvenience . Thank you for your Understanding & appreciation.

[manikumarreddyu]

@naisargi17 can you please review my pull request i am not getting well PR #219

[manikumarreddyu]

okay...if there any errors i will update you

[naisargi17]

this was correct @manikumarreddyu

[manikumarreddyu]

yeah..finally we did it.. @naisargi17

[manikumarreddyu]

i cant able to see names in navbar like Home , New ,Favourites...where are they in the code

[naisargi17]

Big Thanks to you . see scroll up u will see it

[manikumarreddyu]

import { useState } from "react"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { loggedInState, tokenState } from "../store/atoms/auth"; import { Link, useLocation } from "react-router-dom"; import toast from "react-hot-toast";

const Navbar = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const setTokenState = useSetRecoilState(tokenState); const isLoggedIn = useRecoilValue(loggedInState); const location = useLocation();

const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); };

const closeMenu = () => { setIsMenuOpen(false); };

const handleLogout = () => { localStorage.removeItem("token"); setTokenState(""); closeMenu(); toast.success('Logged out successfully') };

const getNavLinkClass = (path: string) => { return location.pathname === path ? "block py-2 px-3 bg-blue-700 rounded md:bg-transparent md:p-0 text-white md:text-blue-500" : "block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent"; };

return (

Style Share Open main menu

• Home
• Posts
• Leaderboard
{!isLoggedIn ? (
Sign in
Sign up
) : ( <>
• New Post
• Profile
• Favorite
• Logout
)}

); };

export default Navbar;

[manikumarreddyu]

in the before code everything is so simple...no hidings

but the code which you have written i have not able to find pages names in the code..still i am not getting but somehow i managed to rectify the error

[manikumarreddyu]

Big Thanks to you . see scroll up u will see it

i am not getting you @naisargi17

[manikumarreddyu]

can you please give your linkindin profile @naisargi17 i need some clarity regarding the code

[naisargi17]

import { useState } from "react"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { loggedInState, tokenState } from "../store/atoms/auth"; import { Link, useLocation } from "react-router-dom"; import toast from "react-hot-toast"; import logo from "../assets/favicon.png"; import { useTranslation } from "react-i18next";

const Navbar = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const setTokenState = useSetRecoilState(tokenState); const isLoggedIn = useRecoilValue(loggedInState); const location = useLocation(); const { t } = useTranslation();

const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); };

const closeMenu = () => { setIsMenuOpen(false); };

const handleLogout = () => { localStorage.removeItem("token"); setTokenState(""); closeMenu(); toast.success("Logged out successfully"); };

const getNavLinkClass = (path: string) => { return location.pathname === path ? "block py-2 px-3 bg-blue-600 rounded md:bg-transparent md:p-0 text-white md:text-blue-300" : "block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-300 hover:bg-blue-400 hover:text-white md:hover:bg-transparent"; };

return (

{t("navbar.logo")} Open Menu

• {t("navbar.links.home")}
• {t("navbar.links.posts")}
• {t("navbar.links.leaderboard")}
{!isLoggedIn ? (
{t("navbar.links.signin")}
{t("navbar.links.signup")}
) : ( <>
• {t("navbar.links.newpost")}
• {t("code")}
• {t("navbar.links.profile")}
• {t("navbar.links.favorite")}
• {t("navbar.links.logout")}
)}

); };

export default Navbar;

[naisargi17]

https://www.linkedin.com/in/naisargi-patel-b28509237/ I just change the colour and add buttons for sigin and sigup .. Which modification you didn't get it from my code , can you point it out specifically?

[manikumarreddyu]

before changing

     <li className="mt-2 md:mb-0">
          <Link to="/app" className={getNavLinkClass("/app")} aria-current="page" onClick={closeMenu}>
            Home
          </Link>
        </li>

after changing

        <li className="mt-2 md:mb-0">
          <Link
            to="/app"
            className={getNavLinkClass("/app")}
            aria-current="page"
            onClick={closeMenu}
          >
            {t("navbar.links.home")}
          </Link>
        </li>

[naisargi17]

this change is not done by me .

[manikumarreddyu]

okay