chore: add helper for docs links (#6998)

Author: alexnm

packages/app/src/app/pages/common/UserMenu/index.tsx

@@ -3,6 +3,7 @@ import {
   dashboardUrl,
   profileUrl,
   searchUrl,
+  docsUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
 import { Menu, Stack, Element, Icon, Text } from '@codesandbox/components';
 import { useAppState, useActions } from 'app/overmind';
@@ -67,7 +68,7 @@ export const UserMenu: FunctionComponent & {
             </Stack>
           </Menu.Link>
 
-          <Menu.Link href="/docs">
+          <Menu.Link href={docsUrl()}>
             <Stack align="center" gap={2}>
               <Icon name="documentation" size={16} />
               <Text>Documentation</Text>
@@ -91,7 +92,7 @@ export const UserMenu: FunctionComponent & {
           )}
 
           {showBecomePro && (
-            <Menu.Link href="/pro">
+            <Menu.Link to="/pro">
               <Stack align="center" gap={2}>
                 <Icon name="proBadge" size={16} />
                 <Text>Upgrade to Pro</Text>
@@ -102,7 +103,7 @@ export const UserMenu: FunctionComponent & {
           <Menu.Divider />
 
           {showManageSubscription && (
-            <Menu.Link href={`/dashboard/settings?workspace=${activeTeam}`}>
+            <Menu.Link to={`/dashboard/settings?workspace=${activeTeam}`}>
               <Stack align="center" gap={2}>
                 <Icon name="proBadge" size={16} />
                 <Text>Subscription</Text>

packages/common/src/utils/url-generator.ts

@@ -295,6 +295,9 @@ export function getSandboxId() {
   return result;
 }
 
+export const docsUrl = (path: string = '') =>
+  `https://codesandbox.io/docs${path}`;
+
 export const teamInviteLink = (inviteToken: string) =>
   `${protocolAndHost()}/invite/${inviteToken}`;
 

packages/components/src/components/Menu/index.tsx

@@ -302,7 +302,13 @@ const MenuLink: React.FunctionComponent<MenuLinkProps> = ({
     );
   }
   return (
-    <ReachMenu.MenuLink data-component="MenuLink" href={href} title={title}>
+    <ReachMenu.MenuLink
+      data-component="MenuLink"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={title}
+    >
       {children}
     </ReachMenu.MenuLink>
   );