From 1272ecd6f285acd41c7ac78c878334cc669c2d44 Mon Sep 17 00:00:00 2001 From: Junhyuck Ko <56826914+mrbartrns@users.noreply.github.com> Date: Tue, 18 Jul 2023 13:50:05 +0900 Subject: [PATCH] =?UTF-8?q?Navigation=20=EC=82=AC=EC=9A=A9=EC=84=B1=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EB=B6=80=EA=B0=80=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(#191)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(NavigationLink): separate data and views * feat: refactor NavigationBar * feat: create PostTitle on NavigationBar * fix: content id duplication issues * fix: google font error --- .../NavigationBar/NavigationBar.tsx | 222 +++++++++++++----- .../NavigationBar/ThemeToggleButton.tsx | 23 +- src/components/Post/PostDetail/PostAside.tsx | 4 +- .../Post/PostDetail/PostContent.tsx | 6 +- src/components/Post/PostDetail/PostHeader.tsx | 3 +- src/components/Post/PostDetail/PostNavbar.tsx | 6 +- src/components/common/Footer/Footer.tsx | 9 +- 7 files changed, 200 insertions(+), 73 deletions(-) diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx index 1983644..6a4f003 100644 --- a/src/components/NavigationBar/NavigationBar.tsx +++ b/src/components/NavigationBar/NavigationBar.tsx @@ -1,24 +1,16 @@ -import { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import classNames from 'classnames'; import dynamic from 'next/dynamic'; -import { Noto_Sans_KR } from 'next/font/google'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { FaGithub } from 'react-icons/fa'; import Icon from '../icons'; -import { Item } from './Item'; import styles from './NavigationBar.module.scss'; const ThemeToggleButton = dynamic(() => import('./ThemeToggleButton'), { ssr: false, }); -const notoSans = Noto_Sans_KR({ - weight: '500', - style: ['normal'], - subsets: ['latin'], -}); - // TODO - show floating menu button when display size is under sm const NavigationBar = () => { const [isOpen, setIsOpen] = useState(false); @@ -55,30 +47,10 @@ const NavigationBar = () => { 'mx-auto' )} > -
- - BenLog - -
-
- - -
-
- - -
+ + + + {/** hidden part of NavigationBar */} {isOpen ? ( @@ -92,32 +64,174 @@ const NavigationBar = () => { export default NavigationBar; -const NavigationLinks = () => { +const Left = () => { + return ( +
+ +
+ ); +}; + +const Logo = () => { + return ( + + BenLog + + ); +}; + +const Right = () => { + return ( +
+ + +
+ ); +}; + +const Middle = () => { const router = useRouter(); + const [isShowing, setIsShowing] = useState(false); + const [postTitle, setPostTitle] = useState(''); + + useEffect(() => { + const isPostPath = getSubDomain(router.pathname) === 'posts'; + setIsShowing(isPostPath); + }, [router.pathname]); + + useEffect(() => { + const handler = () => { + const title = document.querySelector('.post-title'); + + if (!title) return; + + setPostTitle(title.textContent || ''); + }; + + handler(); + + router.events.on('routeChangeComplete', handler); + + return () => { + router.events.off('routeChangeComplete', handler); + }; + }, [router.events]); + return ( - <> - - Posts - - - About - +
+ {postTitle} +
+ ); +}; + +interface HiddenComponentProps { + onClick?: React.MouseEventHandler; +} + +const Hidden = ({ onClick }: HiddenComponentProps) => { + return ( +
+ + +
+ ); +}; + +interface NavigationLinkProps { + href: string; + children?: React.ReactNode; +} + +const getPathname = (href: string) => { + if (href[0] !== '/') { + return href; + } + + return href.slice(1); +}; + +const NavigationLink = ({ href, children }: NavigationLinkProps) => { + const router = useRouter(); + const pathname = getPathname(href); + const isExternalLink = href === pathname; + + return ( +
  • - - - + {children} +
    • + ); +}; + +const NavigationLinks = () => { + const links = [ + { + href: '/posts', + children: 'Posts', + }, + { + href: '/about', + children: 'About', + }, + { + href: 'https://github.com/mrbartrns', + children: , + }, + ]; + return ( + <> + {links.map((link) => ( + + {link.children} + + ))} ); }; diff --git a/src/components/NavigationBar/ThemeToggleButton.tsx b/src/components/NavigationBar/ThemeToggleButton.tsx index 927cb29..6c959b0 100644 --- a/src/components/NavigationBar/ThemeToggleButton.tsx +++ b/src/components/NavigationBar/ThemeToggleButton.tsx @@ -1,16 +1,33 @@ import classNames from 'classnames'; import { MdOutlineLightMode, MdOutlineDarkMode } from 'react-icons/md'; import useTheme from '~/lib/styles/useTheme'; -import { Item } from './Item'; import type { Theme } from '~/lib/styles/types'; const ThemeToggleButton = () => { const [theme, toggle] = useTheme(); return ( - +
    - +
    ); }; diff --git a/src/components/Post/PostDetail/PostAside.tsx b/src/components/Post/PostDetail/PostAside.tsx index 212384c..123947e 100644 --- a/src/components/Post/PostDetail/PostAside.tsx +++ b/src/components/Post/PostDetail/PostAside.tsx @@ -55,7 +55,7 @@ const PostAside = () => {