Web:Client: fix double navigation icon
This commit is contained in:
parent
19937f50dd
commit
02b225b78b
@ -30,7 +30,6 @@ import {
|
|||||||
onItemClick,
|
onItemClick,
|
||||||
} from "@appserver/studio/src/helpers/utils";
|
} from "@appserver/studio/src/helpers/utils";
|
||||||
import StyledExternalLinkIcon from "@appserver/studio/src/components/StyledExternalLinkIcon";
|
import StyledExternalLinkIcon from "@appserver/studio/src/components/StyledExternalLinkIcon";
|
||||||
import NavDesktopItem from "./nav-desktop-item";
|
|
||||||
import { Base } from "@appserver/components/themes";
|
import { Base } from "@appserver/components/themes";
|
||||||
|
|
||||||
const { proxyURL } = AppServerConfig;
|
const { proxyURL } = AppServerConfig;
|
||||||
@ -236,7 +235,7 @@ const HeaderComponent = ({
|
|||||||
)}
|
)}
|
||||||
</LinkWithoutRedirect>
|
</LinkWithoutRedirect>
|
||||||
|
|
||||||
{!isPersonal && (
|
{isNavAvailable && isDesktopView && !isPersonal && (
|
||||||
<StyledNavigationIconsWrapper>
|
<StyledNavigationIconsWrapper>
|
||||||
{mainModules.map((item) => {
|
{mainModules.map((item) => {
|
||||||
return (
|
return (
|
||||||
@ -262,18 +261,6 @@ const HeaderComponent = ({
|
|||||||
})}
|
})}
|
||||||
</StyledNavigationIconsWrapper>
|
</StyledNavigationIconsWrapper>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isNavAvailable && isDesktopView && !isPersonal && (
|
|
||||||
<div className="header-items-wrapper not-selectable">
|
|
||||||
{mainModulesWithoutSettings.map((module) => (
|
|
||||||
<NavDesktopItem
|
|
||||||
isActive={module.id == currentProductId}
|
|
||||||
key={module.id}
|
|
||||||
module={module}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
{isNavAvailable && !isDesktopView && (
|
{isNavAvailable && !isDesktopView && (
|
||||||
|
@ -1,64 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { ReactSVG } from "react-svg";
|
|
||||||
import Badge from "@appserver/components/badge";
|
|
||||||
import Link from "@appserver/components/link";
|
|
||||||
import styled from "styled-components";
|
|
||||||
import { getLink, onItemClick } from "../../../../src/helpers/utils";
|
|
||||||
|
|
||||||
// const separatorColor = "#3E668D";
|
|
||||||
|
|
||||||
// const StyledNavDesktopItemSeparator = styled.div`
|
|
||||||
// height: 20px;
|
|
||||||
// margin: 0px 2px 0 20px;
|
|
||||||
// width: 1px;
|
|
||||||
// background: #3e668d;
|
|
||||||
// border-left: 1px solid ${separatorColor};
|
|
||||||
// `;
|
|
||||||
|
|
||||||
const StyledNavDesktopItem = styled(Link)`
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
margin-left: 16px;
|
|
||||||
|
|
||||||
.popup-icon {
|
|
||||||
svg {
|
|
||||||
margin-top: 4px;
|
|
||||||
path {
|
|
||||||
fill: ${(props) => (props.isActive ? "#fff" : "#7A95B0")};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledBadge = styled(Badge)`
|
|
||||||
position: absolute;
|
|
||||||
height: 16px;
|
|
||||||
margin-top: -8px;
|
|
||||||
margin-left: 8px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const NavDesktopItem = ({ module, isActive }, ...rest) => {
|
|
||||||
const { iconUrl, notifications, link, separator, title } = module;
|
|
||||||
const [showPopup, setShowPopup] = useState(false);
|
|
||||||
const onBadgeClick = () => setShowPopup(!showPopup);
|
|
||||||
const dataLink = getLink(link);
|
|
||||||
|
|
||||||
// <StyledNavDesktopItemSeparator {...rest} />
|
|
||||||
return separator ? (
|
|
||||||
<></>
|
|
||||||
) : (
|
|
||||||
<StyledNavDesktopItem isActive={isActive} href={link} {...rest}>
|
|
||||||
<>
|
|
||||||
<ReactSVG
|
|
||||||
className="popup-icon"
|
|
||||||
onClick={onItemClick}
|
|
||||||
src={iconUrl}
|
|
||||||
data-link={dataLink}
|
|
||||||
/>
|
|
||||||
<StyledBadge label={notifications} onClick={onBadgeClick} />
|
|
||||||
</>
|
|
||||||
</StyledNavDesktopItem>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NavDesktopItem;
|
|
Loading…
Reference in New Issue
Block a user