Header A4
Home
BlogAbout
Edit the page on GitHub<headersx={{display: 'grid',gridGap: 3,gridTemplateColumns: 'repeat(3, 1fr)',px: 3,py: 4,alignItems: 'center',variant: 'styles.header',}}><buttontitle="Toggle Menu"sx={{appearance: 'none',width: 32,height: 32,m: 0,p: 1,color: 'inherit',bg: 'transparent',border: 0,':focus': {outline: '2px solid',},':hover': {color: 'primary',},}}><svgxmlns="http://www.w3.org/2000/svg"width="24"height="24"fill="currentcolor"viewBox="0 0 24 24"sx={{display: 'block',margin: 0,}}><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg></button><divsx={{display: 'flex',alignItems: 'center',justifyContent: 'center',}}><Linkto="/"sx={{variant: 'styles.navlink',px: 3,py: 1,textTransform: 'uppercase',letterSpacing: '0.1em',border: '4px solid',color: 'primary',}}>Home</Link></div><divsx={{display: 'flex',alignItems: 'center',justifyContent: 'flex-end',}}><Linkto="/blog"sx={{variant: 'styles.navlink',ml: 3,py: 3,}}>Blog</Link><Linkto="/about"sx={{variant: 'styles.navlink',ml: 3,py: 3,}}>About</Link></div></header>