fix nav buttons

Author: 5rahim

CHANGELOG.md

@@ -9,7 +9,7 @@ All notable changes to this project will be documented in this file.
 - ⚡️ Desktop: Automatically restart server process when it crashes/exits
 - ⚡️ Desktop: Added 'Restart server' button when server process is terminated
 - ⚡️ Auto progress update now works for built-in media player
-- ⚡️ Desktop: Back/Forward navigation buttons when hovering logo #171
+- ⚡️ Desktop: Back/Forward navigation buttons #171
 - ⚡️ Open search page by clicking on media genres and ranks #172
 - ⚡️ Support for AniList 'repeat' field #169
 - ⚡️ Ignore dropped anime in missing episodes #170

seanime-web/src/app/(main)/_features/navigation/main-sidebar.tsx

@@ -27,13 +27,12 @@ import { useThemeSettings } from "@/lib/theme/hooks"
 import { useSetAtom } from "jotai"
 import { usePathname, useRouter } from "next/navigation"
 import React from "react"
-import { AiOutlineArrowLeft, AiOutlineArrowRight } from "react-icons/ai"
 import { BiCalendarAlt, BiDownload, BiExtension, BiLogOut, BiNews } from "react-icons/bi"
 import { FaBookReader } from "react-icons/fa"
 import { FiLogIn, FiSearch, FiSettings } from "react-icons/fi"
 import { HiOutlineServerStack } from "react-icons/hi2"
 import { IoCloudOfflineOutline, IoLibrary } from "react-icons/io5"
-import { PiClockCounterClockwiseFill } from "react-icons/pi"
+import { PiArrowCircleLeftDuotone, PiArrowCircleRightDuotone, PiClockCounterClockwiseFill } from "react-icons/pi"
 import { SiAnilist } from "react-icons/si"
 import { TbWorldDownload } from "react-icons/tb"
 
@@ -125,28 +124,7 @@ export function MainSidebar() {
 
                 <div>
                     <div className="mb-4 p-4 pb-0 flex justify-center w-full">
-                        {process.env.NEXT_PUBLIC_PLATFORM === "desktop" ? <div className="w-15 h-10 block w-fit">
-                            <HoverCard
-                                side="right"
-                                className="w-fit rounded-full flex gap-2 bg-gray-950 bg-opacity-50 p-2"
-                                trigger={<div className="">
-                                    <img src="/logo.png" alt="logo" className="w-15 h-10 block" />
-                                </div>}
-                            >
-                                <IconButton
-                                    icon={<AiOutlineArrowLeft />} rounded intent="white-outline" size="sm"
-                                    onClick={() => {
-                                        router.back()
-                                    }}
-                                />
-                                <IconButton
-                                    icon={<AiOutlineArrowRight />} rounded intent="white-outline" size="sm"
-                                    onClick={() => {
-                                        router.forward()
-                                    }}
-                                />
-                            </HoverCard>
-                        </div> : <img src="/logo.png" alt="logo" className="w-15 h-10" />}
+                        <img src="/logo.png" alt="logo" className="w-15 h-10" />
                     </div>
                     <VerticalMenu
                         className="px-4"
@@ -253,6 +231,32 @@ export function MainSidebar() {
                         handleUnexpandedSidebar={() => {}}
                     />
 
+                    {process.env.NEXT_PUBLIC_PLATFORM === "desktop" && <div className="block w-fit px-4">
+                        <HoverCard
+                            side="right"
+                            sideOffset={-8}
+                            // className="w-fit rounded-full flex gap-2 bg-gray-950 bg-opacity-50 p-2"
+                            className="bg-transparent border-none"
+                            trigger={<IconButton
+                                intent="gray-basic"
+                                className="px-6 opacity-50 hover:opacity-100"
+                                icon={<PiArrowCircleLeftDuotone />}
+                                onClick={() => {
+                                    router.back()
+                                }}
+                            />}
+                        >
+                            <IconButton
+                                icon={<PiArrowCircleRightDuotone />}
+                                intent="gray-subtle"
+                                className="px-6 opacity-50 hover:opacity-100"
+                                onClick={() => {
+                                    router.forward()
+                                }}
+                            />
+                        </HoverCard>
+                    </div>}
+
                 </div>
                 <div className="flex w-full gap-2 flex-col px-4">
                     {process.env.NEXT_PUBLIC_PLATFORM !== "desktop" ? <UpdateModal collapsed={isCollapsed} /> :

seanime-web/src/components/ui/hover-card/hover-card.tsx

@@ -37,7 +37,7 @@ export const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props
     } = props
 
     return (
-        <HoverCardPrimitive.Root openDelay={0}>
+        <HoverCardPrimitive.Root openDelay={1} closeDelay={0}>
             <HoverCardPrimitive.Trigger asChild>
                 {props.trigger}
             </HoverCardPrimitive.Trigger>