feat: add close button

src/routes/Player/SideDrawer/SideDrawer.less

@@ -31,6 +31,36 @@
     height: 100dvh;
     max-width: 35rem;
     overflow-y: auto;
+    position: relative;
+
+    .close-button {
+        position: absolute;
+        top: 1.3rem;
+        left: 1.3rem;
+        padding: 0.5rem;
+        background-color: transparent;
+        cursor: pointer;
+        z-index: 2;
+        border-radius: var(--border-radius);
+        transition: 0.3s all ease-in-out;
+        -webkit-tap-highlight-color: transparent;
+
+        .icon {
+            color: var(--primary-foreground-color);
+            width: 2rem;
+            height: 2rem;
+            opacity: 0.6;
+            transition: 0.3s opacity ease-in-out;
+        }
+
+        &:hover {
+            background-color: var(--overlay-color);
+
+            .icon {
+                opacity: 1;
+            }
+        }
+    }
 
     .info {
         padding: @padding;

src/routes/Player/SideDrawer/SideDrawer.tsx

@@ -6,6 +6,7 @@ import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
 import classNames from 'classnames';
 import styles from './SideDrawer.less';
 import { useServices } from 'stremio/services';
+import Icon from '@stremio/stremio-icons/react';
 
 type Props = {
     seriesInfo: { season: number, episode: number };
@@ -61,6 +62,9 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             <div className={classNames(styles['overlay'], { [styles['open']]: sideDrawerOpen })} onClick={closeSideBar} />
             {/* @ts-expect-error inert is not recognisable on div element; we need it to not focus the sideDrawer when closed */}
             <div className={classNames(styles['side-drawer'], className)} inert={!sideDrawerOpen ? '' : undefined}>
+                <div className={styles['close-button']} onClick={closeSideBar}>
+                    <Icon className={styles['icon']} name={'chevron-forward'} />
+                </div>
                 <div className={styles['info']}>
                     <MetaPreview
                         className={styles['side-drawer-meta-preview']}