klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style nav menu button and expand nav menu item click area to full-width

Browse Source 
Style profile pircture button on nav menu
 - Use primary colored ring around subscribed user profile on nav menu
 - Use gray colored ring around non-subscribed user profile on nav menu
 - Use upper case initial as profile pic for user with no profile pic

- Click anywhere on nav menu item to trigger action
  Previously the actual clickable area was smaller than the width of
  the nav menu item
This commit is contained in:
Debanjum Singh Solanky
2024-08-03 04:12:05 +05:30
parent eed9e401a2
commit a6e1b2c7cb
2 changed files with 25 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/interface/web/app/components/navMenu/navMenu.tsx
View File

@@ -81,30 +81,26 @@ export default function NavMenu() {
<DropdownMenuTrigger>
{
userData ?
<Avatar className="h-8 w-8">
<Avatar className={`h-8 w-8 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
<AvatarImage src={userData?.photo} alt="user profile" />
<AvatarFallback>
{userData?.username[0]}
<AvatarFallback className="bg-transparent hover:bg-muted">
{userData?.username[0].toUpperCase()}
</AvatarFallback>
</Avatar>
:
<UserCircle className="w-6 h-6" />
<UserCircle className="h-6 w-6" />
}
</DropdownMenuTrigger>
<DropdownMenuContent className='gap-2'>
<DropdownMenuItem>
<DropdownMenuItem onClick={() => setDarkMode(!darkMode)} className='w-full cursor-pointer'>
<div
onClick={() => {
setDarkMode(!darkMode)
}
}
className="flex flex-rows">
{darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
<p className="ml-3 font-semibold">{darkMode ? 'Light Mode' : 'Dark Mode'}</p>
</div>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="/agents" className="no-underline">
<Link href="/agents" className="no-underline w-full">
<div className="flex flex-rows">
<User className="w-6 h-6" />
<p className="ml-3 font-semibold">Agents</p>
@@ -112,7 +108,7 @@ export default function NavMenu() {
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="/automations" className="no-underline">
<Link href="/automations" className="no-underline w-full">
<div className="flex flex-rows">
<Robot className="w-6 h-6" />
<p className="ml-3 font-semibold">Automations</p>
@@ -120,7 +116,7 @@ export default function NavMenu() {
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="/search" className="no-underline">
<Link href="/search" className="no-underline w-full">
<div className="flex flex-rows">
<MagnifyingGlass className="w-6 h-6" />
<p className="ml-3 font-semibold">Search</p>
@@ -131,7 +127,7 @@ export default function NavMenu() {
<DropdownMenuSeparator />
{userData &&
<DropdownMenuItem>
<Link href="/settings" className="no-underline">
<Link href="/settings" className="no-underline w-full">
<div className="flex flex-rows">
<GearFine className="w-6 h-6" />
<p className="ml-3 font-semibold">Settings</p>
@@ -140,7 +136,7 @@ export default function NavMenu() {
</DropdownMenuItem>
}
<DropdownMenuItem>
<Link href="https://docs.khoj.dev" className="no-underline">
<Link href="https://docs.khoj.dev" className="no-underline w-full">
<div className="flex flex-rows">
<Question className="w-6 h-6" />
<p className="ml-3 font-semibold">Help</p>
@@ -150,7 +146,7 @@ export default function NavMenu() {
{
userData ?
<DropdownMenuItem>
<Link href="/auth/logout" className="no-underline">
<Link href="/auth/logout" className="no-underline w-full">
<div className="flex flex-rows">
<ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Logout</p>
@@ -159,7 +155,7 @@ export default function NavMenu() {
</DropdownMenuItem>
:
<DropdownMenuItem>
<Link href="/auth/login" className="no-underline">
<Link href="/auth/login" className="no-underline w-full">
<div className="flex flex-rows">
<ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Login</p>
@@ -171,15 +167,15 @@ export default function NavMenu() {
</DropdownMenuContent>
</DropdownMenu>
:
<Menubar className='border-none hover:bg-stone-100 dark:hover:bg-neutral-900 bg-none'>
<Menubar className='border-none'>
<MenubarMenu>
<MenubarTrigger>
{
userData ?
<Avatar className="h-8 w-8">
<Avatar className={`h-8 w-8 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
<AvatarImage src={userData?.photo} alt="user profile" />
<AvatarFallback>
{userData?.username[0]}
<AvatarFallback className="bg-transparent hover:bg-muted">
{userData?.username[0].toUpperCase()}
</AvatarFallback>
</Avatar>
:
@@ -187,19 +183,15 @@ export default function NavMenu() {
}
</MenubarTrigger>
<MenubarContent align="end" className="rounded-xl gap-2">
<MenubarItem>
<MenubarItem onClick={() => setDarkMode(!darkMode)} className="w-full hover:cursor-pointer">
<div
onClick={() => {
setDarkMode(!darkMode)
}
}
className="flex flex-rows">
{darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
<p className="ml-3 font-semibold">{darkMode ? 'Light Mode' : 'Dark Mode'}</p>
</div>
</MenubarItem>
<MenubarItem>
<Link href="/agents" className="no-underline">
<Link href="/agents" className="no-underline w-full">
<div className="flex flex-rows">
<User className="w-6 h-6" />
<p className="ml-3 font-semibold">Agents</p>
@@ -207,7 +199,7 @@ export default function NavMenu() {
</Link>
</MenubarItem>
<MenubarItem>
<Link href="/automations" className="no-underline">
<Link href="/automations" className="no-underline w-full">
<div className="flex flex-rows">
<Robot className="w-6 h-6" />
<p className="ml-3 font-semibold">Automations</p>
@@ -215,7 +207,7 @@ export default function NavMenu() {
</Link>
</MenubarItem>
<MenubarItem>
<Link href="/search" className="no-underline">
<Link href="/search" className="no-underline w-full">
<div className="flex flex-rows">
<MagnifyingGlass className="w-6 h-6" />
<p className="ml-3 font-semibold">Search</p>
@@ -225,7 +217,7 @@ export default function NavMenu() {
<>
<MenubarSeparator className="dark:bg-white height-[2px] bg-black" />
<MenubarItem>
<Link href="https://docs.khoj.dev" className="no-underline">
<Link href="https://docs.khoj.dev" className="no-underline w-full">
<div className="flex flex-rows">
<Question className="w-6 h-6" />
<p className="ml-3 font-semibold">Help</p>
@@ -235,7 +227,7 @@ export default function NavMenu() {
{
userData &&
<MenubarItem>
<Link href="/settings" className="no-underline">
<Link href="/settings" className="no-underline w-full">
<div className="flex flex-rows">
<GearFine className="w-6 h-6" />
<p className="ml-3 font-semibold">Settings</p>
@@ -246,7 +238,7 @@ export default function NavMenu() {
{
userData ?
<MenubarItem>
<Link href="/auth/logout" className="no-underline">
<Link href="/auth/logout" className="no-underline w-full">
<div className="flex flex-rows">
<ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Logout</p>
@@ -255,7 +247,7 @@ export default function NavMenu() {
</MenubarItem>
:
<MenubarItem>
<Link href="/auth/login" className="no-underline">
<Link href="/auth/login" className="no-underline w-full">
<div className="flex flex-rows">
<ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Login</p>

2
src/interface/web/app/components/suggestions/suggestionCard.tsx
View File

@@ -38,7 +38,7 @@ interface SuggestionCardProps {
export default function SuggestionCard(data: SuggestionCardProps) {
const bgColors = converColorToBgGradient(data.color);
const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px]`;
const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px] cursor-pointer`;
const titleClassName = `${styles.title} pt-2 dark:text-white dark:font-bold`;
const descriptionClassName = `${styles.text} dark:text-white`;