problem with mobile navigation

Colebeal · Apr 22, 2024 · 78295f0 · 78295f0
1 parent 0a39688
commit 78295f0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/components/Dev/Hero.jsx b/src/components/Dev/Hero.jsx
@@ -15,7 +15,7 @@ export default function Hero() {
         initial={{ translateY: 25, opacity: 0 }}
         animate={{ translateY: 0, opacity: 1 }}
         transition={{ duration: 1, delay: 1.5, ease: "easeInOut" }}
-        className="3xl:min-h-[900px] 4xl:min-h-[1150px] relative ml-10 hidden min-h-[700px] grow basis-4/5 rounded-lg md:col-span-5 lg:block"
+        className=" 4xl:min-h-[1150px] relative ml-10 hidden min-h-[700px] grow basis-4/5 rounded-lg md:col-span-5 lg:block"
       ></m.div>
       <div className="m-5 flex basis-1/5 flex-col-reverse items-start justify-center lg:my-0 lg:flex-row lg:items-end">
         <m.h1

diff --git a/src/components/Dev/Nav.jsx b/src/components/Dev/Nav.jsx
@@ -122,8 +122,8 @@ export default function Nav({ servicesRef, aboutRef, porfolioRef }) {
             />
           )}
           <ul
-            className={` absolute -right-2 bottom-14 flex flex-col gap-4 rounded-lg bg-orange-200 p-6 px-10 text-right text-4xl shadow-lg transition-opacity dark:bg-teal-800 md:px-16 md:py-12 md:text-6xl ${
-              isHovering ? "opacity-1" : "opacity-0"
+            className={` absolute -right-2 bottom-14 -z-10 flex flex-col gap-4 rounded-lg bg-orange-200 p-6 px-10 text-right text-4xl shadow-lg dark:bg-teal-800 md:px-16 md:py-12 md:text-6xl ${
+              isHovering ? "" : "hidden "
             }`}
           >
             <li>

diff --git a/src/routes/Bonsai.jsx b/src/routes/Bonsai.jsx
@@ -1,6 +1,7 @@
 import { motion as m } from "framer-motion"
 import { useRef, useLayoutEffect } from "react"
 import Nav from "../components/Dev/Nav"
+import { Link } from "react-router-dom"
 
 const Bonsai = () => {
   const navRef = useRef(null)
@@ -287,12 +288,12 @@ const Bonsai = () => {
           was able to achieve this by instructing ChatGPT to output in JSON
           format followed by a structured JSON object displaying the format I
           wished to receive.
-          <a
-            className=" m-3 text-orange-400 underline hover:text-orange-300 dark:hover:text-orange-200"
-            href="https://github.com/Colebeal/bonsai/blob/main/src/lib/promptData.ts"
+          <Link
+            to="https://github.com/Colebeal/bonsai/blob/main/src/lib/promptData.ts"
+            className="m-3 text-orange-400 underline underline-offset-8 hover:text-orange-300 dark:hover:text-orange-200"
           >
             See the prompt.
-          </a>
+          </Link>
         </p>
         <p className="flex flex-grow basis-1/3 text-teal-950 dark:text-orange-100 xl:text-3xl">
           Following the OpenAI documentation for implementation was a valuable