Merge pull request #28 from firstcontributions/mobile-first

Author: Roshanjossey

src/components/Layout.tsx

@@ -1,28 +1,48 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useState } from 'react'
 import Navbar from './navbar/Navbar'
 
 type LayoutProps = {
   sidebarContentLeft?: ReactNode
   children: ReactNode
-  sidebarContentRight: ReactNode
+  sidebarContentRight?: ReactNode
 }
 
 export default function Layout({
   sidebarContentLeft,
   children,
   sidebarContentRight,
 }: LayoutProps) {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   return (
     <div className="mx-auto bg-gray-200 dark:bg-dark-800 min-h-screen">
-      <Navbar />
-      <div className="grid grid-cols-9 gap-10 mt-10 px-60 pt-10">
+      <Navbar isDrawerOpen={isDrawerOpen} setIsDrawerOpen={setIsDrawerOpen} />
+      {sidebarContentLeft && (
+        <aside
+          className={`col-span-2 md:hidden mt-16 ${
+            isDrawerOpen ? 'block' : 'hidden'
+          }`}
+        >
+          {sidebarContentLeft}
+        </aside>
+      )}
+      <div className="grid grid-cols-9 gap-10 mt-10 px-4 md:px-10 xl:px-60 md:pt-10 ">
         {sidebarContentLeft && (
-          <aside className="col-span-2">{sidebarContentLeft}</aside>
+          <aside className="col-span-2 hidden md:block">
+            {sidebarContentLeft}
+          </aside>
         )}
-        <main className={sidebarContentLeft ? 'col-span-5' : 'col-span-7'}>
+        <main
+          className={
+            sidebarContentLeft ? 'col-span-9 md:col-span-5' : 'md:col-span-7'
+          }
+        >
           {children}
         </main>
-        <aside className="col-span-2">{sidebarContentRight}</aside>
+        {sidebarContentRight && (
+          <aside className="col-span-2 hidden md:block">
+            {sidebarContentRight}
+          </aside>
+        )}
       </div>
       <div></div>
     </div>

src/components/navbar/HamburgerButton.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+type HamburgerMenuProps = {
+  className?: string
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}
+
+const HamburgerMenu = ({
+  className,
+  isOpen,
+  setIsOpen,
+}: HamburgerMenuProps) => {
+  const genericHamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300`
+
+  return (
+    <button
+      className={`flex flex-col h-10 w-10 rounded justify-center items-center group ${className}`}
+      onClick={() => setIsOpen(!isOpen)}
+    >
+      <div
+        className={`${genericHamburgerLine} ${
+          isOpen
+            ? 'rotate-45 translate-y-2 opacity-50 group-hover:opacity-100'
+            : 'opacity-50 group-hover:opacity-100'
+        }`}
+      />
+      <div
+        className={`${genericHamburgerLine} ${
+          isOpen ? 'opacity-0' : 'opacity-50 group-hover:opacity-100'
+        }`}
+      />
+      <div
+        className={`${genericHamburgerLine} ${
+          isOpen
+            ? '-rotate-45 -translate-y-2 opacity-50 group-hover:opacity-100'
+            : 'opacity-50 group-hover:opacity-100'
+        }`}
+      />
+    </button>
+  )
+}
+
+export default HamburgerMenu

src/components/navbar/Navbar.tsx

@@ -3,11 +3,17 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 import Button from '../Button'
+import HamburgerMenu from './HamburgerButton'
 const ThemeButton = dynamic(() => import('./ThemeButton'), {
   ssr: false,
 })
 
-export default function Navbar() {
+type NavbarProps = {
+  isDrawerOpen: boolean
+  setIsDrawerOpen: (isOpen: boolean) => void
+}
+
+export default function Navbar({ isDrawerOpen, setIsDrawerOpen }: NavbarProps) {
   const router = useRouter()
   const { pathname } = router
   return (
@@ -18,7 +24,7 @@ export default function Navbar() {
             <div className="logo w-10 h-10"></div>
           </a>
         </Link>
-        <div className="space-x-4">
+        <div className="space-x-4 flex">
           <ThemeButton />
           {pathname !== '/story' && (
             <Button>
@@ -27,6 +33,11 @@ export default function Navbar() {
               </Link>
             </Button>
           )}
+          <HamburgerMenu
+            className="lg:hidden"
+            isOpen={isDrawerOpen}
+            setIsOpen={setIsDrawerOpen}
+          />
         </div>
       </div>
       <style jsx>{`

src/pages/index.tsx

@@ -36,10 +36,7 @@ const Home = ({
   }
 
   return (
-    <Layout
-      sidebarContentLeft={leftSidebar}
-      sidebarContentRight={<div>Promoted</div>}
-    >
+    <Layout sidebarContentLeft={leftSidebar}>
       <>
         <Feed root={query} />
       </>