feishin/src/renderer/router/titlebar-outlet.tsx

import { Outlet } from 'react-router';
import styled from 'styled-components';
import { Titlebar } from '/@/renderer/features/titlebar/components/titlebar';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
import { Platform } from '/@/renderer/types';

const TitlebarContainer = styled.header`
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5000;
  height: 65px;
  background: var(--titlebar-controls-bg);
  -webkit-app-region: drag;
`;

export const TitlebarOutlet = () => {
  const { windowBarStyle } = useGeneralSettings();

  return (
    <>
      {windowBarStyle === Platform.WEB && (
        <TitlebarContainer>
          <Titlebar />
        </TitlebarContainer>
      )}
      <Outlet />
    </>
  );
};