43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import Head from 'next/head';
|
|
import { useEffect } from 'react';
|
|
|
|
import 'tailwindcss/tailwind.css';
|
|
import Store from '../store';
|
|
|
|
import '../styles/global.css';
|
|
|
|
function MyApp({ Component, pageProps }) {
|
|
useEffect(() => {
|
|
// I don't know why, but we can't get the value of this CSS variable
|
|
// until a bit of a delay, maybe something with Next?
|
|
setTimeout(() => {
|
|
const safeAreaTop = parseInt(
|
|
window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')
|
|
);
|
|
const safeAreaBottom = window
|
|
.getComputedStyle(document.documentElement)
|
|
.getPropertyValue('--safe-area-bottom');
|
|
|
|
Store.update(s => {
|
|
s.safeAreaTop = safeAreaTop;
|
|
s.safeAreaBottom = safeAreaBottom;
|
|
});
|
|
}, 500);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
|
></meta>
|
|
<script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>
|
|
</Head>
|
|
<Component {...pageProps} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MyApp;
|