diff --git a/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js b/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js index 6ed7450999..0bdb817451 100644 --- a/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js +++ b/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js @@ -96,8 +96,9 @@ const HeaderNav = ({ iconName={m.iconName} iconUrl={m.iconUrl} badgeNumber={m.notifications} + url={m.link} onClick={(e) => { - window.open(m.link, "_self"); + history.push(m.link); e.preventDefault(); }} onBadgeClick={(e) => console.log(m.iconName + "Badge Clicked", e)} diff --git a/packages/asc-web-common/components/NavMenu/sub-components/header.js b/packages/asc-web-common/components/NavMenu/sub-components/header.js index d1fe81760b..60e48450e1 100644 --- a/packages/asc-web-common/components/NavMenu/sub-components/header.js +++ b/packages/asc-web-common/components/NavMenu/sub-components/header.js @@ -2,7 +2,7 @@ import React from "react"; import { inject, observer } from "mobx-react"; import PropTypes from "prop-types"; import styled from "styled-components"; -import { Link as LogoLink } from "react-router-dom"; +import { useLocation, Link as LinkWithoutRedirect } from "react-router-dom"; import NavItem from "./nav-item"; import Headline from "../../Headline"; import Nav from "./nav"; @@ -67,6 +67,23 @@ const Header = styled.header` } `; +const StyledLink = styled.div` + display: inline; + .nav-menu-header_link { + color: #7a95b0; + font-size: 13px; + } + + a { + text-decoration: none; + } + :hover { + color: #7a95b0; + -webkit-text-decoration: underline; + text-decoration: underline; + } +`; + const versionBadgeProps = { color: "#7A95B0", fontWeight: "600", @@ -91,6 +108,7 @@ const HeaderComponent = ({ ...props }) => { const { t } = useTranslation(); + const { pathname } = useLocation(); const isNavAvailable = mainModules.length > 0; @@ -114,7 +132,7 @@ const HeaderComponent = ({ const onItemClick = (e) => { if (!e) return; const link = e.currentTarget.dataset.link; - window.open(link, "_self"); + history.push(link); e.preventDefault(); }; @@ -147,7 +165,7 @@ const HeaderComponent = ({ ); }; - + const isMainPage = pathname === "/"; return ( <>
- + ( @@ -177,7 +195,7 @@ const HeaderComponent = ({ )} src={props.logoUrl} /> - + {currentProductName} @@ -212,7 +230,7 @@ const HeaderComponent = ({ data-id={id} data-link={link} opened={isNavOpened} - active={id == currentProductId} + active={isMainPage ? false : id == currentProductId} iconName={iconName} iconUrl={iconUrl} badgeNumber={notifications} @@ -239,14 +257,11 @@ const HeaderComponent = ({ {" "} -{" "} - - {t("AboutShort")} - + + + {t("AboutShort")} + + )} diff --git a/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js b/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js index a8ef01ff17..f903c7745e 100644 --- a/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js +++ b/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js @@ -2,7 +2,7 @@ import React, { useCallback } from "react"; import PropTypes from "prop-types"; import Text from "@appserver/components/text"; import StyledModuleTile from "./StyledModuleTile"; - +import { Link } from "react-router-dom"; const ModuleTile = (props) => { // console.log("ModuleTile render", props); const { title, imageUrl, link, description, isPrimary, onClick } = props; @@ -15,7 +15,7 @@ const ModuleTile = (props) => { }, [link, onClick] ); - console.log("imageUrl", imageUrl); + return ( {isPrimary ? ( @@ -29,13 +29,15 @@ const ModuleTile = (props) => {
-
- - {title} - - - {description} - +
+ + + {title} + + + {description} + +
@@ -50,13 +52,11 @@ const ModuleTile = (props) => {
- - {title} - + + + {title} + +
diff --git a/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js b/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js index 98ebbfa10f..6c99b2dde1 100644 --- a/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js +++ b/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js @@ -44,7 +44,11 @@ const StyledModuleTile = styled.div` width: auto; max-width: 50%; } + a { + text-decoration: none; + } } + .title-text { flex: 1 1 auto; padding: 1.25rem; @@ -74,6 +78,9 @@ const StyledModuleTile = styled.div` margin: 16px 0 16px 0; text-align: center; } + a { + text-decoration: none; + } } `;