klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39: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> <DropdownMenuTrigger>
{ {
userData ? 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" /> <AvatarImage src={userData?.photo} alt="user profile" />
<AvatarFallback> <AvatarFallback className="bg-transparent hover:bg-muted">
{userData?.username[0]} {userData?.username[0].toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
: :
<UserCircle className="w-6 h-6" /> <UserCircle className="h-6 w-6" />
} }
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className='gap-2'> <DropdownMenuContent className='gap-2'>
<DropdownMenuItem> <DropdownMenuItem onClick={() => setDarkMode(!darkMode)} className='w-full cursor-pointer'>
<div <div
onClick={() => {
setDarkMode(!darkMode)
}
}
className="flex flex-rows"> className="flex flex-rows">
{darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />} {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> <p className="ml-3 font-semibold">{darkMode ? 'Light Mode' : 'Dark Mode'}</p>
</div> </div>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Link href="/agents" className="no-underline"> <Link href="/agents" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<User className="w-6 h-6" /> <User className="w-6 h-6" />
<p className="ml-3 font-semibold">Agents</p> <p className="ml-3 font-semibold">Agents</p>
@@ -112,7 +108,7 @@ export default function NavMenu() {
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Link href="/automations" className="no-underline"> <Link href="/automations" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<Robot className="w-6 h-6" /> <Robot className="w-6 h-6" />
<p className="ml-3 font-semibold">Automations</p> <p className="ml-3 font-semibold">Automations</p>
@@ -120,7 +116,7 @@ export default function NavMenu() {
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Link href="/search" className="no-underline"> <Link href="/search" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<MagnifyingGlass className="w-6 h-6" /> <MagnifyingGlass className="w-6 h-6" />
<p className="ml-3 font-semibold">Search</p> <p className="ml-3 font-semibold">Search</p>
@@ -131,7 +127,7 @@ export default function NavMenu() {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{userData && {userData &&
<DropdownMenuItem> <DropdownMenuItem>
<Link href="/settings" className="no-underline"> <Link href="/settings" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<GearFine className="w-6 h-6" /> <GearFine className="w-6 h-6" />
<p className="ml-3 font-semibold">Settings</p> <p className="ml-3 font-semibold">Settings</p>
@@ -140,7 +136,7 @@ export default function NavMenu() {
</DropdownMenuItem> </DropdownMenuItem>
} }
<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"> <div className="flex flex-rows">
<Question className="w-6 h-6" /> <Question className="w-6 h-6" />
<p className="ml-3 font-semibold">Help</p> <p className="ml-3 font-semibold">Help</p>
@@ -150,7 +146,7 @@ export default function NavMenu() {
{ {
userData ? userData ?
<DropdownMenuItem> <DropdownMenuItem>
<Link href="/auth/logout" className="no-underline"> <Link href="/auth/logout" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<ArrowRight className="w-6 h-6" /> <ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Logout</p> <p className="ml-3 font-semibold">Logout</p>
@@ -159,7 +155,7 @@ export default function NavMenu() {
</DropdownMenuItem> </DropdownMenuItem>
: :
<DropdownMenuItem> <DropdownMenuItem>
<Link href="/auth/login" className="no-underline"> <Link href="/auth/login" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<ArrowRight className="w-6 h-6" /> <ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Login</p> <p className="ml-3 font-semibold">Login</p>
@@ -171,15 +167,15 @@ export default function NavMenu() {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
: :
<Menubar className='border-none hover:bg-stone-100 dark:hover:bg-neutral-900 bg-none'> <Menubar className='border-none'>
<MenubarMenu> <MenubarMenu>
<MenubarTrigger> <MenubarTrigger>
{ {
userData ? 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" /> <AvatarImage src={userData?.photo} alt="user profile" />
<AvatarFallback> <AvatarFallback className="bg-transparent hover:bg-muted">
{userData?.username[0]} {userData?.username[0].toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
: :
@@ -187,19 +183,15 @@ export default function NavMenu() {
} }
</MenubarTrigger> </MenubarTrigger>
<MenubarContent align="end" className="rounded-xl gap-2"> <MenubarContent align="end" className="rounded-xl gap-2">
<MenubarItem> <MenubarItem onClick={() => setDarkMode(!darkMode)} className="w-full hover:cursor-pointer">
<div <div
onClick={() => {
setDarkMode(!darkMode)
}
}
className="flex flex-rows"> className="flex flex-rows">
{darkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />} {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> <p className="ml-3 font-semibold">{darkMode ? 'Light Mode' : 'Dark Mode'}</p>
</div> </div>
</MenubarItem> </MenubarItem>
<MenubarItem> <MenubarItem>
<Link href="/agents" className="no-underline"> <Link href="/agents" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<User className="w-6 h-6" /> <User className="w-6 h-6" />
<p className="ml-3 font-semibold">Agents</p> <p className="ml-3 font-semibold">Agents</p>
@@ -207,7 +199,7 @@ export default function NavMenu() {
</Link> </Link>
</MenubarItem> </MenubarItem>
<MenubarItem> <MenubarItem>
<Link href="/automations" className="no-underline"> <Link href="/automations" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<Robot className="w-6 h-6" /> <Robot className="w-6 h-6" />
<p className="ml-3 font-semibold">Automations</p> <p className="ml-3 font-semibold">Automations</p>
@@ -215,7 +207,7 @@ export default function NavMenu() {
</Link> </Link>
</MenubarItem> </MenubarItem>
<MenubarItem> <MenubarItem>
<Link href="/search" className="no-underline"> <Link href="/search" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<MagnifyingGlass className="w-6 h-6" /> <MagnifyingGlass className="w-6 h-6" />
<p className="ml-3 font-semibold">Search</p> <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" /> <MenubarSeparator className="dark:bg-white height-[2px] bg-black" />
<MenubarItem> <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"> <div className="flex flex-rows">
<Question className="w-6 h-6" /> <Question className="w-6 h-6" />
<p className="ml-3 font-semibold">Help</p> <p className="ml-3 font-semibold">Help</p>
@@ -235,7 +227,7 @@ export default function NavMenu() {
{ {
userData && userData &&
<MenubarItem> <MenubarItem>
<Link href="/settings" className="no-underline"> <Link href="/settings" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<GearFine className="w-6 h-6" /> <GearFine className="w-6 h-6" />
<p className="ml-3 font-semibold">Settings</p> <p className="ml-3 font-semibold">Settings</p>
@@ -246,7 +238,7 @@ export default function NavMenu() {
{ {
userData ? userData ?
<MenubarItem> <MenubarItem>
<Link href="/auth/logout" className="no-underline"> <Link href="/auth/logout" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<ArrowRight className="w-6 h-6" /> <ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Logout</p> <p className="ml-3 font-semibold">Logout</p>
@@ -255,7 +247,7 @@ export default function NavMenu() {
</MenubarItem> </MenubarItem>
: :
<MenubarItem> <MenubarItem>
<Link href="/auth/login" className="no-underline"> <Link href="/auth/login" className="no-underline w-full">
<div className="flex flex-rows"> <div className="flex flex-rows">
<ArrowRight className="w-6 h-6" /> <ArrowRight className="w-6 h-6" />
<p className="ml-3 font-semibold">Login</p> <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) { export default function SuggestionCard(data: SuggestionCardProps) {
const bgColors = converColorToBgGradient(data.color); 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 titleClassName = `${styles.title} pt-2 dark:text-white dark:font-bold`;
const descriptionClassName = `${styles.text} dark:text-white`; const descriptionClassName = `${styles.text} dark:text-white`;