More responsive sidebar

apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx

@@ -51,47 +51,44 @@ const SideBar: React.FC<{
   const { book, bookDoc } = bookState;
 
   return isSideBarVisible ? (
-    <div
-      className={clsx(
-        'sidebar-container bg-base-200 z-20 h-full select-none',
-        'rounded-window-top-left rounded-window-bottom-left',
-        !isPinned && 'shadow-2xl',
-      )}
-      style={{
-        width: `${sideBarWidth}`,
-        minWidth: `${MIN_SIDEBAR_WIDTH * 100}%`,
-        maxWidth: `${MAX_SIDEBAR_WIDTH * 100}%`,
-        position: isPinned ? 'relative' : 'absolute',
-      }}
-    >
-      <SidebarHeader
-        isPinned={isPinned}
-        onGoToLibrary={onGoToLibrary}
-        onOpenSplitView={onOpenSplitView}
-        handleSideBarTogglePin={handleSideBarTogglePin}
-      />
-      <div className='border-b px-3'>
-        <BookCard cover={book.coverImageUrl!} title={book.title} author={book.author} />
-      </div>
-      <SidebarContent
-        activeTab={activeTab}
-        bookDoc={bookDoc}
-        currentHref={currentHref}
-        sideBarBookKey={sideBarBookKey!}
-      />
-      <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />
+    <>
       <div
-        className='drag-bar absolute right-0 top-0 h-full w-0.5 cursor-col-resize'
-        onMouseDown={handleMouseDown}
-      ></div>
-      {!isPinned && (
-        <div
-          className='overlay fixed top-0 h-full bg-black/20'
-          style={{ left: sideBarWidth, width: `calc(100% - ${sideBarWidth})` }}
-          onClick={handleClickOverlay}
+        className={clsx(
+          'sidebar-container bg-base-200 z-20 h-full min-w-60 select-none',
+          'rounded-window-top-left rounded-window-bottom-left',
+          !isPinned && 'shadow-2xl',
+        )}
+        style={{
+          width: `${sideBarWidth}`,
+          maxWidth: `${MAX_SIDEBAR_WIDTH * 100}%`,
+          position: isPinned ? 'relative' : 'absolute',
+        }}
+      >
+        <SidebarHeader
+          isPinned={isPinned}
+          onGoToLibrary={onGoToLibrary}
+          onOpenSplitView={onOpenSplitView}
+          handleSideBarTogglePin={handleSideBarTogglePin}
         />
+        <div className='border-b px-3'>
+          <BookCard cover={book.coverImageUrl!} title={book.title} author={book.author} />
+        </div>
+        <SidebarContent
+          activeTab={activeTab}
+          bookDoc={bookDoc}
+          currentHref={currentHref}
+          sideBarBookKey={sideBarBookKey!}
+        />
+        <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />
+        <div
+          className='drag-bar absolute right-0 top-0 h-full w-0.5 cursor-col-resize'
+          onMouseDown={handleMouseDown}
+        ></div>
+      </div>
+      {!isPinned && (
+        <div className='overlay fixed inset-0 z-10 bg-black/20' onClick={handleClickOverlay} />
       )}
-    </div>
+    </>
   ) : null;
 };