mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-02 02:10:27 +00:00
Hazem Krimi
38 lines
744 B
TypeScript
38 lines
744 B
TypeScript
import styled from 'styled-components';
|
|
import { StyledProps } from './types';
|
|
|
|
export const Bar = styled.nav<StyledProps>`
|
|
position: fixed;
|
|
z-index: 2;
|
|
top: 0;
|
|
right: 0;
|
|
transform-origin: right;
|
|
transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
|
|
width: 80%;
|
|
height: 100vh;
|
|
background: var(--text);
|
|
transition: transform 250ms ease-in-out;
|
|
display: grid;
|
|
grid-template-rows: 30% repeat(4, 50px);
|
|
padding: 1rem 1rem 5rem 1rem;
|
|
|
|
@media (orientation: landscape) {
|
|
grid-template-rows: auto;
|
|
}
|
|
|
|
.close {
|
|
justify-self: flex-end;
|
|
align-self: flex-start;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.mobile-button-wrapper {
|
|
display: flex;
|
|
margin: 0rem 1rem;
|
|
|
|
a {
|
|
color: var(--text-inverted) !important;
|
|
}
|
|
}
|
|
`;
|