Web/Common: Fix active title of menu, fix transition without redirect.

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)}

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 (
     <>
       <Header
@@ -162,7 +180,7 @@ const HeaderComponent = ({
           noHover={true}
         />
 
-        <LogoLink className="header-logo-wrapper" to={defaultPage}>
+        <LinkWithoutRedirect className="header-logo-wrapper" to={defaultPage}>
           <ReactSVG
             className="header-logo-icon"
             loading={() => (
@@ -177,7 +195,7 @@ const HeaderComponent = ({
             )}
             src={props.logoUrl}
           />
-        </LogoLink>
+        </LinkWithoutRedirect>
         <Headline className="header-module-title" type="header" color="#FFF">
           {currentProductName}
         </Headline>
@@ -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 = ({
               {" "}
               -{" "}
             </Text>
-            <Link
-              as="a"
-              onClick={onLinkClick}
-              target="_blank"
-              {...versionBadgeProps}
-            >
-              {t("AboutShort")}
-            </Link>
+            <StyledLink>
+              <LinkWithoutRedirect to="/about" className="nav-menu-header_link">
+                {t("AboutShort")}
+              </LinkWithoutRedirect>
+            </StyledLink>
           </Box>
         </Nav>
       )}

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 (
     <StyledModuleTile>
       {isPrimary ? (
@@ -29,13 +29,15 @@ const ModuleTile = (props) => {
           </div>
 
           <div className="title-text-wrapper">
-            <div onClick={handleClick} className="title-text">
-              <Text fontSize="36px" className="title-text-header selectable">
-                {title}
-              </Text>
-              <Text fontSize="12px" className="title-text-description">
-                {description}
-              </Text>
+            <div className="title-text">
+              <Link to={`${link}`}>
+                <Text fontSize="36px" className="title-text-header selectable">
+                  {title}
+                </Text>
+                <Text fontSize="12px" className="title-text-description">
+                  {description}
+                </Text>
+              </Link>
             </div>
           </div>
         </div>
@@ -50,13 +52,11 @@ const ModuleTile = (props) => {
           </div>
           <div>
             <div>
-              <Text
-                fontSize="18px"
-                className="sub-title-text"
-                onClick={handleClick}
-              >
-                {title}
-              </Text>
+              <Link to={`${link}`}>
+                <Text fontSize="18px" className="sub-title-text">
+                  {title}
+                </Text>
+              </Link>
             </div>
           </div>
         </div>

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;
+    }
   }
 `;