mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-04 05:39:06 +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:
sabaimran
committed by
Debanjum Singh Solanky
Debanjum Singh Solanky
parent
e62888659f
commit
07b3bdf181
@@ -5,7 +5,6 @@ import { Input } from '@/components/ui/input';
|
||||
import { useAuthenticatedData } from '../common/auth';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import SidePanel from '../components/sidePanel/chatHistorySidePanel';
|
||||
import NavMenu from '../components/navMenu/navMenu';
|
||||
import styles from './search.module.css';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
@@ -211,98 +210,96 @@ export default function Search() {
|
||||
console.log('searchResults', searchResults);
|
||||
|
||||
return (
|
||||
<div className={`${styles.searchLayout}`}>
|
||||
<div className='h-full'>
|
||||
<div>
|
||||
<div className={`h-full ${styles.sidePanel}`}>
|
||||
<SidePanel
|
||||
conversationId={null}
|
||||
uploadedFiles={[]}
|
||||
isMobileWidth={isMobileWidth}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:w-3/4 sm:w-full mr-auto ml-auto">
|
||||
<NavMenu title={title} selected='Chat' />
|
||||
<div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
|
||||
{
|
||||
isMobileWidth && <div className='font-bold'>Search</div>
|
||||
}
|
||||
<div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
|
||||
<MagnifyingGlass className='inline m-2' />
|
||||
<Input
|
||||
autoFocus
|
||||
className='border-none'
|
||||
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && search()}
|
||||
type="search"
|
||||
placeholder="Search Documents" />
|
||||
<button className='px-4 rounded' onClick={() => search()}>
|
||||
Find
|
||||
</button>
|
||||
</div>
|
||||
{
|
||||
focusSearchResult &&
|
||||
<div className='mt-4'>
|
||||
<Button onClick={() => setFocusSearchResult(null)} className='mb-4' variant={'outline'}>
|
||||
<ArrowLeft className='inline mr-2' />
|
||||
Back
|
||||
</Button>
|
||||
{focusNote(focusSearchResult)}
|
||||
<div className={`${styles.searchLayout}`}>
|
||||
<div className="md:w-3/4 sm:w-full mr-auto ml-auto pt-4 md:pt-8">
|
||||
<div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
|
||||
<div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
|
||||
<MagnifyingGlass className='inline m-2' />
|
||||
<Input
|
||||
autoFocus
|
||||
className='border-none'
|
||||
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && search()}
|
||||
type="search"
|
||||
placeholder="Search Documents" />
|
||||
<button className='px-4 rounded' onClick={() => search()}>
|
||||
Find
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!focusSearchResult && searchResults && searchResults.length > 0 &&
|
||||
<div className='mt-4'>
|
||||
<ScrollArea className="h-[80vh]">
|
||||
{
|
||||
searchResults.map((result, index) => {
|
||||
return (
|
||||
<Note key={result["corpus-id"]}
|
||||
note={result}
|
||||
setFocusSearchResult={setFocusSearchResult} />
|
||||
);
|
||||
})
|
||||
}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
searchResults == null &&
|
||||
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
|
||||
<CardHeader className='flex flex-col items-center justify-center'>
|
||||
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
|
||||
<FileMagnifyingGlass weight='fill' className='text-muted-foreground h-10 w-10' />
|
||||
</CardDescription>
|
||||
<CardTitle className='text-center'>
|
||||
Search across your documents
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className='text-muted-foreground items-center justify-center text-center flex'>
|
||||
<Lightbulb className='inline mr-2' /> {exampleQuery}
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
{
|
||||
searchResults && searchResults.length === 0 &&
|
||||
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
|
||||
<CardHeader className='flex flex-col items-center justify-center'>
|
||||
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
|
||||
<FileDashed weight='fill' className='text-muted-foreground h-10 w-10' />
|
||||
</CardDescription>
|
||||
<CardTitle className='text-center'>
|
||||
No documents found
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-muted-foreground items-center justify-center text-center flex'>
|
||||
To use search, upload your docs to your account.
|
||||
</div>
|
||||
<Link href="https://docs.khoj.dev/data-sources/share_your_data" className='no-underline'>
|
||||
<div className='mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg'>
|
||||
Learn More
|
||||
{
|
||||
focusSearchResult &&
|
||||
<div className='mt-4'>
|
||||
<Button onClick={() => setFocusSearchResult(null)} className='mb-4' variant={'outline'}>
|
||||
<ArrowLeft className='inline mr-2' />
|
||||
Back
|
||||
</Button>
|
||||
{focusNote(focusSearchResult)}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!focusSearchResult && searchResults && searchResults.length > 0 &&
|
||||
<div className='mt-4'>
|
||||
<ScrollArea className="h-[80vh]">
|
||||
{
|
||||
searchResults.map((result, index) => {
|
||||
return (
|
||||
<Note key={result["corpus-id"]}
|
||||
note={result}
|
||||
setFocusSearchResult={setFocusSearchResult} />
|
||||
);
|
||||
})
|
||||
}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
searchResults == null &&
|
||||
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
|
||||
<CardHeader className='flex flex-col items-center justify-center'>
|
||||
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
|
||||
<FileMagnifyingGlass weight='fill' className='text-muted-foreground h-10 w-10' />
|
||||
</CardDescription>
|
||||
<CardTitle className='text-center'>
|
||||
Search across your documents
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className='text-muted-foreground items-center justify-center text-center flex'>
|
||||
<Lightbulb className='inline mr-2' /> {exampleQuery}
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
{
|
||||
searchResults && searchResults.length === 0 &&
|
||||
<Card className='flex flex-col items-center justify-center border-none shadow-none'>
|
||||
<CardHeader className='flex flex-col items-center justify-center'>
|
||||
<CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
|
||||
<FileDashed weight='fill' className='text-muted-foreground h-10 w-10' />
|
||||
</CardDescription>
|
||||
<CardTitle className='text-center'>
|
||||
No documents found
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-muted-foreground items-center justify-center text-center flex'>
|
||||
To use search, upload your docs to your account.
|
||||
</div>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
<Link href="https://docs.khoj.dev/data-sources/share_your_data" className='no-underline'>
|
||||
<div className='mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg'>
|
||||
Learn More
|
||||
</div>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,22 @@
|
||||
div.searchLayout {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
div.sidePanel {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
div.searchLayout {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
div.sidePanel {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user