feat: support safari tab bar toggle

src/components/SideBarBodyWrapper.tsx

@@ -6,6 +6,8 @@ import { defaultConfigs } from 'utils/config/helper'
 import { cx } from 'utils/cx'
 import { setCSSVariable } from 'utils/DOMHelper'
 import * as features from 'utils/features'
+import { detectBrowser } from 'utils/general'
+import { useConditionalHook } from '../utils/hooks/useConditionalHook'
 
 type Size = number
 export type Size2D = [Size, Size]
@@ -36,6 +38,11 @@ export function SideBarBodyWrapper({
   const configContext = useConfigs()
   const blockLeaveRef = React.useRef(false)
 
+  const heightForSafari = useConditionalHook(
+    () => detectBrowser() === 'Safari',
+    () => useWindowSize().height,
+  )
+
   React.useEffect(() => {
     setSize(baseSize)
   }, [baseSize])
@@ -95,11 +102,12 @@ export function SideBarBodyWrapper({
     [onLeave],
   )
 
-  const newLocal: [number, number] = React.useMemo(() => [size, size], [size])
+  const dummySize: [number, number] = React.useMemo(() => [size, size], [size])
   return (
     <div
       ref={bodyWrapperRef}
       className={cx('gitako-side-bar-body-wrapper', className)}
+      style={{ height: heightForSafari }}
       onMouseLeave={onMouseLeave}
     >
       <div className={'gitako-side-bar-body-wrapper-content'}>{children}</div>
@@ -113,7 +121,7 @@ export function SideBarBodyWrapper({
           onResizeStateChange={state => {
             blockLeaveRef.current = state === 'resizing'
           }}
-          size={newLocal}
+          size={dummySize}
         />
       )}
     </div>

src/utils/general.ts

@@ -34,6 +34,16 @@ function detectOS(): OperatingSystems {
 
 export const os = detectOS()
 
+export const detectBrowser = () => {
+  const ua = navigator.userAgent.toLowerCase()
+  if (ua.includes('safari')) {
+    if (ua.includes('chrome')) return 'Chrome'
+    return 'Safari'
+  }
+
+  return 'Other'
+}
+
 export function friendlyFormatShortcut(shortcut?: string) {
   if (!shortcut) return ''
   if (os === OperatingSystems.Windows) {

src/utils/hooks/useConditionalHook.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+
+export function useConditionalHook<T>(condition: () => boolean, hook: () => T) {
+  const [use] = React.useState(condition)
+  if (use) return hook()
+}