Make the navigation header bolder

- simpler overall color palette and higher contrast
- also a cool scroll triggered effect

src/layouts/Navigation.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-comment-textnodes */
 // The title is supposed to imitate a code source file header
-import { AppBar, Box, Container, Link, Tab, Tabs, Toolbar, Typography } from '@mui/material'
+import { AppBar, Box, Container, Link, Tab, Tabs, Toolbar, Typography, useScrollTrigger } from '@mui/material'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { GithubIcon } from '../icons/GithubIcon'
 import { LinkedinIcon } from '../icons/LinkedinIcon'
@@ -20,8 +20,15 @@ const tabs: { label: string, path: string }[] = [
 export const Navigation = () => {
   const { pathname } = useLocation()
   const navigate = useNavigate()
+
+  const scrollIsAtTop = !useScrollTrigger({ threshold: 20, disableHysteresis: true })
+
   return(
-    <AppBar sx={{ backgroundImage: 'none' }}>
+    <AppBar sx={({ palette }) => ({
+      backgroundImage: 'none',
+      background: palette.background.default,
+      transition: 'background 200ms',
+    })}>
       <Container sx={{ px: { xs: 3, md: 20 }}}>
         <Toolbar sx={{ p: { xs: 0 } }}>
           <Typography
@@ -65,6 +72,18 @@ export const Navigation = () => {
             </Link>
             <Link href="https://github.com/honzaflash" target="_blank"><GithubIcon /></Link>
           </Box>
+          <Box component="span" sx={({ palette }) => ({
+            position: 'absolute',
+            // width: '100%',
+            width: '0%',
+            height: '2px',
+            bottom: 0,
+            left: 'calc(-50vw + 50%)',
+            backgroundColor: '#49B53F70',
+            ...(!scrollIsAtTop && { width: '100vw', left: 'calc(-50vw + 50%)', backgroundColor: palette.primary.main }),
+            transition: '200ms  ',
+            transitionProperty: 'width, left, background-color',
+          })} />
         </Toolbar>
       </Container>
     </AppBar>