Collapse external nav links correctly in a menu (#1596)

gradle/changelog/non-collapsing-external-nav-link.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: external nav links now correctly collapse when used in a menu ([#1596](https://github.com/scm-manager/scm-manager/pull/1596))

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -47287,6 +47287,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47314,6 +47315,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/support/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47323,6 +47325,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="https://cloudogu.com/en/scm-manager-enterprise/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47410,6 +47413,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47419,6 +47423,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="#"
               rel="noopener noreferrer"
               target="_blank"
@@ -47428,6 +47433,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="#"
               rel="noopener noreferrer"
               target="_blank"
@@ -47455,6 +47461,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/support/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47464,6 +47471,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="https://cloudogu.com/en/scm-manager-enterprise/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47473,6 +47481,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="#"
               rel="noopener noreferrer"
               target="_blank"
@@ -47551,6 +47560,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47578,6 +47588,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/support/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47587,6 +47598,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="https://cloudogu.com/en/scm-manager-enterprise/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47666,6 +47678,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47675,6 +47688,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="#"
               rel="noopener noreferrer"
               target="_blank"
@@ -47684,6 +47698,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="#"
               rel="noopener noreferrer"
               target="_blank"
@@ -47711,6 +47726,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         >
           <li>
             <a
+              className=""
               href="https://www.scm-manager.org/support/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47720,6 +47736,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="https://cloudogu.com/en/scm-manager-enterprise/"
               rel="noopener noreferrer"
               target="_blank"
@@ -47729,6 +47746,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           </li>
           <li>
             <a
+              className=""
               href="#"
               rel="noopener noreferrer"
               target="_blank"

scm-ui/ui-components/src/navigation/ExternalLink.tsx

@@ -25,10 +25,11 @@ import React, { FC } from "react";
 
 type Props = {
   to: string;
+  className?: string;
 };
 
-const ExternalLink: FC<Props> = ({ to, children }) => (
+const ExternalLink: FC<Props> = ({ to, children, className }) => (
-  <a href={to} target="_blank" rel="noopener noreferrer">
+  <a href={to} target="_blank" rel="noopener noreferrer" className={className}>
     {children}
   </a>
 );

scm-ui/ui-components/src/navigation/ExternalNavLink.tsx

@@ -24,6 +24,7 @@
 import React, { FC } from "react";
 import classNames from "classnames";
 import ExternalLink from "./ExternalLink";
+import useMenuContext from "./MenuContext";
 
 type Props = {
   to: string;
@@ -31,9 +32,10 @@ type Props = {
   label: string;
 };
 
-// TODO is it used in the menu? should it use MenuContext for collapse state?
-
 const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
+  const context = useMenuContext();
+  const collapsed = context.isCollapsed();
+
   let showIcon;
   if (icon) {
     showIcon = (
@@ -44,10 +46,10 @@ const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
   }
 
   return (
-    <li>
+    <li title={collapsed ? label : undefined}>
-      <ExternalLink to={to}>
+      <ExternalLink to={to} className={collapsed ? "has-text-centered" : ""}>
         {showIcon}
-        {label}
+        {collapsed ? null : label}
       </ExternalLink>
     </li>
   );