feat: responsive nav

app/components/ChanhDetailModal.tsx

@@ -1,7 +1,5 @@
-'use client';
 import { LinkOutlined } from '@ant-design/icons';
 import { Col, Image, message, Modal, Row } from 'antd';
-import { useEffect } from 'react';
 
 import { Update } from '../types';
 import { dateToString } from '../util/Util';
@@ -12,9 +10,6 @@ type Props = {
 };
 
 const ChanhDetailModal = (props: Props) => {
-  useEffect(() => {
-    document.getElementById(window.location.href.split('#')[1])?.click();
-  });
   const generateDetail = () => {
     if (!props.data.detail) return null;
     else {

app/components/ChanhUpdatesTable.tsx

@@ -1,5 +1,8 @@
+'use client';
+
 import { Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
+import { useEffect } from 'react';
 
 import Update from '../types/Update';
 import { dateToString } from '../util/Util';
@@ -10,6 +13,9 @@ type Props = {
 };
 
 const ChanhUpdatesTable = (props: Props) => {
+  useEffect(() => {
+    document.getElementById(window.location.href.split('#')[1])?.click();
+  });
   const columns: ColumnsType<Update> = [
     {
       width: 120,

app/components/MobileNavigation.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { DownOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
+import { useEffect, useState } from 'react';
+
+export default function MobileNavigation() {
+  const [currentPage, setCurrentPage] = useState<string>();
+  useEffect(() => {
+    setCurrentPage(window.location.pathname.replaceAll('/', ''));
+  }, []);
+
+  const pageLabel = {
+    '': 'Home',
+    updates: 'News & Updates',
+    profile: 'Profile',
+    activities: 'Activities',
+    publications: 'Publications',
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      label: (
+        <a className="chanh-mobile-nav__links" href="/">
+          Home
+        </a>
+      ),
+      key: '',
+    },
+    {
+      label: (
+        <a className="chanh-mobile-nav__links" href="/updates">
+          News & Updates
+        </a>
+      ),
+      key: 'updates',
+    },
+    {
+      label: (
+        <a className="chanh-mobile-nav__links" href="/profile">
+          Profile
+        </a>
+      ),
+      key: 'profile',
+    },
+
+    {
+      label: (
+        <a className="chanh-mobile-nav__links" href="/activities">
+          Activities
+        </a>
+      ),
+      key: 'activities',
+    },
+
+    {
+      label: (
+        <a className="chanh-mobile-nav__links" href="/publications">
+          Publications
+        </a>
+      ),
+      key: 'publications',
+    },
+  ];
+  return currentPage != undefined ? (
+    <Dropdown
+      menu={{ items }}
+      placement="bottom"
+      overlayClassName="chanh-mobile-nav"
+    >
+      <a className="chanh-nav__links chanh-mobile-nav__dropdown">
+        {pageLabel[currentPage as keyof typeof pageLabel]} <DownOutlined />
+      </a>
+    </Dropdown>
+  ) : null;
+}

app/components/Navigation.tsx

@@ -1,5 +1,12 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
 export default function Navigation() {
-  //   const router = useRouter();
+  const [currentPage, setCurrentPage] = useState<string>();
+  useEffect(() => {
+    setCurrentPage(window.location.pathname.replaceAll('/', ''));
+  }, []);
   const navLinks = [
     { href: '/', label: 'Home' },
     {
@@ -22,15 +29,19 @@ export default function Navigation() {
   function generateNavLinkElements() {
     const navLinkElements = [];
     for (const link of navLinks) {
+      const currentPageClass =
+        currentPage === link.href.replaceAll('/', '')
+          ? 'chanh-nav__links--current'
+          : '';
       navLinkElements.push(
-        <a className="chanh-nav__links" href={link.href}>
+        <a className={`chanh-nav__links ${currentPageClass}`} href={link.href}>
           {link.label}
         </a>
       );
     }
     return navLinkElements;
   }
-  return (
+  return currentPage != undefined ? (
     <div className="chanh-nav__links-wrapper">{generateNavLinkElements()}</div>
-  );
+  ) : null;
 }

app/components/icons/ClickHere.tsx

@@ -14,11 +14,11 @@ export default function ClickHere(props: Props) {
       xmlnsXlink="http://www.w3.org/1999/xlink"
       transform={props.lean == 'right' ? 'matrix(-1, 0, 0, 1, 0, 0)' : ''}
     >
-      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
       <g
         id="SVGRepo_tracerCarrier"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></g>
       <g id="SVGRepo_iconCarrier">
         <path

app/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 #chanh-header {
-  @apply block lg:hidden;
+  @apply flex justify-center items-center lg:hidden;
 }
 #chanh-sider {
   @apply hidden lg:flex lg:justify-center
@@ -46,7 +46,7 @@ table {
 p,
 span,
 a {
-  @apply !font-normal text-lg text-chanh-primary;
+  @apply !font-sans !font-normal text-lg text-chanh-primary;
 }
 
 h1,
@@ -78,10 +78,35 @@ scrollbar {
 }
 .chanh-nav__links {
   text-decoration: none;
-  @apply block py-2 px-3 rounded-2xl
+  @apply block py-1.5 my-1 px-3 rounded-full
   hover:bg-chanh-emphasize-400 focus:bg-chanh-emphasize-400
   text-2xl xl:text-3xl text-center text-chanh-secondary hover:text-chanh-secondary focus:text-chanh-secondary;
 }
+.chanh-nav__links--current {
+  @apply bg-chanh-emphasize-400;
+}
+
+.chanh-mobile-nav {
+  @apply bg-transparent;
+}
+.chanh-mobile-nav__dropdown {
+  @apply !rounded-md;
+}
+.chanh-mobile-nav .ant-dropdown-menu {
+  @apply border-2 border-chanh-emphasize shadow-xl;
+}
+.chanh-mobile-nav .ant-dropdown-menu-item {
+  @apply bg-chanh-secondary !my-1 !mx-1
+  hover:!bg-chanh-emphasize focus:!bg-chanh-emphasize
+  text-center border-chanh-emphasize border-2;
+}
+.chanh-mobile-nav .ant-dropdown-menu-item:hover .chanh-mobile-nav__links {
+  @apply !text-chanh-secondary;
+}
+.chanh-mobile-nav .chanh-mobile-nav__links {
+  @apply block w-full rounded-full py-1
+  text-2xl font-sans !text-chanh-emphasize;
+}
 
 .avatar-and-social {
   @apply text-center w-full;

app/layout.tsx

@@ -9,6 +9,7 @@ import { Lato, Lora } from 'next/font/google';
 import React, { ReactNode } from 'react';
 
 import { AvatarAndSocial, Navigation } from './components';
+import MobileNavigation from './components/MobileNavigation';
 
 const sans = Lato({
   subsets: ['latin'],
@@ -36,7 +37,7 @@ export default function RootLayout({
         <AntdRegistry>
           <Layout className="chanh-layout-wrapper">
             <Header id="chanh-header" className="chanh-nav">
-              The Header
+              <MobileNavigation />
             </Header>
             <Layout hasSider className="chanh-layout-wrapper overflow-hidden">
               <Sider id="chanh-sider" className="chanh-nav">