From 7327a69b55a20b99b14ee0803d6cf5f8b88c45ef Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 13 Sep 2023 00:45:53 +0700 Subject: Update v4 - Merge pre-push to main (#71) * Create build-test.yml * initial v4 commit * update: github workflow * update: push on branch * Update .github/ISSUE_TEMPLATE/bug_report.md * configuring next.config.js file --- components/shared/MobileNav.js | 170 ++++++++++++++++++++++++++++++++ components/shared/hamburgerMenu.js | 192 +++++++++++++++++++++++++++++++++++++ components/shared/loading.js | 20 ++++ 3 files changed, 382 insertions(+) create mode 100644 components/shared/MobileNav.js create mode 100644 components/shared/hamburgerMenu.js create mode 100644 components/shared/loading.js (limited to 'components/shared') diff --git a/components/shared/MobileNav.js b/components/shared/MobileNav.js new file mode 100644 index 0000000..6dd1e64 --- /dev/null +++ b/components/shared/MobileNav.js @@ -0,0 +1,170 @@ +import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; +import { CalendarIcon, ClockIcon, HomeIcon } from "@heroicons/react/24/outline"; +import { signIn, signOut } from "next-auth/react"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useState } from "react"; + +export default function MobileNav({ sessions, hideProfile = false }) { + const [isVisible, setIsVisible] = useState(false); + + const handleShowClick = () => { + setIsVisible(true); + }; + + const handleHideClick = () => { + setIsVisible(false); + }; + return ( + <> + {/* NAVBAR */} +
+ {!isVisible && ( + + )} +
+ + {/* Mobile Menu */} +
+ {isVisible && sessions && !hideProfile && ( + + user avatar + + )} + {isVisible && ( +
+
+ + + + {sessions ? ( + + ) : ( + + )} +
+ +
+ )} +
+ + ); +} diff --git a/components/shared/hamburgerMenu.js b/components/shared/hamburgerMenu.js new file mode 100644 index 0000000..7e4bdf1 --- /dev/null +++ b/components/shared/hamburgerMenu.js @@ -0,0 +1,192 @@ +import { signIn, signOut, useSession } from "next-auth/react"; +import Image from "next/image"; +import Link from "next/link"; +import React, { useState } from "react"; + +export default function HamburgerMenu() { + const { data: session } = useSession(); + const [isVisible, setIsVisible] = useState(false); + const [fade, setFade] = useState(false); + + const handleShowClick = () => { + setIsVisible(true); + setFade(true); + }; + + const handleHideClick = () => { + setIsVisible(false); + setFade(false); + }; + + return ( + + {/* Mobile Hamburger */} + {!isVisible && ( + + )} +
+ {isVisible && ( +
+
+ + + + {session ? ( + + ) : ( + + )} +
+ +
+ )} +
+ + ); +} diff --git a/components/shared/loading.js b/components/shared/loading.js new file mode 100644 index 0000000..4620645 --- /dev/null +++ b/components/shared/loading.js @@ -0,0 +1,20 @@ +import Image from "next/image"; + +export default function Loading() { + return ( + <> +
+ {/* */} +
+

Please Wait...

+
+
+
+ + ); +} -- cgit v1.2.3