Docs menu link

Author: niklaskors

packages/editor/src/app/main/components/Logo.module.css

@@ -1,5 +1,5 @@
 .logo {
-  padding: 15px 0;
+  padding: 11px 0 15px 0;
   height: 100%;
   max-width: 100%;
 }

packages/editor/src/app/main/components/Navigation.module.css

@@ -0,0 +1,17 @@
+.sub {
+  font-weight: bold;
+  margin: 3px 0 0 10px;
+  font-size: 0.9em;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.separator {
+  height: 70%;
+  width: 1px;
+  background-color: #f3f3f3;
+  margin-left: 1.6em;
+  margin-right: 1em;
+}

packages/editor/src/app/main/components/Navigation.tsx

@@ -9,15 +9,14 @@ import { VscSignIn } from "react-icons/vsc";
 import { getStoreService } from "../../../store/local/stores";
 import { ProfilePopup } from "./ProfilePopup";
 import { Logo } from "./Logo";
+import styles from "./Navigation.module.css";
 
 const ProductHome = () => {
   return (
     <>
       <Logo></Logo>
-      <span style={{ fontWeight: "bold", marginTop: 3, marginLeft: 10 }}>
-        {" "}
-        Alpha community preview
-      </span>
+      <span className={styles.sub}> Alpha community preview</span>
+      <div className={styles.separator}></div>
     </>
   );
 };
@@ -31,7 +30,11 @@ export const Navigation = observer(() => {
   return (
     <AN
       renderProductHome={ProductHome}
-      primaryItems={[]}
+      primaryItems={[
+        <PrimaryButton onClick={navigationStore.navigateToDocs}>
+          Documentation
+        </PrimaryButton>,
+      ]}
       renderProfile={observer(() => (
         <>
           {sessionStore.isLoggedIn && (