From c27302d9458604e3280b625a9af6375130f39282 Mon Sep 17 00:00:00 2001
From: MooKorea <69235304+MooKorea@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:21:53 -0500
Subject: [PATCH] layout fixes

---
 src/assets/components/Navbar.jsx      |  13 +-
 src/assets/pages/features/Section.jsx | 193 +++++++++++++++-----------
 src/assets/styles/documentation.scss  |   2 -
 src/assets/styles/features.scss       |  31 ++++-
 4 files changed, 149 insertions(+), 90 deletions(-)

diff --git a/src/assets/components/Navbar.jsx b/src/assets/components/Navbar.jsx
index 1987e5f..3837d62 100644
--- a/src/assets/components/Navbar.jsx
+++ b/src/assets/components/Navbar.jsx
@@ -16,13 +16,14 @@ export default function Navbar() {
 
   const [isOpened, setIsOpened] = useState(false);
 
-  const handleDropDownState = (e) => {
-    if (isOpened && !e.target.closest(".collapse-button")) {
-      setIsOpened(false);
-    }
-  };
-
+  
   useEffect(() => {
+    const handleDropDownState = (e) => {
+      // console.log(e.target)
+      if (isOpened && !e.target.closest(".collapse-button")) {
+        setIsOpened(false);
+      }
+    };
     window.addEventListener("click", handleDropDownState);
     return () => window.removeEventListener("click", handleDropDownState);
   }, []);
diff --git a/src/assets/pages/features/Section.jsx b/src/assets/pages/features/Section.jsx
index 121e3c4..0203e5e 100644
--- a/src/assets/pages/features/Section.jsx
+++ b/src/assets/pages/features/Section.jsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import parse from "html-react-parser";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, useAnimation } from "framer-motion";
 import useMeasure from "react-use-measure";
 
 export default function Section({ data }) {
@@ -8,6 +8,8 @@ export default function Section({ data }) {
   const [images, setImages] = useState([]);
   const [content, setContent] = useState();
   const [current, setCurrent] = useState(0);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [emptyContainerHeight, setEmptyContainerHeight] = useState(0);
 
   useEffect(() => {
     setContent(parse(data, parseText));
@@ -47,101 +49,130 @@ export default function Section({ data }) {
     }
   };
 
-  const [isMissingImage, setIsMissingImage] = useState(false)
+  const [isMissingImage, setIsMissingImage] = useState(false);
   const [direction, setDirection] = useState("100%");
   const handleSlide = (add) => {
-    setIsMissingImage(false)
+    setIsMissingImage(false);
     setCurrent((prev) => (prev + add) % carousel.length);
     add === 1 ? setDirection("100%") : setDirection("-100%");
   };
 
   let [ref, { height }] = useMeasure();
+  let containerRef = useRef();
+
+  const controls = useAnimation();
+  const handleFullScreen = () => {
+    setEmptyContainerHeight(containerRef.current.offsetHeight);
+    controls.set({ opacity: 0 });
+    controls.start({ opacity: 1 });
+    setIsFullScreen(!isFullScreen);
+  };
+
+  // useEffect(() => {
+  //   console.log(containerRef.current.offsetHeight)
+  // }, [emptyContainerHeight])
 
   return (
     <>
       <div className="feature-summary">{content}</div>
-      <div className="carousel-container">
-        {carousel?.length > 1 && (
-          <div className="buttons">
-            <div className="left" onClick={() => handleSlide(carousel.length - 1)}>
-              <svg
-                id="a"
-                xmlns="http://www.w3.org/2000/svg"
-                width="64"
-                height="64"
-                viewBox="0 0 64 64"
+      <div
+        className="carousel-container"
+        style={isFullScreen ? { height: emptyContainerHeight } : null}
+      >
+        <motion.div
+          animate={controls}
+          ref={containerRef}
+          className={isFullScreen ? "carousel-fit" : null}
+        >
+          {carousel?.length > 1 && (
+            <div className="buttons">
+              <div
+                className={isFullScreen ? "left fullscreen-btn" : "left"}
+                onClick={() => handleSlide(carousel.length - 1)}
               >
-                <path
-                  d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
-                  fill="#fff"
-                  stroke="#000"
-                  strokeLinecap="round"
-                  strokeMiterlimit="10"
-                  strokeWidth="7"
-                />
-              </svg>
-            </div>
-            <div className="right" onClick={() => handleSlide(1)}>
-              <svg
-                id="a"
-                xmlns="http://www.w3.org/2000/svg"
-                width="64"
-                height="64"
-                viewBox="0 0 64 64"
+                <svg
+                  id="a"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="64"
+                  height="64"
+                  viewBox="0 0 64 64"
+                >
+                  <path
+                    d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
+                    fill="#fff"
+                    stroke="#000"
+                    strokeLinecap="round"
+                    strokeMiterlimit="10"
+                    strokeWidth="7"
+                  />
+                </svg>
+              </div>
+              <div
+                className={isFullScreen ? "right fullscreen-btn" : "right"}
+                onClick={() => handleSlide(1)}
               >
-                <path
-                  d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
-                  fill="#fff"
-                  stroke="#000"
-                  strokeLinecap="round"
-                  strokeMiterlimit="10"
-                  strokeWidth="7"
-                />
-              </svg>
-            </div>
-          </div>
-        )}
-        <div className="carousel">
-          <AnimatePresence>
-            <div className="image-container">
-              {isMissingImage && <div>Image missing</div>}
-              <motion.img
-                onError={() => setIsMissingImage(true)}
-                className="featured-image"
-                src={`/Features${images[current]?.src}`}
-                alt={images[current]?.alt}
-                key={current}
-                initial={{ x: direction, opacity: 0 }}
-                animate={{ x: 0, opacity: 1 }}
-                exit={{ opacity: 0, scale: 0.8 }}
-                transition={{ ease: [0, 0.89, 0.08, 1], opacity: { duration: 0.3 } }}
-              />
+                <svg
+                  id="a"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="64"
+                  height="64"
+                  viewBox="0 0 64 64"
+                >
+                  <path
+                    d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
+                    fill="#fff"
+                    stroke="#000"
+                    strokeLinecap="round"
+                    strokeMiterlimit="10"
+                    strokeWidth="7"
+                  />
+                </svg>
+              </div>
             </div>
-            <motion.div animate={{ height }}>
-              <div ref={ref}>
-                {carousel[0] &&
-                  carousel[current]?.map((e, i) => {
-                    return (
-                      <motion.span
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.3 }}
-                      >
-                        {captionParse(e)}
-                      </motion.span>
-                    );
-                  })}
+          )}
+          <div className="carousel">
+            <AnimatePresence>
+              <div className="image-container">
+                {isMissingImage && <div>Image missing</div>}
+                <motion.img
+                  onError={() => setIsMissingImage(true)}
+                  onClick={() => handleFullScreen()}
+                  className="featured-image"
+                  src={`/Features${images[current]?.src}`}
+                  alt={images[current]?.alt}
+                  key={current}
+                  initial={{ x: direction, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ opacity: 0, scale: 0.8 }}
+                  transition={{ ease: [0, 0.89, 0.08, 1], opacity: { duration: 0.3 } }}
+                />
               </div>
-            </motion.div>
-          </AnimatePresence>
-          <div className="dots">
-            {carousel[0] &&
-              carousel?.map((e, i) => {
-                return <div key={i} className={current === i ? "active" : ""}></div>;
-              })}
+              <motion.div animate={{ height }}>
+                <div ref={ref}>
+                  {carousel[0] &&
+                    carousel[current]?.map((e, i) => {
+                      return (
+                        <motion.span
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          exit={{ opacity: 0 }}
+                          transition={{ duration: 0.3 }}
+                        >
+                          {captionParse(e)}
+                        </motion.span>
+                      );
+                    })}
+                </div>
+              </motion.div>
+            </AnimatePresence>
+            <div className="dots">
+              {carousel[0] &&
+                carousel?.map((e, i) => {
+                  return <div key={i} className={current === i ? "active" : ""}></div>;
+                })}
+            </div>
           </div>
-        </div>
+        </motion.div>
       </div>
       <div className="line"></div>
     </>
diff --git a/src/assets/styles/documentation.scss b/src/assets/styles/documentation.scss
index 74cc06c..6534963 100644
--- a/src/assets/styles/documentation.scss
+++ b/src/assets/styles/documentation.scss
@@ -25,7 +25,6 @@
     @media (min-width: 1200px) {
       width: 760px;
     }
-    width: calc(100vw - $documentation-sidebar-width - 8em);
     background-color: rgb(228, 228, 228);
     code {
       font-family: "Courier New", Courier, monospace;
@@ -40,7 +39,6 @@
     @media (min-width: 1200px) {
         width: 780px;
     }
-    // width: calc(100vw - $documentation-sidebar-width - 4em);
     width: calc(100vw - 4em);
     &:hover {
       cursor: zoom-in;
diff --git a/src/assets/styles/features.scss b/src/assets/styles/features.scss
index de5ec94..a1dd61d 100644
--- a/src/assets/styles/features.scss
+++ b/src/assets/styles/features.scss
@@ -43,6 +43,9 @@ main.features {
     position: relative;
     left: 0;
     transform: translate(-50%, 0%);
+    &:hover {
+      cursor:zoom-in;
+    }
   }
 
   .carousel-container {
@@ -53,6 +56,21 @@ main.features {
     margin-block: 2em;
   }
 
+  .carousel-fit {
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(221, 221, 221, 0.781);
+    text-shadow: rgb(255, 255, 255) 0px 0 5px;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    position: fixed;
+  }
+
   .carousel {
     padding-block: 2em;
     margin-block: 2em;
@@ -78,6 +96,7 @@ main.features {
       width: 60px;
       height: 60px;
       top: 210px;
+      left: 0;
       transform: translate(-50%, -50%);
       background-color: rgb(255, 255, 255);
       box-shadow: 0px 0px 10px rgb(196, 196, 196);
@@ -85,7 +104,6 @@ main.features {
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: 0.2s;
       svg {
         width: 35px;
         height: 35px;
@@ -102,12 +120,23 @@ main.features {
     }
 
     .right {
+      left: auto;
       right: 0;
       transform: translate(50%, -50%);
       svg {
         transform: translateX(2px);
       }
     }
+
+    .fullscreen-btn {
+      top: 50%;
+      left: 50px;
+    }
+
+    .right.fullscreen-btn {
+      left: auto;
+      right: 50px;
+    }
   }
 
   .dots {