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

Add dark mode toggle! And improve experience for train of thought

Browse Source
This commit is contained in:
sabaimran
2024-07-04 18:29:21 +05:30
parent 465ef0b772
commit aec44a0b89
14 changed files with 166 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,8 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Toggle } from '@/components/ui/toggle';
import { Moon } from '@phosphor-icons/react';
interface NavMenuProps {
@@ -36,6 +38,7 @@ export default function NavMenu(props: NavMenuProps) {
const [displayTitle, setDisplayTitle] = useState<string>(props.title || props.selected.toUpperCase());
const [isMobileWidth, setIsMobileWidth] = useState(false);
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
setIsMobileWidth(window.innerWidth < 768);
@@ -43,6 +46,31 @@ export default function NavMenu(props: NavMenuProps) {
}, [props.title]);
useEffect(() => {
window.addEventListener('resize', () => {
setIsMobileWidth(window.innerWidth < 768);
});
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark');
setDarkMode(true);
}
}, []);
useEffect(() => {
toggleDarkMode(darkMode);
}, [darkMode]);
function toggleDarkMode(darkMode: boolean) {
if (darkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
}
return (
<div className={styles.titleBar}>
<div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
@@ -94,30 +122,42 @@ export default function NavMenu(props: NavMenuProps) {
<MenubarTrigger>Automations</MenubarTrigger>
</Link>
</MenubarMenu>
{userData &&
<MenubarMenu>
<MenubarTrigger>Profile</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<Link href="/config">
Settings
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="https://docs.khoj.dev">
Help
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="/auth/logout">
Logout
</Link>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
}
<MenubarMenu>
<MenubarTrigger>Profile</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<Toggle
pressed={darkMode}
onClick={() => {
console.log("clicked on dark mode method");
setDarkMode(!darkMode)}
}>
<Moon />
</Toggle>
</MenubarItem>
{userData &&
<>
<MenubarItem>
<Link href="/config">
Settings
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="https://docs.khoj.dev">
Help
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="/auth/logout">
Logout
</Link>
</MenubarItem>
</>
}
</MenubarContent>
</MenubarMenu>
</Menubar>
}
</div>