Pieti kinnunen/nav update (#403)

* Add Community nav item * Remove downloads link * Move Sign In, remove unused css * Add ref to Sign In link * Remove pb from DropdownMenu * Structure changes - Removed sign in dropdown - Added GitHub to community menu - Changed the order of CTA buttons - Updated test data
gravitational · Oct 5, 2023 · d4dac70 · d4dac70 · vercel · Oct 5, 2023
1 parent 8dc0885
commit d4dac70
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 152 deletions.
diff --git a/components/DropdownMenu/DropdownMenu.module.css b/components/DropdownMenu/DropdownMenu.module.css
@@ -44,7 +44,6 @@
 .body {
   box-sizing: border-box;
   display: block;
-  padding: 0 0 var(--m-2);
 }
 
 .withSubMenus {

diff --git a/components/Header/HeaderCTA.module.css b/components/Header/HeaderCTA.module.css
@@ -33,60 +33,3 @@
     margin-right: var(--m-2);
   }
 }
-
-.downloadsLink {
-  text-decoration: none;
-  font-weight: 700;
-  font-size: var(--fs-text-md);
-  color: var(--color-code);
-  padding-left: 10px;
-  padding-right: 10px;
-  @media (--lg-scr) {
-    padding-left: var(--m-3);
-    padding-right: var(--m-3);
-  }
-  @media (--sm-scr) {
-    display: none;
-  }
-  &:focus,
-  &:hover {
-    color: var(--color-dark-purple);
-  }
-}
-
-.searchWrapper {
-  padding: var(--m-1) var(--m-1) 0 var(--m-2);
-  @media (--sm-scr) {
-    display: none;
-  }
-}
-
-.group {
-  position: relative;
-  padding-left: var(--m-2);
-  @media (--sm-scr) {
-    padding-left: 0;
-    width: 100%;
-  }
-}
-
-.dropdown {
-  display: none;
-  z-index: 3000;
-
-  @media (--sm-scr) {
-    position: relative;
-    width: 100%;
-  }
-
-  @media (--md-scr) {
-    position: absolute;
-    top: var(--m-6);
-    right: var(--m-2);
-    min-width: 400px;
-  }
-
-  &.visible {
-    display: block;
-  }
-}
diff --git a/components/Header/HeaderCTA.tsx b/components/Header/HeaderCTA.tsx
@@ -1,83 +1,27 @@
-import cn from "classnames";
-import { useState, useCallback, useRef, MouseEvent } from "react";
-import { useClickAway } from "react-use";
 import Button from "components/Button";
-import Link from "components/Link";
-import {
-  DropdownMenuOverlay,
-  DropdownMenuCTA,
-  DropdownMenuItemCTA,
-} from "../DropdownMenu";
 import styles from "./HeaderCTA.module.css";
 
 const HeaderCTA = () => {
-  const ref = useRef(null);
-
-  const [isSignInVisible, setIsSignInVisible] = useState<boolean>(false);
-  const toggleSignIn = useCallback((e: MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-
-    setIsSignInVisible((value) => !value);
-  }, []);
-
-  useClickAway(ref, () => {
-    if (isSignInVisible) {
-      setIsSignInVisible(false);
-    }
-  });
-
   return (
-    <>
-      {isSignInVisible && <DropdownMenuOverlay />}
-      <div className={styles.wrapper}>
-        <Link
-          className={styles.downloadsLink}
-          href="https://goteleport.com/download/"
-          data-testid="downloads"
-        >
-          Downloads
-        </Link>
-        <div className={styles.group} ref={ref}>
-          <Button
-            as="link"
-            href="https://teleport.sh/"
-            onClick={toggleSignIn}
-            variant="secondary"
-            className={styles.cta}
-            data-testid="sign-in"
-          >
-            Sign In
-          </Button>
-          <div
-            className={cn(styles.dropdown, isSignInVisible && styles.visible)}
-            data-testid="sign-in-menu"
-          >
-            <DropdownMenuCTA title="Sign in to Teleport">
-              <DropdownMenuItemCTA
-                href="https://teleport.sh/"
-                icon="clouds"
-                title="Teleport Cloud Login"
-                description="Login to your Teleport Account"
-              />
-              <DropdownMenuItemCTA
-                href="https://dashboard.gravitational.com/web/login/"
-                icon="download"
-                title="Dashboard Login"
-                description="Legacy Login &amp; Teleport Enterprise Downloads"
-              />
-            </DropdownMenuCTA>
-          </div>
-        </div>
-        <Button
-          as="link"
-          href="/signup/"
-          className={styles.cta}
-          data-testid="get-started"
-        >
-          Get Started
-        </Button>
-      </div>
-    </>
+    <div className={styles.wrapper}>
+      <Button
+        as="link"
+        href="/signup/"
+        className={styles.cta}
+        data-testid="get-started"
+      >
+        Get Started
+      </Button>
+      <Button
+        as="link"
+        href="/signup/enterprise/"
+        variant="secondary"
+        className={styles.cta}
+        data-testid="contact-sales"
+      >
+        Contact Sales
+      </Button>
+    </div>
   );
 };
 

diff --git a/components/Menu/Category.module.css b/components/Menu/Category.module.css
@@ -19,7 +19,7 @@
   align-items: center;
   justify-content: center;
   z-index: 3001;
-  width: 100%;
+  white-space: nowrap;
   min-width: 0;
   height: 80px;
   padding: 0 var(--m-2);

diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx
@@ -5,6 +5,7 @@ import styles from "./Menu.module.css";
 
 const Menu = () => {
   const [openedCategoryId, setOpenedCategoryId] = useState<number | null>(null);
+
   return (
     <nav className={styles.navItems}>
       {structure.map((props, id) => (

diff --git a/components/Menu/structure.ts b/components/Menu/structure.ts
@@ -268,6 +268,42 @@ const menu: MenuCategoryProps[] = [
     href: "/pricing/",
     testId: "pricing",
   },
+  {
+    title: "Community",
+    href: "/community/",
+    testId: "community",
+    children: [
+      {
+        title: "Getting Started with OSS",
+        href: "/docs/",
+      },
+      {
+        title: "Downloads",
+        href: "/download/",
+      },
+      {
+        title: "Community Slack",
+        href: "/community-slack/",
+      },
+      {
+        title: "GitHub",
+        href: "https://github.com/gravitational/teleport/",
+      },
+      {
+        title: "GitHub Discussions",
+        href: "https://github.com/gravitational/teleport/discussions",
+      },
+      {
+        title: "Podcasts",
+        href: "/resources/podcast/",
+      },
+    ],
+  },
+  {
+    title: "Sign In",
+    href: "https://teleport.sh/",
+    testId: "sign-in",
+  },
 ];
 
 export default menu;
diff --git a/tests/data/navbar-data.ts b/tests/data/navbar-data.ts
@@ -300,37 +300,50 @@ export const navigationData: NavbarData = [
     isExternal: true,
   },
   {
-    button: { title: "", testId: "search" },
-    href: "https://goteleport.com/search/",
-    isExternal: true,
-  },
-  {
-    button: { title: "Downloads", testId: "downloads" },
-    href: "https://goteleport.com/download/",
-    isExternal: true,
-  },
-  {
-    button: { title: "Sign In", testId: "sign-in" },
+    button: { title: "Community", testId: "community" },
     menu: {
-      title: "Sign in to Teleport",
-      testId: "sign-in-menu",
+      title: "Community",
+      testId: "community-menu",
       children: [
         {
-          title: "Teleport Cloud Login",
-          href: "https://teleport.sh/",
-          isExternal: true,
+          title: "Getting Started with OSS",
+          href: "/docs/",
+        },
+        {
+          title: "Downloads",
+          href: "/download/",
+        },
+        {
+          title: "Community Slack",
+          href: "/community-slack/",
         },
         {
-          title: "Dashboard Login",
-          href: "https://dashboard.gravitational.com/web/login/",
+          title: "GitHub",
+          href: "https://github.com/gravitational/teleport/",
           isExternal: true,
         },
+        {
+          title: "GitHub Discussions",
+          href: "https://github.com/gravitational/teleport/discussions",
+        },
+        {
+          title: "Podcasts",
+          href: "/resources/podcast/",
+        },
       ],
     },
   },
+  {
+    button: { title: "Sign In", testId: "sign-in" },
+    href: "https://teleport.sh/",
+  },
   {
     button: { title: "Get Started", testId: "get-started" },
     href: "/signup/",
     isExternal: true,
   },
+  {
+    button: { title: "Contact Sales", testId: "contact-sales" },
+    href: "/signup/enterprise/",
+  },
 ];