diff --git a/src/components/desktop.js b/src/components/desktop.js new file mode 100644 index 0000000..782dba8 --- /dev/null +++ b/src/components/desktop.js @@ -0,0 +1,129 @@ +import React from 'react'; +import {Link} from 'react-router-dom'; +import API from './SpreadsheetData'; +import {Donate} from './Snippets'; + +// Configuration for the language and background +// Images managed in css file +const language = "ENG"; +const bkgrnd = "05"; + +export default function(props) { + const children = props.routing(); + + return ( + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ +
+
+
+ ©2008 Chaotic USA Entertainment Group, Inc. +
+ U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved. +
+
+ +
+
+
+
+
+
+
+
+
+ + ); + } \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 8460f9c..0c6966c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,12 +1,14 @@ import React from 'react'; import {render} from 'react-dom'; -import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom'; +import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; import loadable from '@loadable/component'; +import windowWidth from './windowWidth'; +import Desktop from './desktop'; +import Mobile from './mobile'; import s from '../styles/app.style'; /* Components */ -import API from './SpreadsheetData'; -import {PageNotFound, UnderConstruction, Donate, Loading} from './Snippets'; +import {PageNotFound, UnderConstruction, Loading} from './Snippets'; import Create from './create/index'; const EnterTheCode = loadable( @@ -29,12 +31,10 @@ const Collection = loadable( {fallback: } ); -function Routing(props) { +function Routing() { return ( - - @@ -43,134 +43,14 @@ function Routing(props) { ); } -function Base(props) { - // Configuration for the language and background - // Images managed in css file - const language = "ENG"; - const bkgrnd = "05"; - - const children = ; - - return ( - -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {children} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- -
-
-
- ©2008 Chaotic USA Entertainment Group, Inc. -
- U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved. -
-
- -
-
-
-
-
-
-
-
-
- - ); +function Base() { + if (windowWidth() < 975) { + return (); + } + return (); } render( - - - - , document.getElementById('root'), + , + document.getElementById('root'), ); \ No newline at end of file diff --git a/src/components/mobile.tsx b/src/components/mobile.tsx new file mode 100644 index 0000000..4f4752e --- /dev/null +++ b/src/components/mobile.tsx @@ -0,0 +1,86 @@ +import React, { Fragment } from 'react'; +import { makeStyles, useTheme, ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { Toolbar, IconButton, AppBar, Typography, Container, Box +} from '@material-ui/core'; +import {Menu as MenuIcon} from '@material-ui/icons'; +import { blue } from '@material-ui/core/colors'; + +const theme = createMuiTheme({ + palette: { + primary: { + main: blue[900], + }, + } +}) + +export default function(props: { routing: any; }) { + return ( + + + + ); +} + + +const headerStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + } +})); + +const mainStyles = makeStyles(theme => ({ + root: { + padding: 0, + }, + content: { + padding: "0 24px", + } +})); + +function Base(props: { routing: any; }) { + const children = props.routing(); + const header = headerStyles(useTheme()); + const main = mainStyles(useTheme()); + + const handleClick = (event) => { + console.log("toggle"); + } + + return ( + + + + + + + + Chaotic Backup + + + + + + {children} + + + + ); +} \ No newline at end of file diff --git a/src/components/windowWidth.ts b/src/components/windowWidth.ts new file mode 100644 index 0000000..156b325 --- /dev/null +++ b/src/components/windowWidth.ts @@ -0,0 +1,15 @@ +import {useState, useEffect} from 'react'; + +export default function() { + const [width, setWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => setWidth(window.innerWidth); + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + return width; +} \ No newline at end of file