Merge pull request #21 from sky-ash/nav-edit-241104

Nav edit 241104
sky-ash · Nov 4, 2024 · 25d2ac4 · 25d2ac4
2 parents 26fdfe6 + 7b45b62
commit 25d2ac4
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 38 deletions.
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -133,7 +133,7 @@ export default function Card({ card, nextCard, prevCard, onCardCompletion, curre
 
           <Fab color="primary"
                onClick={handleReturnToPath}
-               sx={{ position: 'fixed', zIndex: 1,
+               sx={{ position: 'fixed', zIndex: 'tooltip',
                      top: 32, right: 32, }}>
             <TurnLeft />
           </Fab>

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -20,7 +20,7 @@ export default function Navigation() {
         <Link to="/path">
           <Fab color="primary"
                variant='extended'
-               sx={{ position: 'fixed', zIndex: 1,
+               sx={{ position: 'fixed', zIndex: 'tooltip',
                      left: '50%', transform: 'translateX(-50%)',
                      bottom: 32, }}>
             <Typography display='flex'
@@ -48,15 +48,14 @@ export default function Navigation() {
 
         <Link to="/settings">
           <Fab color="primary"
-              sx={{ position: 'absolute', zIndex: 1,
-                    margin: '0 auto', top: -20,
-                    left: 0, right: 0, }}>
+               sx={{ position: 'fixed', zIndex: 'tooltip',
+                     left: '50%', transform: 'translateX(-50%)',
+                     bottom: 32, }}>
             <SettingsIcon />
           </Fab>
         </Link>
 
         <Toolbar>
-
           <Link to="/" sx={{alignItems: 'flex-start'}}>
             <IconButton color="primary">
               <HomeIcon />
@@ -74,12 +73,9 @@ export default function Navigation() {
           </Link>
 
         </Toolbar>
-
       </AppBar>
     );
-  }
-
-  else if (location.pathname === '/settings') {
+  } else if (location.pathname === '/settings' || location.pathname === '/sources') {
     return (
       <AppBar position="fixed"
               bgcolor="background.paper"
@@ -88,17 +84,26 @@ export default function Navigation() {
                     bottom: 0, 
                 }}>
 
-        <Link to="/path">
+        {/*
+        <Link to="/sources">
           <Fab color="primary"
-              sx={{ position: 'absolute', zIndex: 1,
-                    margin: '0 auto', top: -20,
-                    left: 0, right: 0, }}>
-            <NavigationIcon />
+               sx={{ position: 'fixed', zIndex: 'tooltip',
+                     left: '50%', transform: 'translateX(-50%)',
+                     bottom: 32, }}>
+            <InfoIcon />
+          </Fab>
+        </Link>
+        <Link to="/settings">
+          <Fab color="primary"
+               sx={{ position: 'fixed', zIndex: 'tooltip',
+                     left: '50%', transform: 'translateX(-50%)',
+                     bottom: 32, }}>
+            <SettingsIcon />
           </Fab>
         </Link>
+        */}
 
         <Toolbar>
-
           <Link to="/" sx={{alignItems: 'flex-start'}}>
             <IconButton color="primary">
               <HomeIcon />
@@ -107,19 +112,18 @@ export default function Navigation() {
 
           <Box sx={{flexGrow: 1}} />
 
-          <Link to="/sources">
+          <Link to="/path">
             <IconButton
               color="primary"
             >
-              <InfoIcon />
+              <TurnLeft />
             </IconButton>
           </Link>
 
         </Toolbar>
-
       </AppBar>
     );
-  }
+  } /*
   else if (location.pathname === '/sources') {
     return (
       <AppBar position="fixed"
@@ -129,17 +133,7 @@ export default function Navigation() {
                     bottom: 0, 
                 }}>
         
-        <Link to="/settings">
-          <Fab color="primary"
-              sx={{ position: 'absolute', zIndex: 1,
-                    margin: '0 auto', top: -20,
-                    left: 0, right: 0, }}>
-            <SettingsIcon />
-          </Fab>
-        </Link>
-
         <Toolbar>
-
           <Link to="/" sx={{alignItems: 'flex-start'}}>
             <IconButton color="primary">
               <HomeIcon />
@@ -157,10 +151,9 @@ export default function Navigation() {
           </Link>
 
         </Toolbar>
-
       </AppBar>
     );
-  }
+  } */
   else if (location.pathname.startsWith('/lecture/')) {
     return (
       <AppBar position="fixed"
@@ -172,9 +165,9 @@ export default function Navigation() {
 
         <Link to="/path">
           <Fab color="primary"
-              sx={{ position: 'absolute', zIndex: 1,
-                    margin: '0 auto', top: -20,
-                    left: 0, right: 0, }}>
+               sx={{ position: 'fixed', zIndex: 'tooltip',
+                     left: '50%', transform: 'translateX(-50%)',
+                     bottom: 32, }}>
             <NavigationIcon />
           </Fab>
         </Link>

diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
@@ -117,7 +117,7 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
                         variant='h6'
                         fontWeight='bold'
                         >
-              {currentQuestion < quiz.length - 1 ? 'Next' : 'Submit Quiz'}
+              {currentQuestion < quiz.length - 1 ? 'Next' : 'Submit'}
             </Typography>
           </Fab>
       </>

diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
@@ -3,8 +3,10 @@
 import React from 'react';
 
 // Material-UI components
-import { Typography, Switch, Button, Box } from '@mui/material';
+import { Typography, Switch, Button, Box, Fab, Link } from '@mui/material';
 import Navigation from '../components/Navigation';
+import InfoIcon from '@mui/icons-material/Info';
+import { useNavigate } from 'react-router-dom';
 
 // Settings component
 export default function Settings({ darkMode, setDarkMode }) {
@@ -13,6 +15,7 @@ export default function Settings({ darkMode, setDarkMode }) {
     localStorage.clear();
     alert('Cached data deleted');
   };
+  const navigate = useNavigate(); 
 
   return (
     <>
@@ -32,6 +35,13 @@ export default function Settings({ darkMode, setDarkMode }) {
         Delete Cached Data
       </Button>
       <Navigation />
+      <Fab color="primary"
+           onClick={() => navigate('/sources')}
+           sx={{ position: 'fixed', zIndex: 'tooltip',
+                 left: '50%', transform: 'translateX(-50%)',
+                 bottom: 32, }}>
+        <InfoIcon />
+      </Fab>
     </>
   );
 }
diff --git a/src/pages/Sources.jsx b/src/pages/Sources.jsx
@@ -5,7 +5,9 @@ import React from 'react';
 import Navigation from '../components/Navigation';
 
 // Material-UI components
-import { Typography, List, ListItem, ListItemText } from '@mui/material';
+import { Typography, List, ListItem, ListItemText, Fab, Link } from '@mui/material';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { useNavigate } from 'react-router-dom';
 
 // Sample data for sources
 const sources = [
@@ -16,6 +18,7 @@ const sources = [
 
 // Sources component
 export default function Sources() {
+    const navigate = useNavigate();
     return (
         <>
             {/* Page title */}
@@ -32,6 +35,13 @@ export default function Sources() {
                 ))}
             </List>
             <Navigation />
+            <Fab color="primary"
+                 onClick={() => navigate('/settings')}
+                 sx={{ position: 'fixed', zIndex: 'tooltip',
+                       left: '50%', transform: 'translateX(-50%)',
+                       bottom: 32, }}>
+                <SettingsIcon />
+            </Fab>
         </>
     );
 }