From 34fb17798148c94d91c7e0f8a83480af56333d9e Mon Sep 17 00:00:00 2001
From: victorbruce <victorbruce82@gmail.com>
Date: Fri, 23 Sep 2022 17:55:08 +0000
Subject: [PATCH] make navbar responsive

---
 .eslintcache                                  |  2 +-
 src/components/DropDown/LanguageSwitcher.tsx  |  2 +-
 src/components/DropDown/ToggleThemeButton.tsx |  2 +-
 src/layouts/AppLayout/index.tsx               |  1 +
 src/layouts/Navigation/index.tsx              | 48 ++++++++++++++++++-
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/.eslintcache b/.eslintcache
index 9ca6d9a..c77f29d 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/Users/victorbruce/Projects/web-development/next-starter/tailwind.config.js":"1"},{"size":776,"mtime":1663665473166,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","suppressedMessages":"6","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"d63bkn","/Users/victorbruce/Projects/web-development/next-starter/tailwind.config.js",[],[]]
\ No newline at end of file
+[{"/Users/victorbruce/Projects/web-development/next-starter/tailwind.config.js":"1"},{"size":871,"mtime":1663845585796,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","suppressedMessages":"6","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"d63bkn","/Users/victorbruce/Projects/web-development/next-starter/tailwind.config.js",[],[]]
\ No newline at end of file
diff --git a/src/components/DropDown/LanguageSwitcher.tsx b/src/components/DropDown/LanguageSwitcher.tsx
index 9c67986..51c02e6 100644
--- a/src/components/DropDown/LanguageSwitcher.tsx
+++ b/src/components/DropDown/LanguageSwitcher.tsx
@@ -31,7 +31,7 @@ const LanguageSwitcher = () => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute -top-24 md:top-10 right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           <div className="py-1">
             {locales?.map((l) => {
               return (
diff --git a/src/components/DropDown/ToggleThemeButton.tsx b/src/components/DropDown/ToggleThemeButton.tsx
index 7048a52..22996a5 100644
--- a/src/components/DropDown/ToggleThemeButton.tsx
+++ b/src/components/DropDown/ToggleThemeButton.tsx
@@ -55,7 +55,7 @@ const DropDown = (): JSX.Element | null => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-dropdownBg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ">
+        <Menu.Items className="absolute -top-32 md:top-10 right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-dropdownBg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ">
           <div className="py-1">
             <Menu.Item>
               {({ active }) => (
diff --git a/src/layouts/AppLayout/index.tsx b/src/layouts/AppLayout/index.tsx
index 0eea16d..8144858 100644
--- a/src/layouts/AppLayout/index.tsx
+++ b/src/layouts/AppLayout/index.tsx
@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 // components
 import Navigation from "layouts/Navigation";
 
+
 interface AppLayoutProps {
   children: ReactNode;
 }
diff --git a/src/layouts/Navigation/index.tsx b/src/layouts/Navigation/index.tsx
index 411611c..47c582c 100644
--- a/src/layouts/Navigation/index.tsx
+++ b/src/layouts/Navigation/index.tsx
@@ -1,10 +1,12 @@
+import { useState } from "react";
 import Link from "next/link";
-
+import { Bars2Icon, XMarkIcon } from "@heroicons/react/20/solid";
 // components
 import ToggleThemeButton from "components/DropDown/ToggleThemeButton";
 import LanguageSwitcher from "components/DropDown/LanguageSwitcher";
 
 const Navigation = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   return (
     <header className="w-full sticky top-0 z-[1000px] border-b border-borderColor backdrop-blur">
       <nav className="max-w-7xl px-4 mx-auto flex justify-between items-center h-[80px]">
@@ -18,7 +20,24 @@ const Navigation = () => {
             </a>
           </Link>
         </div>
-        <ul className="flex gap-4 items-center ">
+        {isMenuOpen ? (
+          <button
+            className="transition focus:duration-150 focus:outline-none outline-none"
+            onClick={() => setIsMenuOpen((prevState) => !prevState)}
+          >
+            <XMarkIcon className="w-6 h-6 md:hidden" />
+          </button>
+        ) : (
+          <button
+            className="transition focus:duration-150 focus:outline-none outline-none"
+            onClick={() => setIsMenuOpen((prevState) => !prevState)}
+          >
+            <Bars2Icon className="w-6 h-6 md:hidden" />
+          </button>
+        )}
+
+        {/** Desktop */}
+        <ul className="gap-4 items-center hidden md:flex">
           <li className="border-r-2 border-borderColor px-4 flex justify-center items-center">
             <ToggleThemeButton />
           </li>
@@ -26,6 +45,31 @@ const Navigation = () => {
             <LanguageSwitcher />
           </li>
         </ul>
+
+        {/** Mobile */}
+        {isMenuOpen && (
+          <div className="absolute top-[82px] left-0 right-0 bottom-0 h-screen">
+            <div className="bg-pageBg relative w-100 h-[80vh] py-8 px-4 overflow-y-auto">
+              <nav>
+                <ul className="flex flex-col gap-4">
+                  <li>
+                    <Link href="/">About</Link>
+                  </li>
+                </ul>
+              </nav>
+              <div className="border-borderColor border-t absolute left-0 right-0 bottom-0 px-4 py-4">
+                <div className="flex justify-between items-center mb-4">
+                  <span>Switch theme:</span>
+                  <ToggleThemeButton />
+                </div>
+                <div className="flex justify-between items-center">
+                  <span>Switch language:</span>
+                  <LanguageSwitcher />
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </nav>
     </header>
   );