fix: move chatbot outside topbar component and place into layout instead

jst-seminar-rostlab-tum · Dec 13, 2024 · ed38e43 · ed38e43
1 parent b26ead2
commit ed38e43
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 11 deletions.
diff --git a/src/app/about/layout.tsx b/src/app/about/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );

diff --git a/src/app/data_sources/layout.tsx b/src/app/data_sources/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );

diff --git a/src/app/disclaimer/layout.tsx b/src/app/disclaimer/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
     </div>
   );

diff --git a/src/app/download-portal/layout.tsx b/src/app/download-portal/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
     </div>
   );

diff --git a/src/app/wiki/layout.tsx b/src/app/wiki/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );

diff --git a/src/components/Chatbot/Chatbot.tsx b/src/components/Chatbot/Chatbot.tsx
@@ -193,7 +193,7 @@ export default function HungerMapChatbot() {
 
   return (
     <div
-      className={clsx('absolute', {
+      className={clsx('fixed', {
         'inset-0 z-chatbotFullScreen': isFullScreen,
         'top-4 right-4': !isFullScreen,
         'z-chatbotExpanded': isOpen,

diff --git a/src/components/Topbar/Topbar.tsx b/src/components/Topbar/Topbar.tsx
@@ -13,7 +13,6 @@ import {
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 
-import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { LogoWithText } from '@/components/LogoWithText/LogoWithText';
 import { ThemeSwitch } from '@/components/Sidebar/ThemeSwitch';
 import { pageLinks } from '@/domain/constant/PageLinks';
@@ -23,7 +22,7 @@ export function Topbar() {
   const pathname = usePathname();
 
   return (
-    <Navbar onMenuOpenChange={setIsMenuOpen} maxWidth="full">
+    <Navbar onMenuOpenChange={setIsMenuOpen} maxWidth="full" className="fixed pr-10">
       <NavbarContent className="flex-1 min-w-[200px] mt-4">
         <NavbarMenuToggle aria-label={isMenuOpen ? 'Close menu' : 'Open menu'} className="md:hidden" />
         <NavbarBrand>
@@ -43,9 +42,6 @@ export function Topbar() {
         <NavbarItem className="mt-4">
           <ThemeSwitch isIconOnly />
         </NavbarItem>
-        <NavbarItem className="flex items-center">
-          <HungerMapChatbot />
-        </NavbarItem>
       </NavbarContent>
       <NavbarMenu>
         {pageLinks.map((item) => (