From 69c45c245d6db84aaa13e6e1a125cec7126657a6 Mon Sep 17 00:00:00 2001
From: Takuya Matsuyama <hi@craftz.dog>
Date: Mon, 27 Feb 2023 09:54:48 +0900
Subject: [PATCH] fix(nav): improve navigation

move a link to docs on the navbar from the more menu

https://github.com/inkdropapp/docs/issues/63
---
 src/components/navigation.js | 31 +++++++++++++++++--------------
 src/variables.less           | 12 ++++++------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/navigation.js b/src/components/navigation.js
index 2b8c2ae..ecdce6f 100644
--- a/src/components/navigation.js
+++ b/src/components/navigation.js
@@ -66,6 +66,11 @@ class Navigation extends React.Component {
                     Plugins
                   </OutboundLink>
                 </li>
+                <li>
+                  <OutboundLink href="https://docs.inkdrop.app/">
+                    Docs
+                  </OutboundLink>
+                </li>
                 <li className="ui simple dropdown item">
                   More
                   <i className="dropdown icon" />
@@ -81,13 +86,6 @@ class Navigation extends React.Component {
                       <DownloadIcon className="svg-icon left icon" />
                       Demo
                     </OutboundLink>
-                    <OutboundLink
-                      className="item"
-                      href="https://docs.inkdrop.app/"
-                    >
-                      <HelpIcon className="svg-icon left icon" />
-                      Documentation
-                    </OutboundLink>
                     <OutboundLink
                       className="item"
                       href="https://forum.inkdrop.app/"
@@ -147,6 +145,13 @@ class Navigation extends React.Component {
           >
             <div className="content">
               <Container text>
+                <OutboundLink
+                  className="item login"
+                  href="https://my.inkdrop.app/"
+                >
+                  <LoginIcon className="svg-icon left" />
+                  Log in
+                </OutboundLink>
                 <Link className="item" to="/pricing">
                   <PricingIcon className="svg-icon left" />
                   <span>Pricing</span>
@@ -173,6 +178,11 @@ class Navigation extends React.Component {
                   <span>Demo</span>
                   <ArrowRightIcon className="svg-icon right aligned" />
                 </OutboundLink>
+                <OutboundLink className="item" href="https://docs.inkdrop.app/">
+                  <HelpIcon className="svg-icon left icon" />
+                  <span>Documentation</span>
+                  <ArrowRightIcon className="svg-icon right aligned" />
+                </OutboundLink>
                 <OutboundLink
                   className="item"
                   href="https://forum.inkdrop.app/"
@@ -202,13 +212,6 @@ class Navigation extends React.Component {
                   <span>Blog</span>
                   <ArrowRightIcon className="svg-icon right aligned" />
                 </OutboundLink>
-                <OutboundLink
-                  className="item login"
-                  href="https://my.inkdrop.app/"
-                >
-                  <LoginIcon className="svg-icon left" />
-                  Log in
-                </OutboundLink>
               </Container>
             </div>
           </div>
diff --git a/src/variables.less b/src/variables.less
index fe4bd63..4693d38 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -1,7 +1,7 @@
-@import "./semantic/site/globals/site.variables";
+@import './semantic/site/globals/site.variables';
 
-@mobileBreakpoint            : 420px;
-@tabletBreakpoint            : 768px;
-@computerBreakpoint          : 992px;
-@largeMonitorBreakpoint      : 1200px;
-@widescreenMonitorBreakpoint : 1920px;
+@mobileBreakpoint: 560px;
+@tabletBreakpoint: 768px;
+@computerBreakpoint: 992px;
+@largeMonitorBreakpoint: 1200px;
+@widescreenMonitorBreakpoint: 1920px;