feat: add links to navbar history items

Author: oae

src/components/navbar.tsx

@@ -30,6 +30,7 @@ import prettyBytes from 'pretty-bytes';
 import { NextLink } from '@mantine/next';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { ReactNode, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import { AppRouter } from '../server/trpc/router';
 import { trpc } from '../utils/trpc';
 import { MadeWith } from './madeWith';
@@ -48,6 +49,9 @@ const useStyles = createStyles((theme) => ({
   history: {
     textDecoration: 'none',
   },
+  historyItem: {
+    cursor: 'pointer',
+  },
   badge: {
     padding: 5,
     minWidth: 20,
@@ -142,13 +146,16 @@ function HistoryItem({ chapter }: { chapter: HistoryItemType }) {
 
 function History({ data }: { data: HistoryType }) {
   const { classes } = useStyles();
+  const router = useRouter();
 
   return (
     <Timeline lineWidth={2} className={classes.history}>
       {data.map((chapter) => {
         return (
           <Timeline.Item
             key={chapter.id}
+            className={classes.historyItem}
+            onClick={() => router.push(`/manga/${chapter.mangaId}`)}
             lineVariant="dotted"
             bullet={<Image mt={20} alt="header" src={chapter.manga.metadata.cover} height={40} width={26} />}
             title={<HistoryItemTitle chapter={chapter} />}