mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-03 13:19:16 +00:00
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
This commit is contained in:
committed by
Debanjum Singh Solanky
parent
e62888659f
commit
07b3bdf181
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user