Update nav menu styling to include everything in one header

- Move the nav menu into the chat history side panel component, so that they both show up on one line
- Update all pages to use it with the new formatting
- in mobile, present the sidebar button, home button, and profile button evenly centered in the middle

src/interface/web/app/components/navMenu/navMenu.module.css

@@ -17,10 +17,6 @@ a.selected {
 
 div.titleBar {
     display: flex;
-    padding-left: 12px;
-    padding-right: 12px;
-    padding-top: 16px;
-    padding-bottom: 16px;
     justify-content: space-between;
     align-content: space-evenly;
     align-items: start;

src/interface/web/app/components/navMenu/navMenu.tsx

@@ -23,35 +23,16 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Moon, Sun, UserCircle, User, Robot, MagnifyingGlass, Question, GearFine, ArrowRight } from '@phosphor-icons/react';
-import { KhojLogoType } from '../logo/khogLogo';
 
-
-interface NavMenuProps {
-    selected: string;
-    showLogo?: boolean;
-    title?: string;
-}
-
-export default function NavMenu(props: NavMenuProps) {
+export default function NavMenu() {
 
     const userData = useAuthenticatedData();
-    const [displayTitle, setDisplayTitle] = useState<string | undefined>(props.title);
-
     const [isMobileWidth, setIsMobileWidth] = useState(false);
     const [darkMode, setDarkMode] = useState(false);
     const [initialLoadDone, setInitialLoadDone] = useState(false);
 
     useEffect(() => {
         setIsMobileWidth(window.innerWidth < 768);
-        if (props.title) {
-            setDisplayTitle(props.title);
-        } else if (!props.title) {
-            setDisplayTitle(undefined);
-        }
-
-    }, [props.title]);
-
-    useEffect(() => {
 
         window.addEventListener('resize', () => {
             setIsMobileWidth(window.innerWidth < 768);
@@ -94,15 +75,6 @@ export default function NavMenu(props: NavMenuProps) {
 
     return (
         <div className={styles.titleBar}>
-            <div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
-                {displayTitle && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden`} >{displayTitle}</h2>}
-                {
-                    !displayTitle && props.showLogo &&
-                    <Link href='/'>
-                        <KhojLogoType />
-                    </Link>
-                }
-            </div>
             {
                 isMobileWidth ?
                     <DropdownMenu>

src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx

@@ -76,6 +76,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
 import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
 import { KhojLogo, KhojLogoType } from "@/app/components/logo/khogLogo";
+import NavMenu from "../navMenu/navMenu";
 
 // Define a fetcher function
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -660,11 +661,8 @@ export default function SidePanel(props: SidePanelProps) {
     }, [chatSessions]);
 
     return (
-        <div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} mt-1`}>
+        <div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} ${props.isMobileWidth ? 'mt-0' : 'mt-1'}`}>
             <div className={`flex justify-between flex-row`}>
-                <Link href='/'>
-                    {props.isMobileWidth && <KhojLogo /> || <KhojLogoType />}
-                </Link>
                 {
                     authenticatedData && props.isMobileWidth ?
                         <Drawer open={enabled} onOpenChange={(open) => {
@@ -672,7 +670,7 @@ export default function SidePanel(props: SidePanelProps) {
                             setEnabled(open);
                         }
                         }>
-                            <DrawerTrigger><Sidebar className="h-4 w-4 mx-2" weight="thin" /></DrawerTrigger>
+                            <DrawerTrigger><Sidebar className="h-6 w-6 mx-2" weight="thin" /></DrawerTrigger>
                             <DrawerContent>
                                 <DrawerHeader>
                                     <DrawerTitle>Sessions and Files</DrawerTitle>
@@ -698,15 +696,33 @@ export default function SidePanel(props: SidePanelProps) {
                             </DrawerContent>
                         </Drawer>
                         :
-                        <div className={`${enabled ? 'flex items-center flex-row gap-2' : 'flex'}`}>
-                            <Link className={`ml-4 mr-4`} href="/">
-                                {enabled ? <NotePencil className="h-6 w-6" /> : <NotePencil className="h-6 w-6" color="gray" />}
+                        <div className={`flex justify-between flex-row`}>
+                            <Link href='/' className="content-center">
+                                <KhojLogoType />
                             </Link>
-                            <button className={styles.button} onClick={() => setEnabled(!enabled)}>
-                                {enabled ? <Sidebar className="h-6 w-6" /> : <Sidebar className="h-6 w-6" color="gray" />}
-                            </button>
+                            <div className={`${enabled ? 'flex items-center flex-row gap-2' : 'flex items-center'}`}>
+                                <Link className={`ml-4 mr-4`} href="/">
+                                    {enabled ? <NotePencil className="h-6 w-6" /> : <NotePencil className="h-6 w-6" color="gray" />}
+                                </Link>
+                                <button className={styles.button} onClick={() => setEnabled(!enabled)}>
+                                    {enabled ? <Sidebar className="h-6 w-6" /> : <Sidebar className="h-6 w-6" color="gray" />}
+                                </button>
+                            </div>
+                            <div className="fixed right-0 w-fit h-fit">
+                                <NavMenu />
+                            </div>
                         </div>
                 }
+                {
+                    props.isMobileWidth &&
+                    <Link href='/' className="content-center">
+                        <KhojLogoType />
+                    </Link>
+                }
+                {
+                    props.isMobileWidth &&
+                    <NavMenu />
+                }
             </div>
             {
                 authenticatedData && !props.isMobileWidth && enabled &&

src/interface/web/app/components/sidePanel/sidePanel.module.css

@@ -123,9 +123,9 @@ div.modalSessionsList div.session {
 
 @media screen and (max-width: 768px) {
     div.panel {
-        padding: 0.5rem;
-        position: fixed;
-        width: fit-content;
+        padding: 0.25rem;
+        /* position: fixed; */
+        width: 100%;
     }
 
     div.expanded {