✨ feat(App): add ToolBar

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

src/components/molecules/Toobar/index.ts

@@ -0,0 +1 @@
+export { default } from './Toobar'

src/components/molecules/index.ts

@@ -0,0 +1,2 @@
+export { default as Toobar } from './Toobar'
+export { default as Footer } from './Footer'