✏️ Typo

panoratech · Apr 19, 2024 · 21810d4 · 21810d4
1 parent 587e43d
commit 21810d4
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 37 deletions.
diff --git a/apps/client-ts/src/app/b2c/profile/layout.tsx b/apps/client-ts/src/app/b2c/profile/layout.tsx
@@ -18,6 +18,7 @@ export default function Layout({
       router.replace("/b2c/login");
     }
   }, [session, router]);
+  console.log('WEBAPP DOMAIN is '+ process.env.NEXT_PUBLIC_WEBAPP_DOMAIN)
 
   return (
     <>

diff --git a/apps/client-ts/src/components/Nav/main-nav-sm.tsx b/apps/client-ts/src/components/Nav/main-nav-sm.tsx
@@ -13,7 +13,11 @@ import { useState } from "react"
 import Link from "next/link"
 
 
-export function SmallNav() {
+export function SmallNav({ 
+  onLinkClick 
+} : {
+  onLinkClick: (name: string) => void
+}) {
   const [selectedItem, setSelectedItem] = useState<string>("dashboard");
   const [open, setOpen] = useState(false);
   const navItemClassName = (itemName: string) =>
@@ -23,7 +27,7 @@ export function SmallNav() {
 
     function click(name: string) {
       setSelectedItem(name);
-      //onLinkClick(name);
+      onLinkClick(name);
       setOpen(false);
     }
   return (
@@ -55,44 +59,40 @@ export function SmallNav() {
               >
                 <p className="mx-4">Dashboard</p>
               </a>*/}
-            <Link
+            <a
                 className={navItemClassName('connections')}
                 onClick={() => click('connections')}
-                href="/connections"
               >
               <p className="mx-4">Connections</p>
-            </Link>
-            <Link
+            </a>
+            <a
                 className={navItemClassName('events')}
                 onClick={() => click('events')}
-                href="/events"
               >
               <p className="mx-4">Events</p>
 
-            </Link>
-            <Link
+            </a>
+            <a
                 className={navItemClassName('configuration')}
                 onClick={() => click('configuration')}
-                href="/configuration"
               >
               <p className="mx-4">Configuration</p>
-            </Link>
-            <Link
+            </a>
+            <a
                 className={navItemClassName('api-keys')}
                 onClick={() => click('api-keys')}
-                href="/api-keys"
               >
               <p className="mx-4">API Keys</p>
-            </Link>
-            <Link
+            </a>
+            <a
               className={`${navItemClassName('docs')} flex items-center`}
               href="https://docs.panora.dev/"
               target="_blank"
               rel="noopener noreferrer"
             >
               <p className="mx-4">Docs</p>
               <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
-            </Link>
+            </a>
           </nav>
         </SheetContent>
       </Sheet>

diff --git a/apps/client-ts/src/components/Nav/main-nav.tsx b/apps/client-ts/src/components/Nav/main-nav.tsx
@@ -2,12 +2,13 @@
 
 import { usePathname } from "next/navigation";
 import { MouseEvent, useEffect, useState } from "react";
-import Link from "next/link"
 
 export function MainNav({
+  onLinkClick,
   className,
   ...props
 }: {
+  onLinkClick: (name: string) => void;
   className: string;
 }) {
   const [selectedItem, setSelectedItem] = useState<string>("connections");
@@ -23,51 +24,47 @@ export function MainNav({
 
   function click(e: MouseEvent, name: string) {
     e.preventDefault();
-    //onLinkClick(name);
+    onLinkClick(name);
   }
 
   return (
     <nav
       className={`flex flex-col items-start ${className}`}
       {...props}
     >
-      <Link
+      <a
         className={navItemClassName('connections')}
         onClick={(e) => click(e,'connections')}
-        href="/connections"
       >
         Connections
-      </Link>
-      <Link
+      </a>
+      <a
         className={navItemClassName('events')}
         onClick={(e) => click(e, 'events')}
-        href="/events"
       >
         Events
-      </Link>
-      <Link
+      </a>
+      <a
         className={navItemClassName('configuration')}
         onClick={(e) => click(e,'configuration')}
-        href="/configuration"
       >
         Configuration
-      </Link>
-      <Link
+      </a>
+      <a
         className={navItemClassName('api-keys')}
         onClick={(e) => click(e,'api-keys')}
-        href="/api-keys"
       >
         API Keys
-      </Link>
-      <Link
+      </a>
+      <a
         className={`${navItemClassName('docs')} flex items-center`}
         href="https://docs.panora.dev/"
         target="_blank"
         rel="noopener noreferrer"
       >
         <p className="pr-2">Docs</p> 
         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
-      </Link>
+      </a>
     </nav>
   );
 }
diff --git a/apps/client-ts/src/components/RootLayout/index.tsx b/apps/client-ts/src/components/RootLayout/index.tsx
@@ -9,7 +9,6 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation';
 import config from '@/lib/config';
 
-
 const useDeviceSize = () => {
 
   const [width, setWidth] = useState(0)
@@ -36,22 +35,22 @@ export const RootLayout = () => {
   const [width, height] = useDeviceSize();
   const router = useRouter()
   const base = process.env.NEXT_PUBLIC_WEBAPP_DOMAIN;
-  console.log('WEBAPP DOMAIN is '+ base)
-  /*const handlePageChange = (page: string) => {
+
+  const handlePageChange = (page: string) => {
     console.log(`${base}/${page}`)
     if (page) {
       router.push(`${base}/${page}`);
     } else {
       console.error(`Page ${page} is undefined`);
     }
-  };*/
+  };
 
   const lgBreakpoint = 1024; // Tailwind's 'lg' breakpoint
 
   return (
     <div>
       {width < lgBreakpoint ? (
-        <SmallNav/>
+        <SmallNav onLinkClick={handlePageChange} />
       ) : (
         <div className='items-center hidden lg:flex lg:flex-col border-r fixed left-0 bg-opacity-90 backdrop-filter backdrop-blur-lg w-[200px] h-screen'>
           <div className='flex lg:flex-col items-center py-4 space-y-4'>
@@ -63,6 +62,7 @@ export const RootLayout = () => {
             <TeamSwitcher className='w-40 ml-3' />
             <MainNav
               className='flex lg:flex-col mx-auto w-[200px] space-y-0'
+              onLinkClick={handlePageChange}
             />
             {
               config.DISTRIBUTION == "managed" &&