Merge pull request #334 from UTDNebula/mobile-rhs

Collapsible Mobile RHS
UTDNebula · Jan 5, 2025 · dac5f04 · dac5f04
2 parents ec9e0ae + 8060370
commit dac5f04
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 101 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(false);
+  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 } 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;
 };
 
 /**
@@ -20,29 +23,46 @@ type TabNavMenuProps = {
  */
 export const TabNavMenu = (props: TabNavMenuProps) => {
   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
-            )
-          }
-        />
-      ))}
-    </Tabs>
+    <div className="w-full flex items-center">
+      <IconButton
+        aria-label="open overview"
+        onClick={() => props.setOpen(!props.open)}
+        size="medium"
+        className={
+          'sm:hidden ml-2 transition-transform' +
+          (props.open ? ' rotate-90' : '')
+        }
+      >
+        <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>
   );
 };
diff --git a/src/components/search/SearchResultsTable/searchResultsTable.tsx b/src/components/search/SearchResultsTable/searchResultsTable.tsx
@@ -34,12 +34,10 @@ import type { GenericFetchedData, GradesType } from '@/pages/dashboard/index';
 function LoadingRow() {
   return (
     <TableRow>
-      <TableCell>
-        <IconButton aria-label="expand row" size="small" disabled>
+      <TableCell className="flex gap-1">
+        <IconButton aria-label="expand row" size="medium" disabled>
           <KeyboardArrowIcon />
         </IconButton>
-      </TableCell>
-      <TableCell>
         <Checkbox disabled />
       </TableCell>
       <TableCell component="th" scope="row" className="w-full">
@@ -108,50 +106,54 @@ function Row({
         className="cursor-pointer"
       >
         <TableCell className="border-b-0">
-          <Tooltip
-            title={open ? 'Minimize Result' : 'Expand Result'}
-            placement="top"
-          >
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-              className={'transition-transform' + (open ? ' rotate-90' : '')}
+          <div className="flex items-center gap-1">
+            <Tooltip
+              title={open ? 'Minimize Result' : 'Expand Result'}
+              placement="top"
             >
-              <KeyboardArrowIcon />
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell className="border-b-0">
-          <Tooltip
-            title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
-            placement="top"
-          >
-            <Checkbox
-              checked={inCompare}
-              onClick={(e) => {
-                e.stopPropagation(); // prevents opening/closing the card when clicking on the compare checkbox
-                if (inCompare) {
-                  removeFromCompare(course);
-                } else {
-                  addToCompare(course);
+              <IconButton
+                aria-label="expand row"
+                size="medium"
+                onClick={(e) => {
+                  e.stopPropagation(); // prevents double opening/closing
+                  setOpen(!open);
+                }}
+                className={'transition-transform' + (open ? ' rotate-90' : '')}
+              >
+                <KeyboardArrowIcon fontSize="inherit" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip
+              title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
+              placement="top"
+            >
+              <Checkbox
+                checked={inCompare}
+                onClick={(e) => {
+                  e.stopPropagation(); // prevents opening/closing the card when clicking on the compare checkbox
+                  if (inCompare) {
+                    removeFromCompare(course);
+                  } else {
+                    addToCompare(course);
+                  }
+                }}
+                disabled={
+                  (typeof grades !== 'undefined' &&
+                    grades.state === 'loading') ||
+                  (typeof rmp !== 'undefined' && rmp.state === 'loading')
                 }
-              }}
-              disabled={
-                (typeof grades !== 'undefined' && grades.state === 'loading') ||
-                (typeof rmp !== 'undefined' && rmp.state === 'loading')
-              }
-              sx={
-                color
-                  ? {
-                      '&.Mui-checked': {
-                        color: color,
-                      },
-                    }
-                  : undefined
-              } // Apply color if defined
-            />
-          </Tooltip>
+                sx={
+                  color
+                    ? {
+                        '&.Mui-checked': {
+                          color: color,
+                        },
+                      }
+                    : undefined
+                } // Apply color if defined
+              />
+            </Tooltip>
+          </div>
         </TableCell>
         <TableCell component="th" scope="row" className="w-full border-b-0">
           <Tooltip
@@ -446,8 +448,7 @@ const SearchResultsTable = ({
         <Table stickyHeader aria-label="collapsible table">
           <TableHead>
             <TableRow>
-              <TableCell />
-              <TableCell>Compare</TableCell>
+              <TableCell>Actions</TableCell>
               <TableCell>
                 <TableSortLabel
                   active={orderBy === 'name'}