4
0
forked from crowetic/commerce

Responsive

This commit is contained in:
Belen Curcio 2020-10-20 16:19:02 -03:00
parent d2b36737bf
commit 78a9a9c451
2 changed files with 9 additions and 5 deletions

View File

@ -13,14 +13,14 @@ const Navbar: FC<Props> = ({ className }) => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<div className="flex justify-between align-center flex-row py-4 lg:py-6 relative"> <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
<div className="flex flex-1 items-center"> <div className="flex flex-1 items-center">
<Link href="/"> <Link href="/">
<a className="cursor-pointer"> <a className="cursor-pointer">
<Logo /> <Logo />
</a> </a>
</Link> </Link>
<nav className="space-x-4 ml-6 hidden lg:block"> <nav className="space-x-4 ml-6 sm:hidden lg:block">
<Link href="/"> <Link href="/">
<a className={s.link}>All</a> <a className={s.link}>All</a>
</Link> </Link>
@ -33,11 +33,11 @@ const Navbar: FC<Props> = ({ className }) => {
</nav> </nav>
</div> </div>
<div className="lg:flex flex-1 justify-center hidden"> <div className="lg:flex flex-1 justify-center sm:hidden">
<Searchbar /> <Searchbar />
</div> </div>
<div className="flex flex-initial lg:flex-1 justify-end space-x-8"> <div className="flex flex-1 justify-end space-x-8">
<Toggle <Toggle
checked={theme === 'dark'} checked={theme === 'dark'}
onChange={() => onChange={() =>
@ -47,7 +47,8 @@ const Navbar: FC<Props> = ({ className }) => {
<UserNav /> <UserNav />
</div> </div>
</div> </div>
<div className="block flex pb-4 lg:hidden px-4 lg:px-6">
<div className="sm:flex pb-4 lg:px-6 lg:hidden">
<Searchbar /> <Searchbar />
</div> </div>
</div> </div>

View File

@ -1,7 +1,10 @@
import '@assets/global.css' import '@assets/global.css'
import '@assets/tailwind.css' import '@assets/tailwind.css'
import '@assets/utils.css' import '@assets/utils.css'
// To be removed
import 'animate.css' import 'animate.css'
import { FC } from 'react' import { FC } from 'react'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'