add docs page

morpheus-client/components/Footer/Footer.module.scss

@@ -8,6 +8,7 @@
   display: flex;
   align-items: center;
   background: colors.$background-primary !important;
+  z-index: 10;
 
   @include media.mobile {
     height: auto;

morpheus-client/components/Navbar/Navbar.module.scss

@@ -3,6 +3,7 @@
 @use "styles/typography";
 
 .navbarContainer {
+  position: fixed;
   height: 80px;
   min-height: 80px;
   max-height: 80px;

morpheus-client/components/Navbar/Navbar.tsx

@@ -12,6 +12,7 @@ import useWindowDimensions from "../../hooks/useWindowDimensions";
 import { User } from "@/models/models";
 import { MOBILE_SCREEN_WIDTH } from "@/utils/constants";
 import styles from "./Navbar.module.scss";
+import { cn } from "@/utils/styles";
 
 type NavMenuProps = {
   user: User;
@@ -56,8 +57,8 @@ const NavMenu = (props: NavMenuProps) => {
         <Link className={getLinkStyles("gallery")} href={"/gallery"}>
           Gallery
         </Link>
-        <Link className={getLinkStyles("about")} href={"/about"}>
-          About
+        <Link className={getLinkStyles("docs")} href={"/docs"}>
+          Docs
         </Link>
       </div>
 
@@ -79,6 +80,7 @@ const NavMenu = (props: NavMenuProps) => {
 
 interface NavbarProps {
   showBrand?: boolean;
+  fixed?: boolean;
 }
 
 const Navbar = (props: NavbarProps) => {
@@ -114,7 +116,7 @@ const Navbar = (props: NavbarProps) => {
   );
 
   return (
-    <div className={styles.navbarContainer}>
+    <div className={styles.navbarContainer} style={{ position: props.fixed ? "fixed" : "relative" }}>
       {isMobile ? (
         <Fragment>
           <BurgerMenu

morpheus-client/components/Pre/Pre.tsx

@@ -0,0 +1,73 @@
+import { useState, useRef } from "react";
+
+const Pre = (props: any) => {
+  const textInput = useRef<HTMLDivElement>(null);
+  const [hovered, setHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const onEnter = () => {
+    setHovered(true);
+  };
+
+  const onExit = () => {
+    setHovered(false);
+    setCopied(false);
+  };
+
+  const onCopy = () => {
+    setCopied(true);
+    if (textInput.current !== null && textInput.current.textContent !== null) {
+      navigator.clipboard.writeText(textInput.current.textContent);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+  };
+
+  return (
+    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative">
+      {hovered && (
+        <button
+          aria-label="Copy code"
+          type="button"
+          className={`absolute right-2 top-2 h-8 w-8 rounded border-2 bg-gray-700 p-1 dark:bg-gray-800 ${
+            copied ? "border-green-400 focus:border-green-400 focus:outline-none" : "border-gray-300"
+          }`}
+          onClick={onCopy}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            fill="none"
+            className={copied ? "text-green-400" : "text-gray-300"}
+          >
+            {copied ? (
+              <>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+                />
+              </>
+            ) : (
+              <>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                />
+              </>
+            )}
+          </svg>
+        </button>
+      )}
+
+      <pre>{props.children}</pre>
+    </div>
+  );
+};
+
+export default Pre;