Update mobile navbar, push chat bubble up on sm screen

HACC-2023 · Nov 8, 2023 · a9cc2e5 · a9cc2e5
1 parent a78a1ce
commit a9cc2e5
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/my-app/src/components/chatbot/DialogflowChatWidget.jsx b/my-app/src/components/chatbot/DialogflowChatWidget.jsx
@@ -94,11 +94,6 @@ const DialogflowChatWidget = () => {
         df-messenger-chat-bubble:hover {
           --df-messenger-chat-bubble-background: ${dfMessengerColors.primaryColorHover};
         }
-        @media (min-width: 768px) {
-          df-messenger {
-            bottom: 16px;
-          }
-        }
       `}
     </style>
   );

diff --git a/my-app/src/components/navbar/MobileNavbar.jsx b/my-app/src/components/navbar/MobileNavbar.jsx
@@ -1,31 +1,29 @@
 import Link from "next/link";
-// import { useSession } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 
 // TODO: use "active" class to highlight current page
-// TODO: update links
+// TODO switch to logout instead of dashboard if logged in?
 const MobileNavbar = () => {
+  const { data: session, status } = useSession();
   return (
     <div className="btm-nav md:hidden">
-      <Link href="/home">
-        <button>
-          <span className="btm-nav-label">Home</span>
-        </button>
+      <Link href="/home" className="hover:brightness-125 hover:bg-accent/10 transition-all">
+        <span className="btm-nav-label">Home</span>
       </Link>
-      <Link href="/report">
-        <button>
-          <span className="btm-nav-label">Report</span>
-        </button>
+      <Link href="/report-form" className="hover:brightness-125 hover:bg-accent/10 transition-all">
+        <span className="btm-nav-label">Report</span>
       </Link>
-      <Link href="/data">
-        <button>
-          <span className="btm-nav-label">Data</span>
-        </button>
+      <Link href="/data-insights" className="hover:brightness-125 hover:bg-accent/10 transition-all">
+        <span className="btm-nav-label">Data</span>
       </Link>
-      <Link href="/login">
-        <button>
+      {session
+        ? <Link href="/dashboard" className="hover:brightness-125 hover:bg-accent/10 transition-all">
+          Dashboard
+        </Link>
+        : <Link href="/auth/credentials-signin">
           <span className="btm-nav-label">Login</span>
-        </button>
-      </Link>
+        </Link>
+      }
     </div>
   );
 };

diff --git a/my-app/src/components/Navbar.jsx → my-app/src/components/navbar/SideNavbar.jsx b/my-app/src/components/Navbar.jsx → my-app/src/components/navbar/SideNavbar.jsx
@@ -14,7 +14,7 @@ import {
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-const Navbar = () => {
+const SideNavbar = () => {
   const { data: session, status } = useSession();
   const [orgName, setOrgName] = useState("");
 
@@ -168,7 +168,7 @@ const Navbar = () => {
       <div className="drawer hidden md:block lg:hidden">
         <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
         <div className="drawer-content flex flex-col">
-          {/* Navbar */}
+          {/* SideNavbar */}
           <div className="w-full navbar">
             <div className="flex-none lg:hidden">
               <label
@@ -206,4 +206,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default SideNavbar;
diff --git a/my-app/src/pages/_app.js b/my-app/src/pages/_app.js
@@ -1,4 +1,4 @@
-import Navbar from "@/components/Navbar";
+import SideNavbar from "@/components/navbar/SideNavbar";
 import MobileNavbar from "@/components/navbar/MobileNavbar";
 import { SessionProvider } from "next-auth/react";
 import { ToastContainer } from "react-toastify";
@@ -34,13 +34,13 @@ const App = ({ Component, pageProps: { session, ...pageProps } }) => {
     <>
       <SessionProvider session={session}>
         <div className="flex md:flex-col lg:flex-row min-h-screen">
-          <Navbar />
+          <SideNavbar />
           <div className="flex-1">
             <Component {...pageProps} />
           </div>
           <MobileNavbar />
           <ToastContainer />
-          <div id="chatContainer" className={`fixed ${ scrollDirection === "down" ? "-bottom-24" : "bottom-0"} right-4 h-20 transition-all duration-500`}>
+          <div id="chatContainer" className={`fixed ${ scrollDirection === "down" ? "-bottom-24" : "md:bottom-0 bottom-14"} right-4 h-20 transition-all duration-500`}>
             <DialogflowChatWidget/>
           </div>
         </div>