Merge pull request #65 from 202306-NEA-DZ-FEW/5-navbar

5 navbar
202306-NEA-DZ-FEW · Oct 25, 2023 · dd8b246 · dd8b246
2 parents dfccb29 + 5239598
commit dd8b246
Show file tree

Hide file tree

Showing 7 changed files with 364 additions and 1 deletion.
diff --git a/public/images/account.svg b/public/images/account.svg
diff --git a/public/images/ar-flag.svg b/public/images/ar-flag.svg
diff --git a/public/images/en-flag.svg b/public/images/en-flag.svg
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/components/navbar/AccountMenu.jsx b/src/components/navbar/AccountMenu.jsx
@@ -0,0 +1,57 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { BiLogOut } from "react-icons/bi";
+import { MdAccountCircle } from "react-icons/md";
+
+const AccountMenu = ({ logout }) => {
+    const [openMenu, setOpenMenu] = useState(false);
+
+    return (
+        <div className='relative items-center justify-end hidden md:flex '>
+            <button
+                onClick={() => setOpenMenu(!openMenu)}
+                className='text-base font-medium text-black whitespace-nowrap hover:text-green'
+            >
+                <Image
+                    src='/images/account.svg'
+                    width={36}
+                    height={36}
+                    alt='account'
+                />
+            </button>
+            <div
+                className={`${
+                    openMenu ? "block" : "hidden"
+                } absolute top-[115%]  -right-4 transition p-3 w-48 h-fit bg-white shadow-lg rounded-lg`}
+            >
+                <div className='flex flex-col gap-4'>
+                    <Link
+                        href='/account'
+                        className='   text-black whitespace-nowrap hover:text-green'
+                    >
+                        <div className='flex flex-row items-center gap-3'>
+                            <MdAccountCircle className='text-3xl ' />
+                            <span className='text-lg font-medium'>
+                                Your account
+                            </span>
+                        </div>
+                    </Link>
+                    <button
+                        onClick={logout}
+                        className='text-red whitespace-nowrap hover:opacity-75'
+                    >
+                        <div className='flex flex-row items-center gap-4 '>
+                            <BiLogOut className='text-3xl  -ml-1' />
+                            <span className='text-lg font-medium '>
+                                Log Out
+                            </span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AccountMenu;
diff --git a/src/components/navbar/LanguageMenu.jsx b/src/components/navbar/LanguageMenu.jsx
@@ -0,0 +1,75 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+const LanguageMenu = () => {
+    const [language, setLanguage] = useState("en");
+    const [openMenu, setOpenMenu] = useState(false);
+
+    return (
+        <div className='relative items-center justify-end hidden md:flex '>
+            <button
+                onClick={() => setOpenMenu(!openMenu)}
+                className='text-base font-medium text-black whitespace-nowrap hover:text-green'
+            >
+                <Image
+                    src={`/images/${language}-flag.svg`}
+                    width={36}
+                    height={36}
+                    alt={language == "en" ? "English" : "Arabic"}
+                />
+            </button>
+            <div
+                className={`${
+                    openMenu ? "block" : "hidden"
+                } absolute top-[115%]  -right-4 transition p-3 w-48 h-fit bg-white shadow-lg rounded-lg`}
+            >
+                <div className='flex flex-col gap-4'>
+                    <Link
+                        href='/'
+                        locale='en'
+                        className='   text-black whitespace-nowrap hover:text-green'
+                    >
+                        <div
+                            className='flex flex-row items-center gap-5'
+                            onClick={() => {
+                                setLanguage("en");
+                                setOpenMenu(false);
+                            }}
+                        >
+                            <Image
+                                src='/images/en-flag.svg'
+                                width={36}
+                                height={36}
+                                alt='English'
+                            />
+                            <span className='text-lg font-medium'>English</span>
+                        </div>
+                    </Link>
+                    <Link
+                        href='/'
+                        locale='ar'
+                        className=' text-base font-medium text-black whitespace-nowrap hover:text-green'
+                    >
+                        <div
+                            className='flex flex-row items-center gap-5'
+                            onClick={() => {
+                                setLanguage("ar");
+                                setOpenMenu(false);
+                            }}
+                        >
+                            <Image
+                                src='/images/ar-flag.svg'
+                                width={36}
+                                height={36}
+                                alt='Arabic'
+                            />
+                            <span className='text-xl font-medium'>العربية</span>
+                        </div>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default LanguageMenu;