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';

export default function CustomNavBar({ title }: { title: string }) {
  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-4"
        style={{ top: showDetail ? '100%' : 0, transition: 'top 300ms' }}>
        <span className="flex-1">温度: 31.2°C</span>
        <span className="flex-1">X轴倾斜: -0.496</span>
        <span className="flex-1">Y轴倾斜: 3.005</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>
        <div className="ml-auto flex items-center" onClick={() => setShowDetail(!showDetail)}>
          <div className="bluetooth-battery flex justify-center items-center">78%</div>
          <img src={icon_bluetooth} alt="icon" className="mx-2" />
          <span>设备已连接</span>
          <img src={icon_arr_d} alt="arr" style={{
            transform: showDetail ? 'rotate(180deg)' : 'rotate(0deg)',
            transition: 'transform 300ms'
          }} />
        </div>
      </div>
    </div>
  );
}