menu for help options

StampyAI · Nov 1, 2023 · 9741e29 · 9741e29
1 parent 75515f0
commit 9741e29
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 55 deletions.
diff --git a/app/assets/icons/followup.svg b/app/assets/icons/followup.svg
diff --git a/app/components/icons-generated/Followup.js b/app/components/icons-generated/Followup.js
@@ -16,10 +16,8 @@ const SvgFollowup = (props) => (
       }}
     />
     <path
+      className="followup_svg__st1 followup_svg__gray"
       d="M283.7 127.6h-60.6c-30.4 0-55.1 24.7-55.1 55 0 4.4 3.6 8 8 8s8-3.6 8-8c0-21.5 17.5-39.1 39.1-39.1h60.6c24.4 0 44.3 19.9 44.3 44.3 0 16.9-9.4 32.1-24.6 39.7L252.3 254c-2.6 1.4-4.3 4.2-4.3 7.1V288c0 4.4 3.6 8 8 8s8-3.6 8-8v-21.9l46.7-24.2c20.5-10.3 33.3-31 33.3-54 0-33.3-27.1-60.3-60.3-60.3zM256 328c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm0-296.9C114.6 31.1.9 124.2.9 239.1c0 49.6 21.4 95 57 130.7-12.5 50.4-54.3 95.3-54.8 95.8-2.2 2.3-2.8 5.7-1.5 8.7s4.1 4.8 7.3 4.8c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 255.1-93.1 255.1-208s-114.6-208-256-208zm0 400c-35.1 0-69.4-6.2-101.8-18.4l-8.5-2.3-7.1 5.7c-20.2 16.1-60.1 42-112.7 47.1 14.4-18.3 37.4-51.7 46.6-88.6l2.2-8.8-6.4-6.4C34.1 325.1 16 283.8 16 239.1c0-105.9 107.7-192 240-192s240 86.1 240 192-107.7 192-240 192z"
-      style={{
-        fill: '#333',
-      }}
     />
   </svg>
 )

diff --git a/app/components/layouts.tsx b/app/components/layouts.tsx
@@ -1,57 +1,73 @@
+import {useState} from 'react'
 import {useOutletContext} from '@remix-run/react'
 import logoFunSvg from '../assets/stampy-logo.svg'
 import logoMinSvg from '../assets/stampy-logo-min.svg'
-import {Share, Users, Code, Tag} from './icons-generated'
+import {Share, Tag, Followup} from './icons-generated'
 import CopyLink from './copyLink'
 import type {Context} from '~/root'
 
 const year = new Date().getFullYear()
 
 export const Header = () => {
   const {minLogo, embed} = useOutletContext<Context>()
+  const [showMenu, setShowMenu] = useState(false)
 
   if (embed) return null
 
   return (
-    <header className={minLogo ? 'min-logo' : 'fun-logo'}>
-      <div className="logo-intro-group">
-        <a href="/">
-          <img className="logo" alt="logo" src={minLogo ? logoMinSvg : logoFunSvg} />
-        </a>
-        <div className="intro">
-          {minLogo ? (
-            <>
-              Answering questions about
-              <h1>AI Safety</h1>
-            </>
-          ) : (
-            <>
-              <h1>
-                Welcome to <span className="highlight">stampy.ai</span>!
-              </h1>
-              I can answer questions about artificial general intelligence safety
-            </>
-          )}
+    <header>
+      <div className={['header-bar', minLogo ? 'min-logo' : 'fun-logo'].join(' ')}>
+        <div className="logo-intro-group">
+          <a href="/">
+            <img className="logo" alt="logo" src={minLogo ? logoMinSvg : logoFunSvg} />
+          </a>
+          <div className="intro">
+            {minLogo ? (
+              <>
+                Answering questions about
+                <h1>AI Safety</h1>
+              </>
+            ) : (
+              <>
+                <h1>
+                  Welcome to <span className="highlight">stampy.ai</span>!
+                </h1>
+                I can answer questions about artificial general intelligence safety
+              </>
+            )}
+          </div>
+        </div>
+        <div className="icon-link-group">
+          <CopyLink>
+            <Share />
+            Share link
+          </CopyLink>
+          <a href="/tags/" className="icon-link">
+            <Tag />
+            Tags
+          </a>
+          <a href="#" className="icon-link" onClick={() => setShowMenu(!showMenu)}>
+            <Followup />
+            Help Out
+          </a>
         </div>
       </div>
-      <div className="icon-link-group">
-        <CopyLink>
-          <Share />
-          Share link
-        </CopyLink>
-        <a href="https://get_involved.aisafety.info" className="icon-link">
-          <Users />
-          Get Involved
-        </a>
-        <a href="https://github.com/StampyAI/stampy-ui" className="icon-link">
-          <Code />
-          Help Code
-        </a>
-        <a href="/tags/" className="icon-link">
-          <Tag />
-          Tags
-        </a>
-      </div>
+      {showMenu && (
+        <div className="menu">
+          <a href="https://github.com/StampyAI/stampy-ui" className="menu-link">
+            Code
+          </a>
+          <a href="https://get_involved.aisafety.info" className="menu-link">
+            Write
+          </a>
+          <a
+            href="https://www.every.org/stampy?utm_campaign=donate-link#/donate"
+            className="menu-link"
+          >
+            Donate
+          </a>
+        </div>
+      )}
     </header>
   )
 }

diff --git a/app/root.css b/app/root.css
@@ -151,13 +151,17 @@ button {
 }
 
 header {
+  position: relative;
+}
+
+.header-bar {
   display: flex;
   align-items: flex-start;
   padding: 24px 0 48px;
   color: var(--colorTitle);
 }
 
-header.fun-logo {
+header-bar.fun-logo {
   background-image: url('/assets/coded-banner.svg');
   background-repeat: no-repeat;
   background-attachment: fixed;
@@ -267,6 +271,46 @@ svg * {
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
 }
 
+.menu {
+  border: 1px solid var(--borderColor);
+  border-radius: 5px;
+  overflow: hidden; /* needed to be able to round inner corner */
+  width: 11em;
+  position: absolute;
+  top: 9em;
+  right: -6em;
+  z-index: 10;
+}
+.fun-logo + .menu {
+  top: 14em;
+}
+
+.menu-link {
+  display: inline-block;
+  width: 100%;
+  padding: 10px;
+  border-top: 1px solid var(--borderColor);
+  text-decoration: none;
+  background-color: var(--bgColorQuestion);
+  color: inherit; /* blue colors for links too */
+}
+/* Make menu links pretend to not be links */
+a.menu-link {
+  color: inherit;
+  text-decoration: inherit;
+}
+.menu-link:hover {
+  background-color: var(--bgColorPage);
+}
+
+.menu-link:first-child {
+  border-top: none;
+}
+
+.menu-link:last-child {
+  border-bottom: none;
+}
+
 .share::after {
   content: 'Link copied to clipboard';
   text-transform: none;