адаптировали под мобилки

package.json

@@ -4,7 +4,7 @@
  "version": "0.0.0",
  "type": "module",
  "scripts": {
- "dev": "vite",
+ "dev": "vite --host",
  "build": "vite build",
  "preview": "vite preview"
  },

src/app/App.tsx

@@ -1,18 +1,26 @@
 import React, { useState } from 'react';
 import Container from '@mui/material/Container';
-import List from '@widgets/LaunchesList/Index';
+import List from '@widgets/LaunchesList/ui/List';
+import Drawer from '@widgets/LaunchesList/ui/Drawer';
 import DetailView from '@widgets/DetailView/Index';
 import Grid from '@mui/material/Grid';
+import Hidden from '@mui/material/Hidden';
 
 function App() {
  const [selectedLaunch, setSelectedLaunch] = useState({});
+
  return (
- <Container maxWidth={false} sx={{ minWidth: 950 }}>
+ <Container maxWidth={false} sx={{ overflow: 'hidden' }}>
  <Grid container spacing={2}>
- <Grid item xs={3}>
- <List setSelectedLaunch={setSelectedLaunch} />
+ <Grid item md={3} xs={0}>
+ <Hidden mdDown>
+ <List setSelectedLaunch={setSelectedLaunch} />
+ </Hidden>
+ <Hidden mdUp>
+ <Drawer setSelectedLaunch={setSelectedLaunch} />
+ </Hidden>
  </Grid>
- <Grid item xs={9}>
+ <Grid item md={9} xs={12}>
  <DetailView selectedLaunch={selectedLaunch} />
  </Grid>
  </Grid>

src/widgets/DetailView/index.scss

@@ -1,10 +1,11 @@
 .detail-view {
  &__background-image {
- position: absolute;
+ position: fixed;
  z-index: -1;
  width: 100%;
- height: 100%;
+ height: 100dvh;
  left: 0;
+ top: 0; 
  object-fit: cover;
  object-position: center;
  opacity: 0;

src/widgets/LaunchesList/ui/Drawer.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import MenuIcon from '@mui/icons-material/Menu';
+import { Drawer, Fab } from '@mui/material';
+import List from './List';
+
+const SDrawer = (props) => {
+ const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
+
+ return (
+ <React.Fragment>
+ <Fab
+ sx={{
+ zIndex: 10000,
+ position: 'fixed',
+ bottom: 16,
+ right: 16,
+ opacity: isDrawerOpen ? 0.5 : 1,
+ }}
+ variant={'circular'}
+ onClick={() => setIsDrawerOpen(!isDrawerOpen)}>
+ <MenuIcon />
+ </Fab>
+ <Drawer
+ PaperProps={{
+ sx: { backgroundColor: 'transparent' },
+ className: 'launches-list',
+ }}
+ open={isDrawerOpen}
+ onClick={() => setIsDrawerOpen(false)}>
+ <List {...props} />
+ </Drawer>
+ </React.Fragment>
+ );
+};
+
+export default SDrawer;

src/widgets/LaunchesList/ui/List.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import MList from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import { queryUpcomingLaunches } from '@shared/api/index';
+import Skeleton from './Skeleton.jsx';
+import '../index.scss';
+
+const List = ({
+ setSelectedLaunch,
+}: {
+ setSelectedLaunch: React.Dispatch<React.SetStateAction<{}>>;
+}) => {
+ const { data, status } = queryUpcomingLaunches();
+ const launches = data || [];
+
+ const skeletons = Array.from({ length: 10 }, (_, index) => (
+ <Skeleton key={index} />
+ ));
+
+ return (
+ <React.Fragment>
+ <MList>
+ {status === 'loading' && skeletons}
+
+ {launches.map((item) => {
+ const time = item.t0 && new Date(item.t0).toLocaleString('ru');
+ const header = `${item.provider.name} • ${item.name}`;
+ const subheader = `${item.provider.name} • ${item.vehicle.name} • ${
+ time || 'Время старта неизвестно'
+ }`;
+
+ return (
+ <ListItem
+ onClick={() => {
+ location.hash = `id=${item.id}`;
+ setSelectedLaunch(item);
+ }}
+ disablePadding
+ key={item.id}>
+ <ListItemButton>
+ <ListItemAvatar>
+ <Avatar alt={item.name} src={item.image} />
+ </ListItemAvatar>
+ <ListItemText primary={header} secondary={subheader} />
+ </ListItemButton>
+ </ListItem>
+ );
+ })}
+ </MList>
+ </React.Fragment>
+ );
+};
+
+export default List;