Somewhat get a max-width container working

This commit is contained in:
Matthew Penner 2020-08-22 16:49:18 -06:00
parent 19176fb1b6
commit 1f850fac61
2 changed files with 24 additions and 7 deletions

View File

@ -10,14 +10,14 @@ import styled from 'styled-components/macro';
const Navigation = styled.div` const Navigation = styled.div`
${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`}; ${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
& > div { & > div {
${tw`mx-auto w-full flex items-center`}; ${tw`mx-auto w-full flex items-center`};
} }
& #logo { & #logo {
${tw`flex-1`}; ${tw`flex-1`};
& > a { & > a {
${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`}; ${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`};
} }
@ -26,14 +26,14 @@ const Navigation = styled.div`
const RightNavigation = styled.div` const RightNavigation = styled.div`
${tw`flex h-full items-center justify-center`}; ${tw`flex h-full items-center justify-center`};
& > a, & > .navigation-link { & > a, & > .navigation-link {
${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`}; ${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
&:active, &:hover { &:active, &:hover {
${tw`text-neutral-100 bg-black`}; ${tw`text-neutral-100 bg-black`};
} }
&:active, &:hover, &.active { &:active, &:hover, &.active {
box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()}; box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
} }
@ -52,6 +52,7 @@ export default () => {
{name} {name}
</Link> </Link>
</div> </div>
<RightNavigation> <RightNavigation>
<SearchContainer/> <SearchContainer/>
<NavLink to={'/'} exact> <NavLink to={'/'} exact>
@ -60,11 +61,13 @@ export default () => {
<NavLink to={'/account'}> <NavLink to={'/account'}>
<FontAwesomeIcon icon={faUserCircle}/> <FontAwesomeIcon icon={faUserCircle}/>
</NavLink> </NavLink>
{rootAdmin && {rootAdmin &&
<a href={'/admin'} rel={'noreferrer'}> <a href={'/admin'}>
<FontAwesomeIcon icon={faCogs}/> <FontAwesomeIcon icon={faCogs}/>
</a> </a>
} }
<a href={'/auth/logout'}> <a href={'/auth/logout'}>
<FontAwesomeIcon icon={faSignOutAlt}/> <FontAwesomeIcon icon={faSignOutAlt}/>
</a> </a>

View File

@ -0,0 +1,14 @@
import React from 'react';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => {
return (
<AdminContentBlock>
<div>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Packs</h2>
<p css={tw`text-base text-neutral-400`}>All service packs available on the system.</p>
</div>
</AdminContentBlock>
);
};