Merge pull request #280 from YousefED/docs-link-and-styling

Docs menu link & styling

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,49 @@
+.sub {
+  font-weight: 600;
+  margin: 3px 0 0 7px;
+  font-size: 0.9em;
+  color: #8a9db3;
+  -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: 2.1em;
+  margin-right: 0.8em;
+}
+
+.link {
+  align-items: center;
+  display: inline-flex;
+  text-decoration: none !important;
+  color: #2b4869;
+  position: relative;
+  padding: 0 1em;
+  font-weight: 500;
+  font-size: 0.95em;
+}
+
+.link:after {
+  transition: 150ms ease-in-out all;
+  content: "";
+  display: block;
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  bottom: 0;
+  background-color: transparent;
+  left: 0;
+}
+
+.link:hover {
+  color: #2b4869;
+}
+
+.link:hover.link:after {
+  background-color: #2b4869;
+}

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 preview</span>
+      <div className={styles.separator}></div>
     </>
   );
 };
@@ -31,7 +30,20 @@ export const Navigation = observer(() => {
   return (
     <AN
       renderProductHome={ProductHome}
-      primaryItems={[]}
+      primaryItems={[
+        <a
+          href="/docs"
+          className={styles.link}
+          onClick={(e) => {
+            e.preventDefault();
+            navigationStore.navigateToDocs();
+          }}>
+          Documentation
+        </a>,
+        // <PrimaryButton onClick={navigationStore.navigateToDocs}>
+        //   Documentation
+        // </PrimaryButton>,
+      ]}
       renderProfile={observer(() => (
         <>
           {sessionStore.isLoggedIn && (

packages/editor/src/app/main/components/startscreen/StartScreen.tsx

@@ -24,11 +24,16 @@ export const StartScreen = observer(() => {
     }
   }
 
-  function onDocsClick(e: any) {
+  function onTutorialClick(e: any) {
     e.preventDefault();
     navigationStore.navigateToTutorial();
   }
 
+  function onDocsClick(e: any) {
+    e.preventDefault();
+    navigationStore.navigateToDocs();
+  }
+
   return (
     <>
       <div className="page centered">
@@ -60,7 +65,7 @@ export const StartScreen = observer(() => {
               <a
                 className="button primary"
                 href="/docs/interactive-introduction.md"
-                onClick={onDocsClick}>
+                onClick={onTutorialClick}>
                 Try interactive tutorial
               </a>
 
@@ -216,7 +221,7 @@ export const StartScreen = observer(() => {
               <div>
                 <a
                   href="/docs/interactive-introduction.md"
-                  onClick={onDocsClick}
+                  onClick={onTutorialClick}
                   className="button">
                   Try interactive tutorial
                 </a>
@@ -240,10 +245,16 @@ export const StartScreen = observer(() => {
                 <li>
                   <a
                     href="/docs/interactive-introduction.md"
-                    onClick={onDocsClick}>
+                    onClick={onTutorialClick}>
                     <span>Interactive introduction</span>
                   </a>
                 </li>
+                <li>
+                  <a href="/docs" onClick={onDocsClick}>
+                    <span>Documentation</span>
+                  </a>
+                </li>
+
                 {/* <li>
                   <a
                     target="_blank"

packages/editor/src/index.css

@@ -21,6 +21,10 @@ a:focus {
   outline: none;
 }
 
+a {
+  color: #2c73c5;
+}
+
 /* @import "~react-resizable/css/styles.css"; */
 body {
   margin: 0;