diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx index 8a10573..2f63e03 100644 --- a/src/components/ui/Navbar.tsx +++ b/src/components/ui/Navbar.tsx @@ -1,45 +1,63 @@ -/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ -/* eslint-disable jsx-a11y/label-has-associated-control */ -/* eslint-disable jsx-a11y/label-has-for */ - -import UserContext from '@/contexts/userContext'; +import useMediaQuery from '@/hooks/useMediaQuery'; +import useNavbar from '@/hooks/useNavbar'; import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { useContext, useEffect, useState } from 'react'; +import { FC } from 'react'; + +import { GiHamburgerMenu } from 'react-icons/gi'; + +const DesktopLinks: FC = () => { + const { pages, currentURL } = useNavbar(); + + return ( +
+ +
+ ); +}; + +const MobileLinks: FC = () => { + const { pages } = useNavbar(); + return ( +
+
+ + +
+
+ ); +}; -interface Page { - slug: string; - name: string; -} const Navbar = () => { - const router = useRouter(); - const [currentURL, setCurrentURL] = useState('/'); - - const { user } = useContext(UserContext); - - useEffect(() => { - setCurrentURL(router.asPath); - }, [router.asPath]); - - const authenticatedPages: readonly Page[] = [ - { slug: '/account', name: 'Account' }, - { slug: '/api/users/logout', name: 'Logout' }, - ]; - - const unauthenticatedPages: readonly Page[] = [ - { slug: '/login', name: 'Login' }, - { slug: '/register', name: 'Register' }, - ]; - - const otherPages: readonly Page[] = [ - { slug: '/beers', name: 'Beers' }, - { slug: '/breweries', name: 'Breweries' }, - ]; - - const pages: readonly Page[] = [ - ...otherPages, - ...(user ? authenticatedPages : unauthenticatedPages), - ]; + const isDesktopView = useMediaQuery('(min-width: 1024px)'); return ( ); }; diff --git a/src/hooks/useNavbar.ts b/src/hooks/useNavbar.ts new file mode 100644 index 0000000..73f90e8 --- /dev/null +++ b/src/hooks/useNavbar.ts @@ -0,0 +1,64 @@ +import UserContext from '@/contexts/userContext'; +import { useRouter } from 'next/router'; +import { useState, useEffect, useContext } from 'react'; + +interface Page { + slug: string; + name: string; +} + +/** + * A custom hook that returns the current URL and the pages to display in the navbar. It + * uses the user context to determine whether the user is authenticated or not. + * + * @returns An object containing the current URL and the pages to display in the navbar. + */ +const useNavbar = () => { + const router = useRouter(); + const [currentURL, setCurrentURL] = useState('/'); + + const { user } = useContext(UserContext); + + const authenticatedPages: readonly Page[] = [ + { slug: '/account', name: 'Account' }, + { slug: '/api/users/logout', name: 'Logout' }, + ]; + + const unauthenticatedPages: readonly Page[] = [ + { slug: '/login', name: 'Login' }, + { slug: '/register', name: 'Register' }, + ]; + + /** These pages are accessible to both authenticated and unauthenticated users. */ + const otherPages: readonly Page[] = [ + { slug: '/beers', name: 'Beers' }, + { slug: '/breweries', name: 'Breweries' }, + ]; + + /** + * The pages to display in the navbar. If the user is authenticated, the authenticated + * pages are displayed. Otherwise, the unauthenticated pages are displayed. The other + * pages are always displayed. + */ + const pages: readonly Page[] = [ + ...otherPages, + ...(user ? authenticatedPages : unauthenticatedPages), + ]; + + /** + * Sets the current URL to the current URL when the router's asPath changes. This + * ensures that the current URL is always up to date. When the component unmounts, the + * current URL is set to '/'. + */ + useEffect(() => { + setCurrentURL(router.asPath); + + return () => { + setCurrentURL('/'); + }; + }, [router.asPath]); + + return { currentURL, pages }; +}; + +export default useNavbar; diff --git a/src/pages/beers/[id]/index.tsx b/src/pages/beers/[id]/index.tsx index f4d4d81..d3c21bb 100644 --- a/src/pages/beers/[id]/index.tsx +++ b/src/pages/beers/[id]/index.tsx @@ -29,7 +29,7 @@ interface BeerPageProps { } const BeerByIdPage: NextPage = ({ beerPost, beerRecommendations }) => { - const isMd = useMediaQuery('(min-width: 768px)'); + const isDesktop = useMediaQuery('(min-width: 1024px)'); return ( <> @@ -64,7 +64,7 @@ const BeerByIdPage: NextPage = ({ beerPost, beerRecommendations }
- {isMd ? ( + {isDesktop ? (
@@ -75,12 +75,12 @@ const BeerByIdPage: NextPage = ({ beerPost, beerRecommendations }
) : ( - - + + Comments - - Recommendations + + Other Beers diff --git a/src/pages/user/current.tsx b/src/pages/user/current.tsx index 7f690ae..209f477 100644 --- a/src/pages/user/current.tsx +++ b/src/pages/user/current.tsx @@ -5,29 +5,33 @@ import UserContext from '@/contexts/userContext'; import { GetServerSideProps, NextPage } from 'next'; import { useContext } from 'react'; +import useMediaQuery from '@/hooks/useMediaQuery'; const ProtectedPage: NextPage = () => { const { user, isLoading } = useContext(UserContext); const currentTime = new Date().getHours(); - const isMorning = currentTime > 4 && currentTime < 12; - const isAfternoon = currentTime > 12 && currentTime < 18; - const isEvening = (currentTime > 18 && currentTime < 24) || currentTime < 4; + const isMorning = currentTime >= 3 && currentTime < 12; + const isAfternoon = currentTime >= 12 && currentTime < 18; + const isEvening = currentTime >= 18 || currentTime < 3; + const isDesktop = useMediaQuery('(min-width: 768px)'); return ( -
- {isLoading && } - {user && ( +
+ {isLoading && } + {user && !isLoading && ( <> -

+

Good {isMorning && 'morning'} {isAfternoon && 'afternoon'} {isEvening && 'evening'} {`, ${user?.firstName}!`}

-

Welcome to the Biergarten App!

+

+ Welcome to the Biergarten App! +

)}
diff --git a/src/styles/globals.css b/src/styles/globals.css index b5c61c9..2505039 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.card { + @apply shadow-md +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index d797873..c5a68a2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ //themes -const myTheme = { +const darkTheme = { default: { primary: 'hsl(227, 23%, 20%)', secondary: 'hsl(255, 9%, 69%)', @@ -20,7 +20,7 @@ const myTheme = { const pastelTheme = { default: { - primary: 'hsl(180, 28%, 65%)', + primary: 'hsl(180, 15%, 60%)', secondary: 'hsl(21, 54%, 83%)', error: 'hsl(4, 87%, 74%)', accent: 'hsl(93, 27%, 73%)', @@ -33,7 +33,6 @@ const pastelTheme = { 'base-100': 'hsl(0, 0%, 85%)', 'base-200': 'hsl(0, 0%, 82%)', 'base-300': 'hsl(0, 0%, 78%)', - 'base-400': 'hsl(0, 0%, 75%)', }, }; @@ -55,6 +54,6 @@ module.exports = { daisyui: { logs: false, - themes: [myTheme], + themes: [darkTheme, pastelTheme], }, };