outline-mobile/src/components/CustomNavBar.tsx

import icon_bluetooth from '../assets/icon_bluetooth.svg';
import icon_arr_d from '../assets/icon_arr_down.svg';
import './CustomNavBar.scss';
import { useState } from 'react';
import { useAppSelector } from '../utils/hooks';
import { useNavigate } from 'react-router-dom';

export default function CustomNavBar({ title }: { title: string }) {
  const navigate = useNavigate();
  const device = useAppSelector((state) => state.context.device);
  const [showDetail, setShowDetail] = useState(false);

  return (
    <div className="relative bg-white h-[--navBarHeight] border-b border-[#D8D8D8]">
      {/** 温度，水平仪 */}
      <div
        className="absolute h-[30px] w-full bg-white border border-[#D8D8D8] flex items-center gap-2 px-2"
        style={{ top: device.connected && showDetail ? '100%' : 0, transition: 'top 300ms' }}
      >
        <span className="flex-1">温度: {device.temperature.toFixed(1)}°C</span>
        <span className="flex-1">X轴倾斜: {device.inclinatorX.toFixed(2)}</span>
        <span className="flex-1">Y轴倾斜: {device.inclinatorY.toFixed(2)}</span>
      </div>
      {/** 导航栏 */}
      <div className="absolute left-0 top-0 w-full h-full flex items-center px-3 bg-white">
        <h1 className="text-lg text-text ml-3">{title}</h1>
        {/** 蓝牙连接状态 */}
        {device.connected ? (
          <div
            className="ml-auto flex items-center cursor-pointer"
            onClick={() => setShowDetail(!showDetail)}
          >
            <div className="bluetooth-battery flex justify-center items-center">{device.power}%</div>
            <img src={icon_bluetooth} alt="icon" className="mx-2" />
            <span>设备已连接</span>
            <img
              src={icon_arr_d}
              alt="arr"
              style={{
                transform: device.connected && showDetail ? 'rotate(180deg)' : 'rotate(0deg)',
                transition: 'transform 300ms',
              }}
            />
          </div>
        ) : (
          <div
            className="ml-auto flex items-center cursor-pointer"
            onClick={() => navigate('/home/bluetooth')}
          >
            <img src={icon_bluetooth} alt="icon" className="mx-2" />
            <span>设备未连接</span>
          </div>
        )}
      </div>
    </div>
  );
}