feat: add console link to navbar (#1568)

* feat: add console link to navbar

* feat: add fixes

* feat: add fixes

---------

Co-authored-by: Artur Fracala <[email protected]>

Author: arturfracala

src/components/core/Navbar/DeveloperConsole.js

@@ -0,0 +1,50 @@
+import React from "react";
+/** @jsx jsx */ import { jsx, css } from "@emotion/core";
+
+const linkCss = css`
+  border-radius: 0.25rem;
+  border-style: solid;
+  border-width: 1px;
+  display: none;
+  font-weight: 500;
+  line-height: normal;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s, border 0.2s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  color: #ffffff;
+  border-color: #c9c9cd;
+  margin-right: 0.5rem;
+  height: 36px;
+
+  &:hover {
+    text-decoration: none;
+    color: #424d57;
+    border-color: #424d57;
+    background-color: #ffffff;
+  }
+
+  @media (min-width: 1024px) {
+    display: inline-block;
+  }
+`;
+
+const DeveloperConsole = () => {
+  return (
+    <a
+      href={process.env.NEXT_PUBLIC_CONSOLE_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      css={linkCss}
+    >
+      Developer Console
+    </a>
+  );
+};
+
+export default DeveloperConsole;

src/components/core/Navbar/Header.js

@@ -2,10 +2,8 @@ import React, { useContext, useState } from "react";
 /** @jsx jsx */ import { jsx, css } from "@emotion/core";
 import styled from "@emotion/styled";
 import Link from "next/link";
-import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import Menu from "react-material-icon-svg/dist/Menu";
-import Magnify from "react-material-icon-svg/dist/Magnify";
 import Close from "react-material-icon-svg/dist/Close";
 
 import { PromotionContext } from "contexts";
@@ -15,6 +13,7 @@ import Search from "components/core/Search";
 import Platform from "./Platform";
 import APIsSDKs from "./APIsSDKs";
 import Resources from "./Resources";
+import DeveloperConsole from "./DeveloperConsole";
 import MobileMenu from "./MobileMenu/MobileMenu";
 
 const Wrapper = styled.div`
@@ -136,19 +135,6 @@ const ActionsWrapper = styled.div`
   align-items: center;
 `;
 
-const MagnifyIcon = styled(Magnify)`
-  display: flex;
-  margin-right: 8px;
-  cursor: pointer;
-  ${({ openSearch }) => openSearch && `background-color: #6E6E7C`};
-  border-radius: 50px;
-  padding: 4px;
-
-  @media (min-width: 1024px) {
-    display: none;
-  }
-`;
-
 const MenuIcon = styled(Menu)`
   display: flex;
   margin-right: 16px;
@@ -204,6 +190,7 @@ const Header = () => {
         </MenuListWrapper>
 
         <ActionsWrapper>
+          <DeveloperConsole />
           {isNotHomeDirectory && (
             <DesktopSearchField className="DocSearch-Button-Desktop">
               <Search />

src/components/core/Navbar/MobileMenu/MobileMenu.js

@@ -22,6 +22,26 @@ const Wrapper = styled.div`
   }
 `;
 
+const DirectLink = styled.a`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #ffffff;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
+  padding: 26px 24px;
+  border-top: 1px solid #6e6e7c;
+  border-bottom: 1px solid #6e6e7c;
+
+  &:hover {
+    background-color: #62626d;
+    color: #ffffff;
+    text-decoration: none;
+  }
+`;
+
 const items = [
   {
     header: "Platform",
@@ -35,7 +55,7 @@ const items = [
     ],
   },
   {
-    header: "Recources",
+    header: "Resources",
     sections: [
       { title: "", items: resources },
       { title: "Connect", items: connects },
@@ -54,6 +74,13 @@ const MobileMenu = () => {
           sections={item.sections}
         />
       ))}
+      <DirectLink
+        href={process.env.NEXT_PUBLIC_CONSOLE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Developer Console
+      </DirectLink>
     </Wrapper>
   );
 };

src/components/core/SideNav/SideNav.js

@@ -10,6 +10,7 @@ import HomeItem from "./HomeItem";
 import MenuItem from "./MenuItem";
 import NestedMenu from "./NestedMenu";
 import { getStableVersion } from "../../../utils";
+import Console from "react-material-icon-svg/dist/Console";
 
 const Wrapper = styled.aside`
   border-right: 1px solid #e2e2e4;
@@ -51,12 +52,11 @@ const MenuWrapper = styled.div`
   overflow: scroll;
   height: calc(100% - 90px);
   @media (min-width: 768px) {
-    height: calc(100% - 60px);
+    height: calc(100% - 80px);
     position: fixed;
 
     display: flex;
     flex-direction: column;
-    height: 100%;
     max-height: 100vh;
     position: -webkit-sticky;
     position: sticky;
@@ -65,6 +65,45 @@ const MenuWrapper = styled.div`
   }
 `;
 
+const DeveloperConsoleLink = styled.a`
+  display: flex;
+  align-items: center;
+  color: #62626d;
+  text-decoration: none;
+  margin-right: 10px;
+  font-weight: 500;
+  font-size: 16px;
+  border-radius: 0px 8px 8px 0px;
+  margin-top: 0;
+
+  &:hover {
+    background-color: #f6f6f7;
+    color: #4284f5;
+    text-decoration: none;
+
+    svg {
+      fill: #4284f5;
+    }
+  }
+
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
+`;
+
+const LinkArea = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 6px 16px 6px 18px;
+  width: 100%;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+`;
+
 const openIconStyle = {
   transform: "rotate(270deg)",
   transition: "transform 300ms",
@@ -121,6 +160,18 @@ const SideNav = ({
               />
             ))
         )}
+        <DeveloperConsoleLink
+          href={process.env.NEXT_PUBLIC_CONSOLE_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <LinkArea>
+            <IconWrapper>
+              <Console fill="#424D57" width="20px" height="20px" />
+            </IconWrapper>
+            Developer Console
+          </LinkArea>
+        </DeveloperConsoleLink>
       </MenuWrapper>
     </Wrapper>
   );