turkey/cv4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.1.3

Browse Source
This commit is contained in:
User
2025-01-18 19:05:23 -05:00
parent 3f282d6ecd
commit 14938f63df
23 changed files with 652 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
resources/js/components/ui/app-sidebar.jsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { Link, router, usePage } from '@inertiajs/react';
import { BadgeCheck, ChevronsUpDown, Star, History, ChevronDown, LogOut, Search, Book, TableOfContents, House, HardDriveDownload } from 'lucide-react';
import { BadgeCheck, ChevronsUpDown, Star, History, ChevronDown, LogOut, Search, Book, TableOfContents, House, HardDriveDownload, Moon, Sun, Layers, SquarePower } from 'lucide-react';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
@@ -9,16 +9,15 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
export function AppSidebar({ auth }) {
const { tags } = usePage().props;
const { tags } = usePage().props;
const [search, setSearch] = useState('');
const searchOnSubmitHandler = (e) => {
e.preventDefault();
// Visit the search page
router.get(route('comics.search', [search]), {}, {
});
// Visit the search page
router.get(route('comics.search', [search]));
}
const SidebarItem = (props) => {
@@ -44,6 +43,36 @@ export function AppSidebar({ auth }) {
);
};
const getTheme = () => {
if (localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return 'light';
}
const themeButtonOnclickHandler = () => {
const t = (theme === 'light') ? 'dark' : 'light';
// Set local storage
localStorage.setItem('theme', t);
setTheme(t);
setThemeInHtml(t);
}
const setThemeInHtml = (theme) => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
root.classList.add(theme);
}
const [theme, setTheme] = useState(getTheme());
useEffect(() => {
setTheme(getTheme());
setThemeInHtml(getTheme());
}, []);
return (
<Sidebar>
<SidebarContent>
@@ -57,7 +86,7 @@ export function AppSidebar({ auth }) {
</div>
<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold">Comic</span>
<span>0.1.2</span>
<span>0.1.3</span>
</div>
</Link>
</SidebarMenuButton>
@@ -147,8 +176,7 @@ export function AppSidebar({ auth }) {
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
<SidebarMenuButton size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg">
@@ -186,6 +214,13 @@ export function AppSidebar({ auth }) {
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<SquarePower /> History On
</DropdownMenuItem>
<DropdownMenuItem onClick={ () => themeButtonOnclickHandler() }>
<>{ theme === 'dark' ? (<Sun />) : (<Moon />) } Toggle theme</>
</DropdownMenuItem>
<DropdownMenuItem asChild><a href="/queues" target="_blank"><Layers /> Queues</a></DropdownMenuItem>
<DropdownMenuItem asChild><Link href={ route('profile.edit') }><BadgeCheck /> Profile</Link></DropdownMenuItem>
<DropdownMenuItem asChild><Link href={ route('comics.favourites') }><Star /> Favourites</Link></DropdownMenuItem>
<DropdownMenuItem asChild><Link href={ route('comics.histories') }><History /> History</Link></DropdownMenuItem>