Move navbar to site layout component

mcstatus-io · Mar 9, 2024 · 545d74f · 545d74f
1 parent 4ae7160
commit 545d74f
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 50 deletions.
diff --git a/src/app/about/page.js b/src/app/about/page.js
@@ -7,7 +7,6 @@ import mineatarIcon from '@/assets/img/mineatar.png';
 import serverFlexIcon from '@/assets/img/serverflex.png';
 import CarbonAd from '@/components/CarbonAd';
 import Collapsible from '@/components/Collapsible';
-import Navbar from '@/components/layout/Navbar';
 
 const frequentlyAskedQuestions = [
     {
@@ -110,7 +109,6 @@ export const metadata = {
 export default function Page() {
     return (
         <>
-            <Navbar active="about" />
             <div className="container">
                 <section>
                     <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">

diff --git a/src/app/docs/page.js b/src/app/docs/page.js
@@ -10,7 +10,6 @@ import CarbonAd from '@/components/CarbonAd';
 import Collapsible from '@/components/Collapsible';
 import Highlight from '@/components/Highlight';
 import RevisionsTable, { RevisionRow } from '@/components/docs/RevisionsTable';
-import Navbar from '@/components/layout/Navbar';
 
 export const metadata = {
     title: 'API Documentation',
@@ -38,7 +37,6 @@ export const metadata = {
 export default function Page() {
     return (
         <>
-            <Navbar active="api" />
             <div className="container">
                 <section>
                     <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -4,6 +4,7 @@ import { Fira_Mono, Inter } from 'next/font/google';
 import Script from 'next/script';
 import ServiceWorker from '@/components/ServiceWorker';
 import Footer from '@/components/layout/Footer';
+import Navbar from '@/components/layout/Navbar';
 
 const interFont = Inter({
     variable: '--font-inter',
@@ -112,6 +113,7 @@ export default function RootLayout({ children }) {
                                 </alert>
                             </div>
                         </noscript>
+                        <Navbar />
                         {children}
                         <ServiceWorker />
                     </div>

diff --git a/src/app/page.js b/src/app/page.js
@@ -9,14 +9,12 @@ import serverFlexIcon from '@/assets/img/serverflex.png';
 import CarbonAd from '@/components/CarbonAd';
 import SampleServers from '@/components/SampleServers';
 import LookupForm from '@/components/layout/LookupForm';
-import Navbar from '@/components/layout/Navbar';
 
 export const revalidate = 30;
 
 export default function Page() {
     return (
         <>
-            <Navbar active="home" />
             <div className="container">
                 <section>
                     <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">

diff --git a/src/app/servers/page.js b/src/app/servers/page.js
@@ -1,7 +1,6 @@
 import sampleServers from '@/assets/servers';
 import CarbonAd from '@/components/CarbonAd';
 import ServerListing from '@/components/ServerListing';
-import Navbar from '@/components/layout/Navbar';
 
 export const metadata = {
     title: 'Sample Servers',
@@ -29,7 +28,6 @@ export const metadata = {
 export default function Page() {
     return (
         <>
-            <Navbar />
             <div className="container">
                 <section>
                     <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">

diff --git a/src/app/status/[type]/[address]/layout.js b/src/app/status/[type]/[address]/layout.js
@@ -1,7 +1,6 @@
 import { notFound } from 'next/navigation';
 import CarbonAd from '@/components/CarbonAd';
 import LookupForm from '@/components/layout/LookupForm';
-import Navbar from '@/components/layout/Navbar';
 import { Suspense } from 'react';
 import Loading from '@/app/status/[type]/[address]/loading';
 
@@ -11,23 +10,20 @@ export default function RootLayout({ children, params: { type, address } }) {
     if (type !== 'java' && type !== 'bedrock') return notFound();
 
     return (
-        <>
-            <Navbar />
-            <div className="container">
-                <section>
-                    <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">
-                        <hgroup>
-                            <h1 className="title">Minecraft Server Status</h1>
-                            <p className="subtitle">Quickly retrieve the status of any Minecraft server</p>
-                        </hgroup>
-                        <CarbonAd />
-                    </div>
-                    <LookupForm type={type} address={address} className="mt-5" />
-                </section>
-                <Suspense fallback={<Loading />}>
-                    {children}
-                </Suspense>
-            </div>
-        </>
+        <div className="container">
+            <section>
+                <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">
+                    <hgroup>
+                        <h1 className="title">Minecraft Server Status</h1>
+                        <p className="subtitle">Quickly retrieve the status of any Minecraft server</p>
+                    </hgroup>
+                    <CarbonAd />
+                </div>
+                <LookupForm type={type} address={address} className="mt-5" />
+            </section>
+            <Suspense fallback={<Loading />}>
+                {children}
+            </Suspense>
+        </div>
     );
 }
diff --git a/src/app/tools/motd/page.js b/src/app/tools/motd/page.js
@@ -2,7 +2,6 @@ import Link from 'next/link';
 import { Suspense } from 'react';
 import ChevronRightIcon from '@/assets/icons/chevron-right.svg';
 import CarbonAd from '@/components/CarbonAd';
-import Navbar from '@/components/layout/Navbar';
 import MOTDEditor from '@/components/tools/MOTDEditor';
 
 export const metadata = {
@@ -31,7 +30,6 @@ export const metadata = {
 export default function Page() {
     return (
         <>
-            <Navbar active="tools" />
             <div className="container">
                 <section>
                     <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">

diff --git a/src/app/tools/page.js b/src/app/tools/page.js
@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import ExternalLinkIcon from '@/assets/icons/external-link.svg';
 import CarbonAd from '@/components/CarbonAd';
-import Navbar from '@/components/layout/Navbar';
 
 export const metadata = {
     title: 'Tools',
@@ -29,7 +28,6 @@ export const metadata = {
 export default function Page() {
     return (
         <>
-            <Navbar active="tools" />
             <div className="container">
                 <section>
                     <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">

diff --git a/src/app/tools/vote/page.js b/src/app/tools/vote/page.js
@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import ChevronRightIcon from '@/assets/icons/chevron-right.svg';
 import CarbonAd from '@/components/CarbonAd';
-import Navbar from '@/components/layout/Navbar';
 import VotifierTester from '@/components/tools/VotifierTester';
 
 export const metadata = {
@@ -30,7 +29,6 @@ export const metadata = {
 export default function Page() {
     return (
         <>
-            <Navbar active="tools" />
             <div className="container">
                 <section>
                     <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-end">

diff --git a/src/components/layout/Navbar.js b/src/components/layout/Navbar.js
@@ -10,8 +10,10 @@ import GithubIcon from '@/assets/icons/github.svg';
 import MenuIcon from '@/assets/icons/menu.svg';
 import CloseIcon from '@/assets/icons/x.svg';
 import icon from '@/assets/img/icon.png';
+import { usePathname } from 'next/navigation';
 
-export default function Navbar({ active }) {
+export default function Navbar() {
+    const path = usePathname();
     const [showMenu, setShowMenu] = useState(false);
 
     useEffect(() => {
@@ -42,29 +44,29 @@ export default function Navbar({ active }) {
                 <ul className={`list-none text-neutral-500 dark:text-neutral-400 ${showMenu ? 'flex flex-col justify-center absolute top-0 left-0 bg-neutral-900 bg-opacity-90 backdrop-blur-lg w-[100vw] h-[100vh] z-40' : 'hidden md:flex'} gap-4 items-center grow`}>
                     <li>
                         <Link href="/">
-                            <div className={`p-1 ${showMenu && active === 'home' ? 'text-white' : active === 'home' ? 'text-black dark:text-white' : showMenu ? 'text-neutral-400' : 'hover:text-black hover:dark:text-white'}`}>
+                            <div className={`p-1 ${path === '/' ? 'text-white' : 'text-neutral-400 md:hover:text-black md:hover:dark:text-white'}`}>
                                 <span>Home</span>
                             </div>
                         </Link>
                     </li>
                     <li>
                         <Link href="/tools">
-                            <div className={`p-1 ${showMenu && active === 'tools' ? 'text-white' : active === 'tools' ? 'text-black dark:text-white' : showMenu ? 'text-neutral-400' : 'hover:text-black hover:dark:text-white'}`}>
+                            <div className={`p-1 ${path.startsWith('/tools') ? 'text-white' : 'text-neutral-400 md:hover:text-black md:hover:dark:text-white'}`}>
                                 <span>Tools</span>
                             </div>
                         </Link>
                     </li>
                     <li>
                         <Link href="/docs">
-                            <div className={`p-1 ${showMenu && active === 'api' ? 'text-white' : active === 'api' ? 'text-black dark:text-white' : showMenu ? 'text-neutral-400' : 'hover:text-black hover:dark:text-white'}`}>
-                                <span className="hidden md:block">API</span>
-                                <span className="block md:hidden">API Documentation</span>
+                            <div className={`p-1 ${path.startsWith('/docs') ? 'text-white' : 'text-neutral-400 md:hover:text-black md:hover:dark:text-white'}`}>
+                                <span>API</span>
+                                <span className="md:hidden"> Documentation</span>
                             </div>
                         </Link>
                     </li>
                     <li className="md:mr-auto">
                         <Link href="/about">
-                            <div className={`p-1 ${showMenu && active === 'about' ? 'text-white' : active === 'about' ? 'text-black dark:text-white' : showMenu ? 'text-neutral-400' : 'hover:text-black hover:dark:text-white'}`}>
+                            <div className={`p-1 ${path.startsWith('/about') ? 'text-white' : 'text-neutral-400 md:hover:text-black md:hover:dark:text-white'}`}>
                                 <span>About</span>
                             </div>
                         </Link>
@@ -87,16 +89,12 @@ export default function Navbar({ active }) {
                             <span className="font-bold md:sr-only">Status Page</span>
                         </a>
                     </li>
-                    {
-                        process.env.NEXT_PUBLIC_DASHBOARD
-                            ? <li>
-                                <a href={process.env.NEXT_PUBLIC_DASHBOARD} className="flex items-center gap-2 px-4 py-2 text-black rounded-full button button-border dark:text-white">
-                                    <span>Dashboard</span>
-                                    <ToolIcon width="18" height="18" />
-                                </a>
-                            </li>
-                            : null
-                    }
+                    <li>
+                        <a href={process.env.NEXT_PUBLIC_DASHBOARD || 'https://dashboard.mcstatus.io'} className="flex items-center gap-2 px-4 py-2 text-black rounded-full button button-border dark:text-white">
+                            <span>Dashboard</span>
+                            <ToolIcon width="18" height="18" />
+                        </a>
+                    </li>
                 </ul>
             </div>
         </nav>