setSidebarOpen(false)}
- style={{ backgroundColor: "rgba(0,0,0,0.35)" }}
- />
- )}
-
- {/* Sidebar */}
- {showSidebar && (
- = ({ semesters, requirements, transcriptDa
<>
- handleDropCourse('', -1, null, sourceYear, sourceSemesterIndex, courseId, false)
- }
- placedSuggestedCourses={placedSuggestedCourses}
- allCompletedCourseCodes={allCompletedCourseCodes}
- allPlannedCoursesWithOrder={allPlannedCoursesWithOrder}
- onRestartOnboarding={onRestartOnboarding}
- availableSemesters={availableSemesters}
- onAddCourse={handleDropCourse}
- semesters={allSemesters}
- coursebookData={coursebookData}
- gradesData={gradesData}
- onOpenDiscovery={() => setShowDiscovery(true)}
- coursebookSemester={coursebookSemester}
+ sidebarContent={(onClose) => (
+
+ handleDropCourse('', -1, null, sourceYear, sourceSemesterIndex, courseId, false)
+ }
+ placedSuggestedCourses={placedSuggestedCourses}
+ allCompletedCourseCodes={allCompletedCourseCodes}
+ allPlannedCoursesWithOrder={allPlannedCoursesWithOrder}
+ onRestartOnboarding={onRestartOnboarding}
+ availableSemesters={availableSemesters}
+ onAddCourse={handleDropCourse}
+ semesters={allSemesters}
+ coursebookData={coursebookData}
+ gradesData={gradesData}
+ onOpenDiscovery={() => setShowDiscovery(true)}
+ coursebookSemester={coursebookSemester}
+ />
+ )}
/>
- {/* Header */}
-
- )}
-
- );
-};
-
-export default MobileNavbar;
\ No newline at end of file
diff --git a/main/src/components/Navbar.tsx b/main/src/components/Navbar.tsx
index 5c849cc..a901632 100644
--- a/main/src/components/Navbar.tsx
+++ b/main/src/components/Navbar.tsx
@@ -1,209 +1,84 @@
-import { Link, useLocation } from "react-router-dom";
+import { useState, useEffect } from "react";
import { useAuth } from "../context/AuthContext";
-import { Menu, MessageCirclePlus, Route, UserRound} from "lucide-react";
-import { useEffect, useState } from "react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
+import {
+ DevEnvironmentBanner,
+ MobileNavbar,
+ NavBrand,
+ NavPrimaryLinks,
+ UserProfileMenu,
+} from "@sage/ui";
+import { useRouteMode } from "../hooks/useRouteMode";
+import { PRIMARY_NAV_LINKS, MOBILE_NAV_LINKS } from "../lib/navLinks";
-// check environment
const ENVIRONMENT = import.meta.env.VITE_ENVIRONMENT as string | undefined;
const Navbar = () => {
const { user, logout, profilePicture } = useAuth();
- const [isInWebapp, setIsInWebapp] = useState(false);
- const [isOnboardingActive, setIsOnboardingActive] = useState(false);
-
- let location = useLocation().pathname;
+ const [isOnboardingActive, setIsOnboardingActive] = useState(false);
+ const { isInWebapp } = useRouteMode();
useEffect(() => {
const navHeight = ENVIRONMENT === 'development' ? '6rem' : '4.2rem';
document.documentElement.style.setProperty('--nav-height', navHeight);
}, []);
- useEffect(() => {
- if (location === "/" || location === "/login" || location === "/signup" || location === "/forgot-password") {
- setIsInWebapp(false);
- }
- else {
- setIsInWebapp(true);
- }
- }, [location]);
-
- // onboarding modal active check
useEffect(() => {
const checkOnboarding = () => {
const onboardingActive = document.body.hasAttribute('data-onboarding-active');
setIsOnboardingActive(onboardingActive);
};
-
+
checkOnboarding();
-
+
const observer = new MutationObserver(checkOnboarding);
observer.observe(document.body, { attributes: true, attributeFilter: ['data-onboarding-active'] });
-
+
return () => observer.disconnect();
}, []);
- // Dark mode when: NOT in webapp OR onboarding is active
- // Light mode when: in webapp AND onboarding is NOT active
const useDarkMode = !isInWebapp || isOnboardingActive;
+ const useLightNav = !useDarkMode;
return (
<>
- {/* Standard navbar */}
- <>
- {ENVIRONMENT === 'development' && (
-
- setSidebarOpen(false)}>
- 
-
-
-
-
- {/* Content */}
- {sidebarContent?.(()=> setSidebarOpen(false))}
-
- Dev Environment
-
- )}
-
-
-
-
- {/* Mobile Navbar -- Dropdown navbar when screen width < md (768px) */}
+
+
{/* Action buttons */}
@@ -1002,7 +1008,7 @@ const Planner: React.FC = ({ semesters, requirements, transcriptDa
- ;
- onToggleCategory: (index: number) => void;
- transcriptData: any;
- onDropCourse?: (courseId: string, sourceYear: string, sourceSemesterIndex: number) => void;
- placedSuggestedCourses?: Set;
- allCompletedCourseCodes?: string[];
- allPlannedCoursesWithOrder?: Array<{
- code: string;
- yearKey: string;
- semesterIndex: number;
- semesterOrder: number;
- }>;
- availableSemesters?: Array<{yearKey: string, semesterIndex: number, title: string}>;
- onAddCourse?: (targetYear: string, targetSemesterIndex: number, course: any, sourceYear: string, sourceSemesterIndex: number, courseId?: string, isSuggested?: boolean) => void;
- onRestartOnboarding?: () => void;
- semesters?: import("@/utils/plannerCredits").SemestersForCredits;
- coursebookData?: Record;
- gradesData?: Record;
- onOpenDiscovery?: () => void;
- coursebookSemester?: string | null
+ sidebarContent: (onClose: () => void) => ReactNode;
}
-const PlannerNavbar: React.FC = ({
- requirements,
- expandedCategories,
- onToggleCategory,
- transcriptData,
- onDropCourse,
- placedSuggestedCourses,
- allCompletedCourseCodes = [],
- allPlannedCoursesWithOrder = [],
- onRestartOnboarding,
- availableSemesters,
- onAddCourse,
- semesters,
- coursebookData,
- gradesData,
- onOpenDiscovery,
- coursebookSemester,
-}) => {
+const PlannerNavbar: React.FC = ({ sidebarContent }) => {
const { user, logout, profilePicture } = useAuth();
- const location = useLocation();
-
- const [isInWebapp, setIsInWebapp] = useState(false);
-
- useEffect(() => {
- if (location.pathname === "/" || location.pathname === "/login" || location.pathname === "/signup" || location.pathname === "/forgot-password") {
- setIsInWebapp(false);
- } else {
- setIsInWebapp(true);
- }
- }, [location]);
+ const { isInWebapp } = useRouteMode();
+ const isDarkMode = !isInWebapp;
return (
<>
- {/* Desktop navbar */}
- {ENVIRONMENT === 'development' && (
- = ({ onClose }) => {
+const ChatSidebarContent: React.FC = ({ onClose, layout = "mobile" }) => {
const { user } = useAuth();
const {
conversations,
- conversation_id,
+ activeConversationId,
error,
loading,
- setConversations,
+ setActiveConversationId,
+ startNewChat,
deleteConversation,
renameConversation,
- setConversationId,
- initialLoad
- } = useChatbot();
+ } = useChatbotStore();
- // Modal states
const [showRenameModal, setShowRenameModal] = useState(false);
const [newName, setNewName] = useState("");
const [renaming, setRenaming] = useState(false);
@@ -32,31 +30,6 @@ const ChatSidebarContent: React.FC = ({ onClose }) => {
const [conversationToDelete, setConversationToDelete] = useState(null);
const [deleting, setDeleting] = useState(false);
- useEffect(() => {
- initialLoad();
- }, []);
-
- useEffect(() => {
- // Sync conversations from ChatBot when they update
- const handleConversationUpdate = (updatedConversations: Conversation[]) => {
- setConversations(updatedConversations);
- };
-
- // Sync active conversation ID from ChatBot
- const handleActiveConversationUpdate = (newId: string | null) => {
- setConversationId(newId);
- };
-
- chatEventEmitter.on('conversationUpdate', handleConversationUpdate);
- chatEventEmitter.on('activeConversationUpdate', handleActiveConversationUpdate);
- chatEventEmitter.emit('requestConversations'); // Request current state from ChatBot on mount
-
- return () => {
- chatEventEmitter.off('conversationUpdate', handleConversationUpdate);
- chatEventEmitter.off('activeConversationUpdate', handleActiveConversationUpdate);
- };
- }, []);
-
const groupConversationsByDate = (convs: Conversation[]) => {
const today = new Date();
const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate());
@@ -80,14 +53,14 @@ const ChatSidebarContent: React.FC = ({ onClose }) => {
return { todayChats, pastChats };
};
- const truncateText = (text: string, maxLength: number = 24) => {
+ const truncateText = (text: string, maxLength = 24) => {
if (text.length <= maxLength) return text;
return text.substring(0, maxLength) + "...";
};
const renderConversationItem = (conv: Conversation) => {
const displayName = conv.title || conv.conversation_name || conv.messages?.[0]?.content || "No messages";
- const active = conversation_id === conv.conversation_id;
+ const active = activeConversationId === conv.conversation_id;
const displayText = truncateText(displayName, 20);
return (
@@ -96,13 +69,8 @@ const ChatSidebarContent: React.FC = ({ onClose }) => {
- Dev Environment
-
- )}
+