Collapsible RHS

UTDNebula · Nov 23, 2024 · 26d17c1 · 26d17c1
1 parent 6972a70
commit 26d17c1
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 52 deletions.
diff --git a/src/components/navigation/Carousel/carousel.tsx b/src/components/navigation/Carousel/carousel.tsx
@@ -1,6 +1,7 @@
 import type { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import { Collapse, useMediaQuery } from '@mui/material';
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { TabNavMenu } from '@/components/navigation/tabNavMenu/tabNavMenu';
 
@@ -69,41 +70,49 @@ const Carousel = ({ names, children, compareLength }: CarouselProps) => {
     });
   };
 
+  const isSmallScreen = useMediaQuery('(max-width: 600px)');
+  const [open, setOpen] = useState(!isSmallScreen);
+  useEffect(() => setOpen(!isSmallScreen), [isSmallScreen]);
+
   return (
     <>
       <TabNavMenu
         value={currentCard}
         options={Array.isArray(names) ? names : [names]}
         turner={turn}
         compareLength={compareLength}
+        open={open}
+        setOpen={setOpen}
       />
-      <AnimatePresence>
-        <div className="p-4 lg:p-6">
-          <motion.div
-            key={currentCard}
-            custom={direction}
-            variants={variants}
-            initial="enter"
-            animate="center"
-            exit="exit"
-            transition={{
-              x: { type: 'spring', stiffness: 300, damping: 30 },
-              opacity: { duration: 0.2 },
-            }}
-          >
-            {Array.isArray(children)
-              ? children.map((child, index) => (
-                  <div
-                    key={index}
-                    className={index === currentCard ? 'block' : 'hidden'}
-                  >
-                    {child}
-                  </div>
-                ))
-              : children}
-          </motion.div>
-        </div>
-      </AnimatePresence>
+      <Collapse in={open}>
+        <AnimatePresence>
+          <div className="p-4 lg:p-6">
+            <motion.div
+              key={currentCard}
+              custom={direction}
+              variants={variants}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              transition={{
+                x: { type: 'spring', stiffness: 300, damping: 30 },
+                opacity: { duration: 0.2 },
+              }}
+            >
+              {Array.isArray(children)
+                ? children.map((child, index) => (
+                    <div
+                      key={index}
+                      className={index === currentCard ? 'block' : 'hidden'}
+                    >
+                      {child}
+                    </div>
+                  ))
+                : children}
+            </motion.div>
+          </div>
+        </AnimatePresence>
+      </Collapse>
     </>
   );
 };

diff --git a/src/components/navigation/tabNavMenu/tabNavMenu.tsx b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
@@ -1,4 +1,5 @@
-import { Badge, Tab, Tabs } from '@mui/material';
+import KeyboardArrowIcon from '@mui/icons-material/KeyboardArrowRight';
+import { Badge, IconButton, Tab, Tabs, useMediaQuery } from '@mui/material';
 import React from 'react';
 
 /**
@@ -11,6 +12,8 @@ type TabNavMenuProps = {
   turner: (displacement: number) => void;
   options: string[];
   compareLength: number;
+  open: boolean;
+  setOpen: (arg0: boolean) => void;
 };
 
 /**
@@ -19,30 +22,49 @@ type TabNavMenuProps = {
  * which are held by the parent and passed to this component to be manipulated by the Tabs component.
  */
 export const TabNavMenu = (props: TabNavMenuProps) => {
+  const isSmallScreen = useMediaQuery('(max-width: 600px)');
   return (
-    <Tabs
-      value={props.value}
-      onChange={(event, newValue) => props.turner(newValue - props.value)}
-      aria-label="Tab switcher"
-      className="w-full grid grid-flow-row justify-center shadow dark:shadow-lg"
-    >
-      {props.options.map((option, index) => (
-        <Tab
-          key={index}
-          className="text-lg text-gray-600 dark:text-gray-200 normal-case"
-          value={index}
-          label={
-            index === props.options.length - 1 && props.compareLength ? (
-              <div className="flex items-center gap-4">
-                {option}
-                <Badge badgeContent={props.compareLength} color="primary" />
-              </div>
-            ) : (
-              option
-            )
+    <div className="w-full flex items-center">
+      {isSmallScreen && (
+        <IconButton
+          aria-label="open overview"
+          onClick={() => props.setOpen(!props.open)}
+          size="medium"
+          className={
+            'ml-2 transition-transform' + (props.open ? ' rotate-90' : '')
           }
-        />
-      ))}
-    </Tabs>
+        >
+          <KeyboardArrowIcon fontSize="inherit" />
+        </IconButton>
+      )}
+      <div className="flex-1 min-w-0 flex justify-center">
+        <Tabs
+          value={props.value}
+          onChange={(event, newValue) => props.turner(newValue - props.value)}
+          aria-label="Tab switcher"
+          className="shadow dark:shadow-lg"
+          variant="scrollable"
+        >
+          {props.options.map((option, index) => (
+            <Tab
+              key={index}
+              className="text-lg text-gray-600 dark:text-gray-200 normal-case"
+              value={index}
+              label={
+                index === props.options.length - 1 && props.compareLength ? (
+                  <div className="flex items-center gap-4">
+                    {option}
+                    <Badge badgeContent={props.compareLength} color="primary" />
+                  </div>
+                ) : (
+                  option
+                )
+              }
+              onClick={() => props.setOpen(true)}
+            />
+          ))}
+        </Tabs>
+      </div>
+    </div>
   );
 };