Responsive

components/core/Navbar/Navbar.tsx

@@ -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>

pages/_app.tsx

@@ -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'