Merge pull request #7 from mariatorrentedev/develop

Styling tabs.

package.json

@@ -16,7 +16,8 @@
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.8.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/App.tsx

@@ -1,5 +1,6 @@
 import { Grid, Typography, Link, IconButton } from "@mui/material";
 import { GitHub, LinkedIn } from "@mui/icons-material";
+import { Navigation } from "./components";
 
 type Icon = {
   icon: React.ReactNode;
@@ -27,8 +28,9 @@ export default function App() {
       maxWidth="md"
       textAlign="left"
       margin="0 auto"
+      alignItems="center"
       padding={["5rem 2rem", "9rem 2rem"]}
-      spacing={2} // Adjust the spacing between items
+      spacing={2}
     >
       <Grid item>
         <Typography fontSize={[18, 42]} color="secondary">
@@ -55,29 +57,27 @@ export default function App() {
             component="a"
             color="secondary"
             href={item.link}
-            sx={{
-              ".MuiSvgIcon-root": {
-                height: ["2rem", "4rem"],
-                width: ["2rem", "4rem"],
-              },
-            }}
             target="_blank"
             rel="noopener noreferrer"
           >
             {item.icon}
           </IconButton>
         ))}
       </Grid>
-      <Grid item alignSelf="center">
+      <Grid item>
         <Link
           color="secondary.main"
+          component="a"
           href="/resume.pdf"
           target="_blank"
           sx={{ fontSize: ["1rem", "2rem"] }}
         >
           View full resume
         </Link>
       </Grid>
+      <Grid item sx={{ width: "100%" }}>
+        <Navigation />
+      </Grid>
     </Grid>
   );
 }

src/components/Navigation.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/system";
+
+const TabsWrapper = styled(Box)(({ theme }) => ({
+  flexGrow: 1,
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.secondary.main,
+  display: "flex",
+  marginTop: "1rem",
+  borderTop: `2px solid`,
+  paddingTop: "2rem",
+  minHeight: 224,
+  [theme.breakpoints.up("sm")]: {
+    paddingTop: "3rem",
+    marginTop: "3rem",
+  },
+}));
+
+const StyledTabs = styled(Tabs)(({ theme }) => ({
+  borderRight: `1px solid ${theme.palette.divider}`,
+  "& button": {
+    color: theme.palette.secondary.main,
+    fontSize: 14,
+    paddingLeft: 0,
+    maxWidth: 30,
+    padding: 0,
+    [theme.breakpoints.up("sm")]: {
+      fontSize: 18,
+      paddingLeft: "1rem",
+      maxWidth: "100%",
+      padding: "24px 60px 24px 0",
+    },
+  },
+  "& .MuiTab-root.Mui-selected": {
+    color: theme.palette.info.main,
+  },
+  "& .MuiTab-root": {
+    alignItems: "baseline",
+  },
+  "& .MuiTabs-indicator": {
+    backgroundColor: theme.palette.info.main,
+  },
+}));
+
+type TabPanelProps = {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+};
+
+function TabPanel({ children, value, index, ...other }: TabPanelProps) {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`vertical-tabpanel-${index}`}
+      aria-labelledby={`vertical-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `vertical-tab-${index}`,
+    "aria-controls": `vertical-tabpanel-${index}`,
+  };
+}
+
+export default function Navigation() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <TabsWrapper>
+      <StyledTabs
+        orientation="vertical"
+        variant="scrollable"
+        value={value}
+        onChange={(e, newValue) => handleChange(newValue)}
+        aria-label="Vertical tabs example"
+      >
+        <Tab label="About" {...a11yProps(0)} />
+        <Tab label="Projects" {...a11yProps(1)} />
+        <Tab label="Contact" {...a11yProps(2)} />
+      </StyledTabs>
+      <TabPanel value={value} index={0}>
+        About me
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        Projects
+      </TabPanel>
+      <TabPanel value={value} index={2}>
+        Contact
+      </TabPanel>
+    </TabsWrapper>
+  );
+}

src/components/index.ts

@@ -0,0 +1 @@
+export { default as Navigation } from "./Navigation";

src/theme.ts

@@ -29,6 +29,16 @@ export const theme = createTheme({
           textAlign: "left",
           color: "#ececec",
         },
+        ":root": {
+          ".MuiSvgIcon-root": {
+            height: "4rem",
+            width: "4rem",
+            "@media (max-width:600px)": {
+              height: "2rem",
+              width: "2rem",
+            },
+          },
+        },
       },
     },
   },