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()
return (
<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">
<Link href="/">
<a className="cursor-pointer">
<Logo />
</a>
</Link>
<nav className="space-x-4 ml-6 hidden lg:block">
<nav className="space-x-4 ml-6 sm:hidden lg:block">
<Link href="/">
<a className={s.link}>All</a>
</Link>
@ -33,11 +33,11 @@ const Navbar: FC<Props> = ({ className }) => {
</nav>
</div>
<div className="lg:flex flex-1 justify-center hidden">
<div className="lg:flex flex-1 justify-center sm:hidden">
<Searchbar />
</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
checked={theme === 'dark'}
onChange={() =>
@ -47,7 +47,8 @@ const Navbar: FC<Props> = ({ className }) => {
<UserNav />
</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 />
</div>
</div>

View File

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