70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { isMac } from '@renderer/config/constant'
|
|
import { useRuntime } from '@renderer/hooks/useStore'
|
|
import { FC, PropsWithChildren } from 'react'
|
|
import styled from 'styled-components'
|
|
|
|
type Props = PropsWithChildren & JSX.IntrinsicElements['div']
|
|
|
|
export const Navbar: FC<Props> = ({ children, ...props }) => {
|
|
const { minappShow } = useRuntime()
|
|
const backgroundColor = minappShow ? 'var(--color-background)' : 'var(--navbar-background)'
|
|
|
|
return (
|
|
<NavbarContainer {...props} style={{ backgroundColor }}>
|
|
{children}
|
|
</NavbarContainer>
|
|
)
|
|
}
|
|
|
|
export const NavbarLeft: FC<Props> = ({ children, ...props }) => {
|
|
return <NavbarLeftContainer {...props}>{children}</NavbarLeftContainer>
|
|
}
|
|
|
|
export const NavbarCenter: FC<Props> = ({ children, ...props }) => {
|
|
return <NavbarCenterContainer {...props}>{children}</NavbarCenterContainer>
|
|
}
|
|
|
|
export const NavbarRight: FC<Props> = ({ children, ...props }) => {
|
|
return <NavbarRightContainer {...props}>{children}</NavbarRightContainer>
|
|
}
|
|
|
|
const NavbarContainer = styled.div`
|
|
min-width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-height: var(--navbar-height);
|
|
max-height: var(--navbar-height);
|
|
margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
|
|
padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
|
|
border-bottom: 0.5px solid var(--color-border);
|
|
background-color: var(--navbar-background);
|
|
transition: background-color 0.3s ease;
|
|
-webkit-app-region: drag;
|
|
`
|
|
|
|
const NavbarLeftContainer = styled.div`
|
|
min-width: var(--assistants-width);
|
|
padding: 0 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
color: var(--color-text-1);
|
|
`
|
|
|
|
const NavbarCenterContainer = styled.div`
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 ${isMac ? '20px' : '15px'};
|
|
font-weight: bold;
|
|
color: var(--color-text-1);
|
|
`
|
|
|
|
const NavbarRightContainer = styled.div`
|
|
min-width: var(--settings-width);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
`
|