Add user guide links

packages/client/src/admin/AdminApp.tsx

@@ -32,6 +32,7 @@ import { GraphqlQueryCacheContext } from "../offline/GraphqlQueryCache/useGraphq
 import LanguageSelector from "../surveys/LanguageSelector";
 import TranslateIcon from "@heroicons/react/outline/TranslateIcon";
 import { useLocalStorage } from "beautiful-react-hooks";
+import { BookOpenIcon } from "@heroicons/react/outline";
 
 const LazyBasicSettings = React.lazy(
   /* webpackChunkName: "AdminSettings" */ () => import("./Settings")
@@ -302,6 +303,11 @@ export default function AdminApp() {
           },
         ]
       : []),
+    {
+      breadcrumb: "Administrator Guide",
+      icon: <BookOpenIcon className={iconClassName} />,
+      path: "https://docs.seasketch.org/seasketch-documentation",
+    },
   ];
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [mobileHeaderState, setMobileHeaderState] =
@@ -506,7 +512,17 @@ function SidebarContents(props: {
             <NavLink
               exact={section.path === "/admin"}
               key={section.path}
-              onClick={section.new ? () => setNewDismissed(true) : undefined}
+              onClick={(e) => {
+                if (section.new) {
+                  setNewDismissed(true);
+                } else if (/http.*:\/\//.test(section.path)) {
+                  window.open(section.path, "_blank");
+                  e.preventDefault();
+                  e.stopPropagation();
+                } else {
+                  return;
+                }
+              }}
               to={`/${props.slug}${section.path}`}
               activeClassName="bg-primary-600 text-white"
               className="group flex items-center px-2 py-2 md:text-sm leading-5 font-medium text-indigo-100 rounded-md hover:text-white hover:bg-primary-600 focus:outline-none focus:text-white focus:bg-primary-600 transition ease-in-out duration-75"

packages/client/src/projects/Toolbar.tsx

@@ -14,6 +14,7 @@ import {
   SignInButton,
   SignOutButton,
   EditProfileButton,
+  HelpButton,
 } from "./ToolbarButtons";
 import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
 import { MenuToggle } from "./MenuToggle";
@@ -332,6 +333,17 @@ export default function Toolbar({
             </>
           )}
 
+          <HelpButton
+            tooltip={t("User Guide")}
+            onClick={() =>
+              window.open(
+                "https://docs.seasketch.org/seasketch-documentation/users-guide/getting-started",
+                "_blank"
+              )
+            }
+            expanded={expanded}
+          />
+
           <LanguageSelector
             button={(onClick, lang) => (
               <LanguageButton

packages/client/src/projects/ToolbarButtons.tsx

@@ -6,6 +6,7 @@ import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
 import { ProfileStatusButton } from "../header/ProfileStatusButton";
 import clsx from "clsx";
 import * as Tooltip from "@radix-ui/react-tooltip";
+import { BookOpenIcon } from "@heroicons/react/outline";
 
 interface SidebarButtonProps {
   className?: string;
@@ -231,10 +232,10 @@ export const SignInButton = curry(
 
 export const SignOutButton = curry(
   <svg
-    className="left-0.5 relative"
+    className="relative"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    viewBox="0 0 24 24"
+    viewBox="-1 0 25 25"
     stroke="currentColor"
   >
     <path
@@ -335,6 +336,12 @@ export const SettingsIcon = (
 );
 export const SettingsButton = curry(SettingsIcon);
 
+export const HelpIcon = (
+  <BookOpenIcon className="w-6 h-6 inline-block mt-[1px]" />
+);
+
+export const HelpButton = curry(HelpIcon);
+
 export const LanguageIcon = (
   <TranslateIcon style={{ marginLeft: 1 }} className="w-7 h-7 inline-block " />
 );