Integrate routing and fix dark mode for mobile nav menu

siddg97 · Feb 11, 2024 · 778c3b2 · 778c3b2
1 parent 682c8f1
commit 778c3b2
Show file tree

Hide file tree

Showing 22 changed files with 534 additions and 105 deletions.
diff --git a/react/index.html b/react/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Siddharth Gupta</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/react/package.json b/react/package.json
@@ -18,6 +18,7 @@
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "tailwind-merge": "^2.2.1",
     "use-dark-mode": "^2.3.1",
     "usehooks-ts": "^2.13.0"

diff --git a/react/public/gradient-bg.svg b/react/public/gradient-bg.svg
diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -1,15 +1,31 @@
+import { Outlet, Route, Routes } from 'react-router-dom';
 import { useDarkMode } from 'usehooks-ts';
-import Navigation from './components/Navigation.tsx';
+import { Navigation, PageContainer } from './components';
+import { routes } from './routes';
 
 function App() {
   const { isDarkMode } = useDarkMode();
 
   return (
     <main
-      className={`${isDarkMode ? 'dark' : ''} w-full min-h-screen p-2 text-foreground bg-background`}
+      className={`${isDarkMode ? 'dark bg-accent-gr bg-auto' : ''} w-full min-h-screen text-foreground bg-background`}
     >
       <Navigation />
-      <div className='mt-6 flex w-full flex-col items-center'>Hello</div>
+      <Routes>
+        <Route
+          path='/'
+          element={
+            <PageContainer>
+              <Outlet />
+            </PageContainer>
+          }
+        >
+          {routes.map(r => (
+            <Route index={r.path === '/'} path={r.path} element={r.component} />
+          ))}
+          {/*<Route path='*' element={<NoMatch />} />*/}
+        </Route>
+      </Routes>
     </main>
   );
 }

diff --git a/react/src/components/Navigation.tsx b/react/src/components/Navigation.tsx
diff --git a/react/src/components/containers/PageContainer.tsx b/react/src/components/containers/PageContainer.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode;
+};
+
+function PageContainer({ children }: Props) {
+  return (
+    <div className='mt-6 flex w-full justify-center justify-items-center items-center container mx-auto max-w-7xl px-6 flex-grow'>
+      {children}
+    </div>
+  );
+}
+
+export { PageContainer };
diff --git a/react/src/components/containers/index.ts b/react/src/components/containers/index.ts
@@ -0,0 +1 @@
+export * from './PageContainer';
diff --git a/react/src/components/index.ts b/react/src/components/index.ts
diff --git a/react/src/components/index.tsx b/react/src/components/index.tsx
@@ -0,0 +1,2 @@
+export * from './containers';
+export * from './navigation';
diff --git a/react/src/components/navigation/Navigation.tsx b/react/src/components/navigation/Navigation.tsx
@@ -0,0 +1,71 @@
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarMenu,
+  NavbarMenuToggle,
+} from '@nextui-org/react';
+import { routes } from '../../routes';
+import { ThemeSwitcher } from './ThemeSwitcher.tsx';
+import { NavigationLink } from './NavigationLink.tsx';
+
+function Navigation() {
+  return (
+    <Navbar
+      classNames={{
+        item: 'data-[active=true]:text-primary dark:data-[active=true]:text-primary-500 font-semibold',
+        menuItem: 'data-[active=true]:text-primary dark:data-[active=true]:text-primary-500 font-semibold',
+        wrapper: 'px-4 sm:px-6',
+      }}
+      height='60px'
+      maxWidth='xl'
+      isBlurred
+    >
+      <NavbarBrand>
+        <NavbarMenuToggle className='mr-2 h-6 sm:hidden' />
+        <p className='font-bold text-inherit text-xl sm:text-2xl'>
+          Siddharth Gupta
+        </p>
+      </NavbarBrand>
+
+      <NavbarContent
+        className='ml-4 hidden h-12 w-full max-w-fit gap-4 rounded-full bg-content2 px-4 sm:flex'
+        justify='start'
+      >
+        {routes.map(r => (
+          <NavigationLink
+            key={`nav-${r.path}`}
+            path={r.path}
+            text={r.navText}
+          />
+        ))}
+      </NavbarContent>
+
+      <NavbarContent
+        className='ml-auto flex h-12 max-w-fit items-center gap-0 rounded-full p-0 lg:bg-content2 lg:px-1 lg:dark:bg-content1'
+        justify='end'
+      >
+        <NavbarItem>
+          <ThemeSwitcher />
+        </NavbarItem>
+      </NavbarContent>
+
+      {/* Mobile Menu */}
+      <NavbarMenu
+        portalContainer={document.body.getElementsByTagName('main')[0]}
+      >
+        {routes.map(r => (
+          <NavigationLink
+            key={`nav-mobile-${r.path}`}
+            path={r.path}
+            text={r.navText}
+            mobile
+          />
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  );
+}
+
+export { Navigation };
diff --git a/react/src/components/navigation/NavigationLink.tsx b/react/src/components/navigation/NavigationLink.tsx
@@ -0,0 +1,37 @@
+import { NavbarItem, NavbarMenuItem } from '@nextui-org/react';
+import { ReactNode } from 'react';
+import { NavLink, Path, useMatch, useResolvedPath } from 'react-router-dom';
+
+type Props = {
+  path: string;
+  text: ReactNode;
+  mobile?: boolean;
+};
+
+function NavigationLink({ path, text, mobile = false }: Props) {
+  const resolvedPath: Path = useResolvedPath(path);
+  const matchedPath = useMatch({
+    path: resolvedPath.pathname,
+    end: true,
+  });
+
+  if (mobile) {
+    return (
+      <NavbarMenuItem isActive={matchedPath !== null}>
+        <NavLink to={path} className='w-full'>
+          {text}
+        </NavLink>
+      </NavbarMenuItem>
+    );
+  }
+
+  return (
+    <NavbarItem isActive={matchedPath !== null}>
+      <NavLink className='flex gap-2 text-inherit' to={path}>
+        {text}
+      </NavLink>
+    </NavbarItem>
+  );
+}
+
+export { NavigationLink };
diff --git a/react/src/components/ThemeSwitcher.tsx → ...c/components/navigation/ThemeSwitcher.tsx b/react/src/components/ThemeSwitcher.tsx → ...c/components/navigation/ThemeSwitcher.tsx
diff --git a/react/src/components/navigation/index.tsx b/react/src/components/navigation/index.tsx
@@ -0,0 +1,3 @@
+export * from './NavigationLink';
+export * from './Navigation';
+export * from './ThemeSwitcher';
diff --git a/react/src/main.tsx b/react/src/main.tsx
@@ -1,13 +1,16 @@
 import { NextUIProvider } from '@nextui-org/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App.tsx';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <NextUIProvider>
-      <App />
-    </NextUIProvider>
+    <BrowserRouter>
+      <NextUIProvider>
+        <App />
+      </NextUIProvider>
+    </BrowserRouter>
   </React.StrictMode>
 );
diff --git a/react/src/pages/Contact.tsx b/react/src/pages/Contact.tsx
@@ -0,0 +1,8 @@
+
+function Contact() {
+  return (
+    <div>Contact</div>
+  );
+}
+
+export { Contact };