diff --git a/src/App.tsx b/src/App.tsx index d91139a0c455919f884ada4972bc18fef295b1fe..a4e01a839c5f2c7e49420a3ad1a788fcee41d9ef 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,6 @@ import { QueryClient, QueryClientProvider } from 'react-query' import { BrowserRouter } from 'react-router-dom' import { ToastContainer } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' -import Layout from './components/Layout/Layout' import Router from './components/Routes/Router' import { theme } from './components/UI/theme' @@ -14,9 +13,7 @@ function App() { <BrowserRouter> <ThemeProvider theme={theme}> <QueryClientProvider client={queryClient}> - <Layout> - <Router /> - </Layout> + <Router /> <ToastContainer theme="colored" /> </QueryClientProvider> </ThemeProvider> diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx deleted file mode 100644 index 672c2eaf7e034e6f6d06b8c3279a1455e6e5b099..0000000000000000000000000000000000000000 --- a/src/components/Layout/Layout.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import SideBar from '../SideBar/SideBar' -import styles from './layout.module.scss' - -const Layout: React.FC = ({ children }) => { - return ( - <div className={styles.root}> - <SideBar /> - <main className={styles.wrapper}>{children}</main> - </div> - ) -} - -export default Layout diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss deleted file mode 100644 index 8735c26f9f84cec88b4c43ae65d6a11403c04cd2..0000000000000000000000000000000000000000 --- a/src/components/Layout/layout.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import '../../styles/config/colors'; -@import '../../styles/config/breakpoints'; - -.root { - display: flex; - background: $dark-bg; - height: 100vh; -} - -.wrapper { - flex: 1; - box-shadow: - 0px 5px 5px rgb(0 0 0 / 20%), - 0px 3px 14px rgb(0 0 0 / 12%), - 0px 8px 10px rgb(0 0 0 / 14%); - overflow-y: scroll; - - @media screen and (max-width: $width-tablet) { - margin-left: 0; - padding-bottom: 5rem; - } -} diff --git a/src/components/Loader/loader.scss b/src/components/Loader/loader.scss index 0f9e21444f395c31d30210636e98ab63bb1aee22..982003b1a436190ef287470f083a99e197e895cb 100644 --- a/src/components/Loader/loader.scss +++ b/src/components/Loader/loader.scss @@ -3,6 +3,7 @@ .loader-container { display: flex; height: 100%; + flex: 1; overflow: hidden; } .loader { diff --git a/src/components/Routes/Router.tsx b/src/components/Routes/Router.tsx index 7a723f12c1a6f8a225e306e8db5341e730d65472..64c8f6cbfaea33ba15f2932a25f06e4ace6bd55f 100644 --- a/src/components/Routes/Router.tsx +++ b/src/components/Routes/Router.tsx @@ -6,6 +6,7 @@ import Login from '../Login/Login' import Newsletter from '../Newsletter/Newsletter' import Popups from '../Popups/Popups' import Prices from '../Prices/Prices' +import SideBar from '../SideBar/SideBar' export const links: Record< string, @@ -43,21 +44,24 @@ const Router = () => { if (user) { return ( - <Routes> - <> - <Route path={links.newsletter.path} element={<Newsletter />} /> - <Route path={links.prices.path} element={<Prices />} /> - <Route path="/popups" element={<Popups />} /> - {user.isAdmin && ( - <Route path={links.consents.path} element={<Consents />} /> - )} - <Route path="/login" element={<Login />} /> - <Route - path="*" - element={<Navigate replace to={links.newsletter.path} />} - /> - </> - </Routes> + <> + <SideBar /> + <main className="wrapper"> + <Routes> + <Route path={links.newsletter.path} element={<Newsletter />} /> + <Route path={links.prices.path} element={<Prices />} /> + <Route path="/popups" element={<Popups />} /> + {user.isAdmin && ( + <Route path={links.consents.path} element={<Consents />} /> + )} + <Route path="/login" element={<Login />} /> + <Route + path="*" + element={<Navigate replace to={links.newsletter.path} />} + /> + </Routes> + </main> + </> ) } diff --git a/src/styles/index.scss b/src/styles/index.scss index 9ddc1f5643ace65aac17fa311d79544d0d27eadc..e634f95d9ecc2700c846a945c4bade28b3220ee8 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -9,6 +9,25 @@ color: $text-grey; } +#root { + display: flex; + background: $dark-bg; + height: 100vh; +} + +.wrapper { + flex: 1; + box-shadow: + 0px 5px 5px rgb(0 0 0 / 20%), + 0px 3px 14px rgb(0 0 0 / 12%), + 0px 8px 10px rgb(0 0 0 / 14%); + overflow-y: scroll; + + @media screen and (max-width: $width-tablet) { + padding-bottom: 5rem; + } +} + h1 { color: #fafafa; @include text-large();