79 lines
1.7 KiB
TypeScript
79 lines
1.7 KiB
TypeScript
/**
|
|
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
|
|
*/
|
|
import * as styled from 'styled-components';
|
|
import {theme, paddings} from 'components/shared/theme';
|
|
|
|
const {colors, mediaPhone} = theme;
|
|
|
|
export const TopNavigation = styled.default.div<{isLoggedIn: boolean}>`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: ${paddings.medium};
|
|
height: 3.5rem;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
${({isLoggedIn}) =>
|
|
isLoggedIn &&
|
|
styled.css`
|
|
background-color: ${colors.headerColor};
|
|
padding: ${paddings.small} ${paddings.xlarge};
|
|
`}
|
|
`;
|
|
|
|
export const NavigationLeftSide = styled.default.div`
|
|
display: flex;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const MenuIcon = styled.default.img`
|
|
margin-right: ${paddings.medium};
|
|
width: 1.5rem;
|
|
`;
|
|
|
|
export const User = styled.default.div`
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
color: ${colors.white};
|
|
gap: ${paddings.small};
|
|
|
|
& div[role="button"] {
|
|
cursor: pointer;
|
|
padding: ${paddings.xsmall};
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s;
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const ApplicationId = styled.default.p`
|
|
margin: 0;
|
|
padding: 0 ${paddings.small};
|
|
`;
|
|
|
|
export const UserInitials = styled.default.div`
|
|
color: ${colors.white};
|
|
background-color: ${colors.lightBlue};
|
|
display: flex;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
text-transform: uppercase;
|
|
${mediaPhone} {
|
|
display: none;
|
|
}
|
|
`;
|