fix active nav link state

This commit is contained in:
Victor Batischev 2024-02-05 17:14:30 +03:00
parent 3cc306bbc3
commit 7a3a70ccd3
7 changed files with 25 additions and 52 deletions

View File

@ -48,7 +48,7 @@
text-decoration: none; text-decoration: none;
} }
a:focus { a:focus, a.active {
color: #000000; color: #000000;
} }

View File

@ -88,9 +88,9 @@ export const Navigation = () => {
}, []); }, []);
return ( return (
<div className="profileHeader__info"> <div className="profile-header__info">
<div className="profileHeader__container"> <div className="profile-header__container">
<nav className="profileHeader__nav"> <nav className="profile-header__nav">
{navInfo[user].map((link, index) => { {navInfo[user].map((link, index) => {
return ( return (
<NavLink <NavLink
@ -104,8 +104,8 @@ export const Navigation = () => {
})} })}
</nav> </nav>
<div className="profileHeader__personalInfo"> <div className="profile-header__personalInfo">
<h3 className="profileHeader__personalInfoName"> <h3 className="profile-header__personalInfoName">
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username} {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</h3> </h3>
<NavLink end to={"/profile"}> <NavLink end to={"/profile"}>
@ -113,7 +113,7 @@ export const Navigation = () => {
src={ src={
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
} }
className="profileHeader__personalInfoAvatar" className="profile-header__personalInfoAvatar"
alt="avatar" alt="avatar"
/> />
</NavLink> </NavLink>

View File

@ -282,15 +282,15 @@ export const ProfileCalendarComponent = React.memo(
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
: `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
: activePeriod : activePeriod
? "Выберите диапазон на календаре" ? "Выберите диапазон на календаре"
: "Выбрать диапазон"} : "Выбрать диапазон"}
</span> </span>
<span> <span>
{totalRangeHours {totalRangeHours
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
: endDate : endDate
? "0 часов" ? "0 часов"
: ""} : ""}
</span> </span>
{endDate && ( {endDate && (
<BaseButton <BaseButton

View File

@ -20,19 +20,6 @@ export const ProfileHeader = () => {
const [isLoggingOut, setIsLoggingOut] = useState(false); const [isLoggingOut, setIsLoggingOut] = useState(false);
// useEffect(() => {
// if (Object.keys(profileInfo).length) {
// return;
// }
// apiRequest(`/user/me`).then((profileInfo) => {
// dispatch(
// setProfileInfo(
// profileInfo.userCard ? profileInfo.userCard : profileInfo
// )
// );
// });
// }, [dispatch]);
useEffect(() => { useEffect(() => {
if (!Object.keys(profileInfo).length) if (!Object.keys(profileInfo).length)
apiRequest(`/user/me`).then((profileInfo) => { apiRequest(`/user/me`).then((profileInfo) => {
@ -54,16 +41,16 @@ export const ProfileHeader = () => {
}; };
return ( return (
<header className="profileHeader"> <header className="profile-header">
<div className="profileHeader__head"> <div className="profile-header__head">
<div className="profileHeader__container"> <div className="profile-header__container">
<NavLink to={"/profile"} className="profileHeader__title"> <NavLink to={"/profile"} className="profile-header__title">
itguild. itguild.
<span> <span>
{user === "developer" ? "для разработчиков" : "для партнеров"} {user === "developer" ? "для разработчиков" : "для партнеров"}
</span> </span>
</NavLink> </NavLink>
<button onClick={handler} className="profileHeader__logout"> <button onClick={handler} className="profile-header__logout">
{isLoggingOut ? <Loader /> : "Выйти"} {isLoggingOut ? <Loader /> : "Выйти"}
</button> </button>
</div> </div>

View File

@ -1,4 +1,4 @@
.profileHeader { .profile-header {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -53,24 +53,24 @@
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 30px; column-gap: 30px;
.active {
color: #000000 !important;
}
a { a {
text-decoration: none !important; text-decoration: none;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
color: #807777 !important; color: #807777;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
color: #261a1a !important; color: #261a1a;
} }
} }
a.active {
color: #000000;
}
@media (max-width: 800px) { @media (max-width: 800px) {
column-gap: 15px; column-gap: 15px;

View File

@ -1,14 +0,0 @@
import React from "react";
import { ActContent } from "@components/features/bookkeeping/ActContent/ActContent";
import { BookkeepingTemplete } from "@components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete";
export const ActPage = () => {
return (
<div>
<BookkeepingTemplete showBreadcrumps nameBreeadcrumps="Создание акта">
<ActContent></ActContent>
</BookkeepingTemplete>
</div>
);
};

View File

@ -15,7 +15,7 @@
&__about { &__about {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin: 30px 0;
@media (max-width: 600px) { @media (max-width: 600px) {
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 25px; row-gap: 25px;