fix active nav link state
This commit is contained in:
parent
3cc306bbc3
commit
7a3a70ccd3
@ -48,7 +48,7 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus {
|
a:focus, a.active {
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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>
|
|
||||||
);
|
|
||||||
};
|
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user