Создайте клон WhatsApp с помощью Next.js: аватар на боковой панели

Часть 3: Аватар на боковой панели

"Исходный код"

Установить пользовательский интерфейс материалов

yarn add @mui/material @emotion/react @emotion/styled
yarn add @mui/material @mui/styled-engine-sc styled-components

Создайте компонент ‹Header› с цветом фона, равным белому. Установите отображение равным flex, а затем сделайте изображение профиля и значки с двух сторон, установив для выравнивания содержимого значение space-between.

Для ‹UserAvatar› мы добавляем cursor:pointer; и :hover:{opacity:0.8} . Поэтому при наведении курсора мыши на аватар он становится светлее.

import styled from 'styled-components';
import { Avatar } from '@mui/material';
const Sidebar = () => {
return (
<Container>
<Header>
<UserAvatar src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</Header>
</Container>
)
}
export default Sidebar
const Container = styled.div`
background-color: #FFFFFF;
min-width: 320px;
max-width:450px;
height:100%;
`
const Header = styled.div`
display:flex;
position:sticky;
top:0;
background-color:white;
justify-content: space-between;
align-items:center;
padding:15px;
height:80px;
border-bottom: 1px solid whitesmoke;
`;
const UserAvatar = styled(Avatar)`
cursor: pointer;
:hover{
opacity:0.8;
}
`;

Наконец, то, что мы создали, похоже на это.

Подписывайтесь на нас: Курсы Gumroad, YouTube, Medium, Udemy, Linkedin, Twitter, Instagram

Присоединяйтесь к партнерам, чтобы зарабатывать деньги

Дополнительные материалы на plainenglish.io