Commit fe0029e1 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Add mobile switch in App.js, triggers on resize and checks for userAgent

parent 86314ee3
import React from 'react';
import React, { useEffect, useState } from 'react';
import CNavbar from './components/navbar/CNavbar';
import './App.css';
import Main from './components/Main';
import SearchModal from './components/search/SearchModal';
import NoResultsModal from './components/queryResult/NoResultsModal';
import Mobile from './components/mobile/Mobile';
import Button from 'react-bootstrap/Button';
import AboutModal from './components/about/AboutModal';
const App = () => {
return (
<div className="App vh-100 min-vh-100">
<CNavbar />
<Main />
<SearchModal />
<NoResultsModal />
</div>
);
const [isMobile, setIsMobile] = useState(false);
const checkMobile = () => {
const mobileUserAgentRe = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
setIsMobile(mobileUserAgentRe.test(navigator.userAgent));
};
useEffect(() => {
checkMobile();
window.addEventListener('resize', checkMobile, { passive: true });
});
if (isMobile) {
return (
<div className="App vh-100 min-vh-100">
<Mobile />
</div>
);
} else {
return (
<div className="App vh-100 min-vh-100">
<CNavbar />
<Main />
<SearchModal />
<NoResultsModal />
<AboutModal />
</div>
);
}
};
export default App;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment