feat(Navbar): update 'Go to Community' label to 'Go to Hub' and add styles for gotoHubButton

i18n/en/code.json

@@ -1,6 +1,6 @@
 {
   "Theme.Navbar.go-to-hub-flow": {
-    "message": "Go to Community"
+    "message": "Go to Hub"
   },
   "Theme.Navbar.use-in-chat": {
     "message": "Use in Chat"

src/theme/Navbar/index.tsx

@@ -12,6 +12,7 @@ import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
 import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar";
 import { translate } from "@docusaurus/Translate";
 import BrowserOnly from "@docusaurus/BrowserOnly";
+import LinkBtn from "@site/src/components/Button/LinkBtn";
 
 const isSignedIn = () => {
   const cookies = document.cookie.split(";").map(cookie => cookie.trim());
@@ -147,30 +148,36 @@ const Navbar: React.FC<NavbarProps> = memo(() => {
           {leftItems.map((item, i) => (
             <NavbarItem {...item} key={i} />
           ))}
-          <BrowserOnly
-            // TODO: This is a temporary fallback element used to prevent layout issues.
-            fallback={
-              <NavbarItem
-                label={translate({ message: "Theme.Navbar.sign-in" })}
-                className={styles.signInButton}
-              />
-            }
-          >
-            {() => {
-              return (
+          <div className={styles.actions}>
+            <NavbarItem
+              label={translate({ message: "Theme.Navbar.go-to-hub-flow" })}
+              className={styles.gotoHubButton}
+            />
+            <BrowserOnly
+              // TODO: This is a temporary fallback element used to prevent layout issues.
+              fallback={
                 <NavbarItem
-                  style={{ cursor: "pointer" }}
+                  label={translate({ message: "Theme.Navbar.sign-in" })}
                   className={styles.signInButton}
-                  label={
-                    isSignedIn()
-                      ? translate({ message: "Theme.Navbar.use-in-chat" })
-                      : translate({ message: "Theme.Navbar.sign-in" })
-                  }
-                  onClick={handleSignin}
                 />
-              );
-            }}
-          </BrowserOnly>
+              }
+            >
+              {() => {
+                return (
+                  <NavbarItem
+                    style={{ cursor: "pointer" }}
+                    className={styles.signInButton}
+                    label={
+                      isSignedIn()
+                        ? translate({ message: "Theme.Navbar.use-in-chat" })
+                        : translate({ message: "Theme.Navbar.sign-in" })
+                    }
+                    onClick={handleSignin}
+                  />
+                );
+              }}
+            </BrowserOnly>
+          </div>
         </div>
         <div className={styles.itemsRight}>
           {rightItems.map((item, i) => (

src/theme/Navbar/styles.module.scss

@@ -15,6 +15,28 @@
   cursor: pointer;
 }
 
+.gotoHubButton {
+  background: inherit;
+  border: 1px solid #3d444d;
+  border-radius: 4px;
+  padding: 4px 4px;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+
+  margin: 0 !important;
+
+  &:hover {
+    color: #7d7fe9 !important;
+    border-color: #7d7fe9;
+  }
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+}
+
 .brand {
   display: flex;
   align-items: center;