From f3170649dde5dbc1b7a53ce990ca4f2b986d7c9f Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Mon, 22 Jan 2024 18:41:27 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(App):=20add=20`ToolBar`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/Toobar/Toobar.tsx | 49 ++++++++++++++++++++++
 src/components/molecules/Toobar/index.ts   |  1 +
 src/components/molecules/index.ts          |  2 +
 3 files changed, 52 insertions(+)
 create mode 100644 src/components/molecules/Toobar/Toobar.tsx
 create mode 100644 src/components/molecules/Toobar/index.ts
 create mode 100644 src/components/molecules/index.ts

diff --git a/src/components/molecules/Toobar/Toobar.tsx b/src/components/molecules/Toobar/Toobar.tsx
new file mode 100644
index 0000000..a6807ae
--- /dev/null
+++ b/src/components/molecules/Toobar/Toobar.tsx
@@ -0,0 +1,49 @@
+import { Link as RouterLink } from 'react-router-dom'
+import { AppBar, Button, Stack, Toolbar, Typography, styled } from '@mui/material'
+
+const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
+  textTransform: 'none',
+  color: 'inherit',
+  ':hover': {
+    backgroundColor: 'transparent',
+    color: theme.palette.primary.main,
+  },
+}))
+
+const CustomToobar = () => {
+  return (
+    <AppBar
+      sx={{
+        backgroundColor: theme => (theme.palette.mode === 'dark' ? 'transparent' : undefined),
+      }}>
+      <Toolbar>
+        <AppBarButton component={RouterLink} to="/" sx={{ mr: 'auto' }}>
+          <Typography variant="h5">Michele Tartari</Typography>
+        </AppBarButton>
+        <Stack direction="row" spacing={2} sx={{ display: { xs: 'none', md: 'flex' } }}>
+          <AppBarButton component={RouterLink} to="/">
+            <Typography variant="h6">Home</Typography>
+          </AppBarButton>
+          <AppBarButton component={RouterLink} to="/projects">
+            <Typography variant="h6">Projects</Typography>
+          </AppBarButton>
+          <AppBarButton component={RouterLink} to="/curriculum">
+            <Typography variant="h6">Curriculum</Typography>
+          </AppBarButton>
+          <Button
+            component={RouterLink}
+            to="/contacts"
+            color="primary"
+            variant="contained"
+            sx={{
+              textTransform: 'none',
+            }}>
+            <Typography variant="h6">Hire me</Typography>
+          </Button>
+        </Stack>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default CustomToobar
diff --git a/src/components/molecules/Toobar/index.ts b/src/components/molecules/Toobar/index.ts
new file mode 100644
index 0000000..b58b1b1
--- /dev/null
+++ b/src/components/molecules/Toobar/index.ts
@@ -0,0 +1 @@
+export { default } from './Toobar'
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
new file mode 100644
index 0000000..503bfbb
--- /dev/null
+++ b/src/components/molecules/index.ts
@@ -0,0 +1,2 @@
+export { default as Toobar } from './Toobar'
+export { default as Footer } from './Footer'