Add feature of going to default page by clicking bazarr icon

frontend/src/@scss/global.scss

@@ -20,6 +20,10 @@ td {
   }
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .opacity-100 {
   opacity: 100% !important;
 }

frontend/src/App/Header.tsx

@@ -29,7 +29,7 @@ import { useIsOffline } from "../@redux/hooks/site";
 import logo from "../@static/logo64.png";
 import { SystemApi } from "../apis";
 import { ActionButton, SearchBar, SearchResult } from "../components";
-import { useBaseUrl } from "../utilites";
+import { useGotoHomepage } from "../utilites";
 import "./header.scss";
 
 async function SearchItem(text: string) {
@@ -106,14 +106,19 @@ const Header: FunctionComponent<Props> = () => {
     SystemApi.status().finally(() => setReconnect(false));
   }, []);
 
-  const baseUrl = useBaseUrl();
+  const goHome = useGotoHomepage();
 
   return (
     <Navbar bg="primary" className="flex-grow-1 px-0">
       <div className="header-icon px-3 m-0 d-none d-md-block">
-        <Navbar.Brand href={baseUrl} className="">
+        <Image
-          <Image alt="brand" src={logo} width="32" height="32"></Image>
+          alt="brand"
-        </Navbar.Brand>
+          src={logo}
+          width="32"
+          height="32"
+          onClick={goHome}
+          className="cursor-pointer"
+        ></Image>
       </div>
       <Button className="mx-2 m-0 d-md-none" onClick={toggleSidebar}>
         <FontAwesomeIcon icon={faBars}></FontAwesomeIcon>

frontend/src/Sidebar/index.tsx

@@ -11,7 +11,7 @@ import { useReduxAction, useReduxStore } from "../@redux/hooks/base";
 import { useIsRadarrEnabled, useIsSonarrEnabled } from "../@redux/hooks/site";
 import logo from "../@static/logo64.png";
 import { SidebarToggleContext } from "../App";
-import { useAutoUpdate } from "../utilites/hooks";
+import { useAutoUpdate, useGotoHomepage } from "../utilites/hooks";
 import {
   BadgesContext,
   CollapseItem,
@@ -106,11 +106,20 @@ const Sidebar: FunctionComponent<Props> = ({ open }) => {
     [hiddenKeys]
   );
 
+  const goHome = useGotoHomepage();
+
   return (
     <React.Fragment>
       <aside className={cls.join(" ")}>
         <Container className="sidebar-title d-flex align-items-center d-md-none">
-          <Image alt="brand" src={logo} width="32" height="32"></Image>
+          <Image
+            alt="brand"
+            src={logo}
+            width="32"
+            height="32"
+            onClick={goHome}
+            className="cursor-pointer"
+          ></Image>
         </Container>
         <HiddenKeysContext.Provider value={hiddenKeys}>
           <BadgesContext.Provider value={badges}>

frontend/src/utilites/hooks.ts

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useHistory } from "react-router";
 import { mergeArray } from ".";
 
 export function useBaseUrl(slash: boolean = false) {
@@ -13,6 +14,11 @@ export function useBaseUrl(slash: boolean = false) {
   }
 }
 
+export function useGotoHomepage() {
+  const history = useHistory();
+  return useCallback(() => history.push("/"), [history]);
+}
+
 export function useCanUpdateInject() {
   if (process.env.NODE_ENV === "development") {
     return process.env["REACT_APP_CAN_UPDATE"] === "true";