make mobile responsive

jackrifkin · Jun 17, 2024 · 7d217a7 · 7d217a7
1 parent ec895c8
commit 7d217a7
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 80 deletions.
diff --git a/pages/Components/Navigation/Navigation.module.css b/pages/Components/Navigation/Navigation.module.css
@@ -11,6 +11,14 @@
   height: 100%;
 }
 
+.flexContainerMobile {
+  height: 130px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
 .hoverFlexContainer {
   position: absolute;
   left: 0;
@@ -69,3 +77,45 @@
 .hoverMenuText:hover {
   text-decoration: underline;
 }
+
+.expandedMenuMobile {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  background-color: var(--maize);
+  transition: height 0.35s ease-in-out;
+  z-index: 100000;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+
+.expandedMenuContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100vh;
+}
+
+.expandedMenuLabelsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  height: calc(100% - 130px);
+  padding-bottom: 50px;
+}
+
+.expandedMenuMobile.visible {
+  height: 100vh;
+}
+
+.expandedMenuText {
+  color: var(--cosmic-latte);
+  font-size: xx-large;
+}
+
+.expandedMenuText:hover {
+  text-decoration: underline;
+}
diff --git a/pages/Components/Navigation/index.jsx b/pages/Components/Navigation/index.jsx
@@ -72,77 +72,147 @@ const HoverMenu = ({
   );
 };
 
+const ExpandedMenuMobile = ({isVisible, menuButtonFontSize, isXsScreen, isGalaxyFold, setMenuExpanded}) => {
+  const handleCollapse = () => {
+    setMenuExpanded(false)
+  }
+  return (
+    <div
+      className={`d-block d-lg-none ${styles.expandedMenuMobile} ${isVisible ? styles.visible : ""}`}
+    >
+      <div className={styles.expandedMenuContent}>
+        <div className={styles.flexContainerMobile}>
+          <div className={`${styles.wordmarkContainerMobile}`}>
+            {isXsScreen ? (
+              <Link href="/" onClick={handleCollapse}>
+                <Wordmark
+                  color={"var(--temptress)"}
+                  width={isGalaxyFold ? "200px" : "275px"}
+                  height={isGalaxyFold ? "31.25px" : "42.96875px"}
+                  style={{ zIndex: "10" }}
+                />
+              </Link>
+            ) : (
+              <Link href="/" onClick={handleCollapse}>
+                <Wordmark
+                  color={"var(--temptress)"}
+                  width={"350px"}
+                  height={"56.6875px"}
+                  style={{ zIndex: "10" }}
+                />
+              </Link>
+            )}
+          </div>
+          <div className={styles.menuLabelContainer}>
+            <div
+              style={{
+                marginRight: "25px",
+                color: "var(--cosmic-latte)",
+                fontSize: `${menuButtonFontSize + 5}px`
+              }}
+              onClick={handleCollapse}
+            >
+              -
+            </div>
+          </div>
+        </div>
+        <div className={`${styles.expandedMenuLabelsContainer}`}>
+          <Link href="/Gallery" className={`${styles.expandedMenuText} abolitionRegular`} onClick={handleCollapse}>Portraits</Link>
+          <Link href="/Team" className={`${styles.expandedMenuText} abolitionRegular`} onClick={handleCollapse}>Team</Link>
+          <Link href="/Process" className={`${styles.expandedMenuText} abolitionRegular`} onClick={handleCollapse}>Process</Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function Navigation() {
   const [containerDisplacement, setContainerDisplacement] = useState(130);
   const [wordmarkDisplacement, setWordmarkDisplacement] = useState(-130);
+  const [menuExpanded, setMenuExpanded] = useState(false);
 
   const isXsScreen = useMediaQuery({ maxWidth: 500 });
   const isGalaxyFold = useMediaQuery({ maxWidth: 340 });
-  let menuIconSize = isXsScreen ? 14 : 17;
-  menuIconSize = isGalaxyFold ? 12 : menuIconSize;
+  let menuButtonFontSize = isXsScreen ? 45 : 55;
+  menuButtonFontSize = isGalaxyFold ? 35 : menuButtonFontSize;
 
   const handleMouseEnter = () => {
     setContainerDisplacement(0);
     setWordmarkDisplacement(0);
   };
 
+  const handleExpand = () => {
+    setMenuExpanded(!menuExpanded);
+  }
+
   return (
-    <div className={styles.container}>
-      <div className={styles.flexContainer} onMouseEnter={handleMouseEnter}>
-        <div className={`${styles.wordmarkContainer} d-none d-lg-flex`}>
-          <Link href="/">
-            <Wordmark
-              color={"var(--maize)"}
-              width={"500px"}
-              height={"78.125px"}
-              style={{ zIndex: "10" }}
-            />
-          </Link>
-        </div>
-        <div className={`${styles.wordmarkContainerMobile} d-lg-none`}>
-          {isXsScreen ? (
-            <Link href="/">
-              <Wordmark
-                color={"var(--maize)"}
-                width={isGalaxyFold ? "200px" : "275px"}
-                height={isGalaxyFold ? "31.25px" : "42.96875px"}
-                style={{ zIndex: "10" }}
-              />
-            </Link>
-          ) : (
+    <div>
+      <div className={`${styles.container} d-none d-lg-block`}>
+        <div className={styles.flexContainer} onMouseEnter={handleMouseEnter}>
+          <div className={`${styles.wordmarkContainer} d-flex`}>
             <Link href="/">
               <Wordmark
                 color={"var(--maize)"}
-                width={"350px"}
-                height={"56.6875px"}
+                width={"500px"}
+                height={"78.125px"}
                 style={{ zIndex: "10" }}
               />
             </Link>
-          )}
+          </div>
+          <div className={styles.menuLabelContainer}>
+            <h1
+              className={`${styles.menuLabel} abolitionRegular`}
+            >
+              Menu
+            </h1>
+          </div>
         </div>
-        <div className={styles.menuLabelContainer}>
-          <h1
-            className={`${styles.menuLabel} abolitionRegular d-none d-lg-block`}
-          >
-            Menu
-          </h1>
-          <div
-            className="d-block d-lg-none"
-            style={{
-              border: `${menuIconSize}px solid white`,
-              borderRadius: `${menuIconSize}px`,
-              marginBottom: "25px",
-              marginRight: "20px",
-            }}
-          ></div>
+        <HoverMenu
+          containerDisplacement={containerDisplacement}
+          setContainerDisplacement={setContainerDisplacement}
+          wordmarkDisplacement={wordmarkDisplacement}
+          setWordmarkDisplacement={setWordmarkDisplacement}
+        />
+      </div>
+      <div className={`${styles.container} d-block d-lg-none`}>
+        <div className={styles.flexContainer}>
+          <div className={`${styles.wordmarkContainerMobile}`}>
+            {isXsScreen ? (
+              <Link href="/">
+                <Wordmark
+                  color={"var(--maize)"}
+                  width={isGalaxyFold ? "200px" : "275px"}
+                  height={isGalaxyFold ? "31.25px" : "42.96875px"}
+                  style={{ zIndex: "10" }}
+                />
+              </Link>
+            ) : (
+              <Link href="/">
+                <Wordmark
+                  color={"var(--maize)"}
+                  width={"350px"}
+                  height={"56.6875px"}
+                  style={{ zIndex: "10" }}
+                />
+              </Link>
+            )}
+          </div>
+          <div className={styles.menuLabelContainer}>
+            <div
+              className="d-block d-lg-none"
+              style={{
+                marginRight: "20px",
+                color: "white",
+                fontSize: `${menuButtonFontSize}px`
+              }}
+              onClick={handleExpand}
+            >
+              +
+            </div>
+          </div>
         </div>
       </div>
-      <HoverMenu
-        containerDisplacement={containerDisplacement}
-        setContainerDisplacement={setContainerDisplacement}
-        wordmarkDisplacement={wordmarkDisplacement}
-        setWordmarkDisplacement={setWordmarkDisplacement}
-      />
+      <ExpandedMenuMobile isVisible={menuExpanded} menuButtonFontSize={menuButtonFontSize} isGalaxyFold={isGalaxyFold} isXsScreen={isXsScreen} setMenuExpanded={setMenuExpanded}/>
     </div>
   );
 }
diff --git a/pages/Gallery/Gallery.module.css b/pages/Gallery/Gallery.module.css
@@ -12,6 +12,12 @@
   align-items: center;
 }
 
+@media (max-width: 992px) {
+  .filterContainer {
+    overflow-x: scroll;
+  }
+}
+
 .filterLabel {
   margin-left: 28px;
   margin-right: 20px;
@@ -47,7 +53,7 @@
 .portraitContainer {
   display: flex;
   flex-direction: column;
-  padding: 0 20px 40px 20px;
+  padding: 0 20px 40px 0px;
   align-items: center;
 }
 
@@ -56,17 +62,10 @@
   cursor: pointer;
 }
 
-/* TODO: get hover animation working with images of different aspect ratios */
-/* .thumbnail {
-  overflow: hidden;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+.portraitLabel {
+  margin-top: 15px;
 }
 
-.thumbnail:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-} */
-
 .portraitThumbnailContainer {
   height: 50vh;
   max-height: 600px;
@@ -80,10 +79,12 @@
     box-shadow 0.3s ease;
 }
 
-/* .portraitThumbnailContainer:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-} */
+@media (min-width: 993px) {
+  .portraitThumbnailContainer:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  }
+}
 
 .portraitLabelText:hover {
   text-decoration: underline;