From 18f30724d9b16d91ebb53d4686a33731eb78fe78 Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Thu, 23 Feb 2023 21:22:50 +0000
Subject: [PATCH] Fixed router issue

---
 components/Header.tsx                | 5 +++--
 components/layouts/ArticleLayout.tsx | 9 +++------
 components/ui/Navigation.tsx         | 5 +++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 3caa32a..c2b77f0 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,4 +1,4 @@
-import {usePathname} from 'next/navigation'
+import {useRouter} from 'next/router'
 import {useEffect, useRef} from 'react'
 import {Container} from './Container'
 import {MobileNavigation, DesktopNavigation} from './ui/Navigation'
@@ -50,7 +50,8 @@ function clamp(num: number, a: number, b: number) {
 }
 
 export function Header() {
-    const isHomePage = usePathname() === '/'
+    const router = useRouter()
+    const isHomePage = router.pathname === '/'
 
     const headerRef = useRef<HTMLDivElement>(null)
     const avatarRef = useRef<HTMLImageElement>(null)
diff --git a/components/layouts/ArticleLayout.tsx b/components/layouts/ArticleLayout.tsx
index eb39ac1..9d36d2e 100644
--- a/components/layouts/ArticleLayout.tsx
+++ b/components/layouts/ArticleLayout.tsx
@@ -1,12 +1,11 @@
 import React, {ReactNode} from 'react'
 import Head from 'next/head'
-import {usePathname} from 'next/navigation'
+import Link from 'next/link'
 import {Container} from '@/components/Container'
 import {Prose} from '@/components/ui/Prose'
 import {Views} from '@/components/ui/Views'
 import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
 import {formatDate} from '@/lib/formatDate'
-import Link from 'next/link'
 
 type ArticleLayout = {
     children?: ReactNode
@@ -27,8 +26,6 @@ export function ArticleLayout({
                                   date,
                                   slug
                               }: ArticleLayout) {
-    const pathname = usePathname()
-
     if (isRssFeed) {
         return children
     }
@@ -40,7 +37,7 @@ export function ArticleLayout({
                 <meta name="description" content={description}/>
                 <meta
                     property="og:url"
-                    content={`${process.env.NEXT_PUBLIC_SITE_URL}${pathname}`}
+                    content={`${process.env.NEXT_PUBLIC_SITE_URL}/writing/${slug}`}
                 />
                 <meta
                     property="og:type"
@@ -76,7 +73,7 @@ export function ArticleLayout({
                 />
                 <meta
                     property="twitter:url"
-                    content={`${process.env.NEXT_PUBLIC_SITE_URL}${pathname}`}
+                    content={`${process.env.NEXT_PUBLIC_SITE_URL}/writing/${slug}`}
                 />
                 <meta
                     name="twitter:title"
diff --git a/components/ui/Navigation.tsx b/components/ui/Navigation.tsx
index a66e44e..52332a6 100644
--- a/components/ui/Navigation.tsx
+++ b/components/ui/Navigation.tsx
@@ -1,5 +1,5 @@
 import React, {Fragment, ReactNode} from 'react'
-import {usePathname} from 'next/navigation'
+import {useRouter} from 'next/router'
 import {Popover, Transition} from '@headlessui/react'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -76,7 +76,8 @@ export function MobileNavigation(props: Props) {
 }
 
 function NavItem({href, children}: { href: string } & Props) {
-    let isActive = usePathname() === href
+    const router = useRouter()
+    let isActive = router.pathname === href
 
     return (
         <li>