diff --git a/src/layout/socialNav.tsx b/src/layout/socialNav.tsx index 022f555..e38bd88 100644 --- a/src/layout/socialNav.tsx +++ b/src/layout/socialNav.tsx @@ -1,24 +1,17 @@ +import { useAppSelector } from 'hooks' import { useState } from 'react' -import { Link, useLocation } from 'react-router-dom' +import { NavLink, NavLinkProps } from 'react-router-dom' import { appRoutes, getProfilePageRoute } from 'routes' import 'styles/socialNav.css' export const SocialNav = () => { - const location = useLocation() - const currentPath = location.pathname const [isCollapsed, setIsCollapsed] = useState(false) + const userState = useAppSelector((state) => state.user) const toggleNav = () => { setIsCollapsed(!isCollapsed) } - const isOnHomePage = - currentPath === appRoutes.index || currentPath === appRoutes.home - const isOnSearchPage = currentPath === appRoutes.search - const isOnProfilePage = new RegExp( - `^${appRoutes.profile.replace(':nprofile', '[^/]+')}$` - ).test(currentPath) - return (
{
- + {!!userState.auth && ( + + )}
)}
@@ -78,19 +68,25 @@ export const SocialNav = () => { ) } -interface NavButtonProps { - to: string - isActive: boolean +interface NavButtonProps extends NavLinkProps { svgPath: string viewBox?: string } -const NavButton = ({ to, isActive, svgPath, viewBox = '0 0 512 512' }: NavButtonProps) => ( - ( + + `btn btnMain socialNavInsideBtn ${ + isActive ? 'socialNavInsideBtnActive' : '' + }` + } > - -); - - + +)