From 7032432d3a706d55e78b6bde334e23bf7e7566ad Mon Sep 17 00:00:00 2001
From: Jan Rychly <jrychlyg@gmail.com>
Date: Wed, 11 Oct 2023 17:38:34 -0800
Subject: [PATCH] Make the navigation header bolder - simpler overall color
 palette and higher contrast - also a cool scroll triggered effect

---
 src/layouts/Navigation.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx
index 2715348..9a890e1 100644
--- a/src/layouts/Navigation.tsx
+++ b/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>