h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

styling navbar

Browse Source
This commit is contained in:
Yen Colon
2020-10-27 11:01:48 -04:00
parent bfaacbdb74
commit badde1cefa
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/layouts/MainLayout/MainLayout.js
View File

@@ -11,36 +11,41 @@ const MainLayout = ({ children }) => {
return ( return (
<> <>
<header> <header>
<nav className="flex justify-between h-20 bg-gray-900"> <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
<ul className="flex items-center"> <ul className="flex items-center">
<li> <li>
<Link to={routes.home()}> <Link to={routes.home()}>
<Tooltip title="We need a logo!" > <Tooltip title="We need a logo!" >
<div className="h-10 w-10 bg-indigo-500 rounded-full ml-12" data-tip="hello world" data-place="bottom"></div> <div className="h-10 w-10 bg-indigo-500 rounded-full" data-tip="hello world" data-place="bottom"></div>
</Tooltip> </Tooltip>
</Link> </Link>
</li> </li>
<li> <li>
<Tooltip title="Very alpha, there's lots of work todo" > <Tooltip title="Very alpha, there's lots of work todo" >
<div className="ml-8 flex"> <div className="ml-8 flex">
<h2 className="text-indigo-200 text-2xl">CadHub</h2> <h2 className="text-indigo-200 text-4xl font-ropa-sans tracking-widest">CadHub</h2>
<div className="text-pink-500 pb-4 text-sm" >pre-alpha</div> <div className="text-pink-500 pb-4 text-sm font-ropa-sans" >pre-alpha</div>
</div> </div>
</Tooltip> </Tooltip>
</li> </li>
</ul> </ul>
<ul className="flex items-center"> <ul className="flex items-center">
<li className="mr-8 rounded-full border-2 border-indigo-300"> <li className="mr-8 h-10 w-10 rounded-full border-2 border-indigo-300 flex items-center justify-center">
<Link to={routes.newPart()}> <Link to={routes.newPart()}>
<Svg name="plus" className="text-indigo-300" /> <Svg name="plus" className="text-indigo-300" />
</Link> </Link>
</li> </li>
<li className="mr-12 p-px border-2 rounded-full border-indigo-300 text-indigo-200"> {
<a href="#" onClick={isAuthenticated ? logOut : logIn}> isAuthenticated ?
{isAuthenticated ? 'Log Out' : 'Log In'} <li className="h-10 w-10 border-2 rounded-full border-indigo-300 text-indigo-200">
<img src={avatar} className="rounded-full h-10 w-10" /> <a href="#" onClick={logOut}>
<img src={avatar} className="rounded-full object-cover" />
</a> </a>
</li>:
<li>
<a href="#" className='text-indigo-200 font-semibold underline' onClick={logIn}>Sign in/up</a>
</li> </li>
}
</ul> </ul>
</nav> </nav>
</header> </header>