[WIP] MaterialUI intergration

app/javascript/packs/application.js → app/javascript/packs/application.jsx

@@ -15,10 +15,17 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-require("jquery")
 require("@rails/ujs").start()
 
+import React from 'react';
+import ReactDOM from 'react-dom';
+
 import User from "../classes/user"
+import MainAppBar from "./mainAppBar"
+
+document.addEventListener("DOMContentLoaded", function(event) {
+  ReactDOM.render(<MainAppBar />, document.querySelector('nav'));
+});
 
 if (App.currentUserData) {
   App.currentUser = new User(App.currentUserData);

app/javascript/packs/mainAppBar.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+import AppBar from '@material-ui/core/AppBar';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  navButton: {
+    marginLeft: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+export default function mainAppBar() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" className={classes.title}>
+            Rails Base 6
+          </Typography>
+          <Button color="inherit" variant="outlined" className={classes.navButton} onClick={ () => window.location.href = '/users/sign_in' }>Sign In</Button>
+          <Button color="inherit" variant="outlined" className={classes.navButton} onClick={ () => window.location.href = '/users/sign_up' }>Sign Up</Button>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+

app/views/application/_navigation.html.slim

@@ -1,7 +1,8 @@
-.title-bar data-hide-for="medium" data-responsive-toggle="navigation_menu"
-  button.menu-icon data-toggle="" type="button"
-  title-bar-title Menu
+nav
+/ .title-bar data-hide-for="medium" data-responsive-toggle="navigation_menu"
+/   button.menu-icon data-toggle="" type="button"
+/   title-bar-title Menu
 
-nav.top-bar#navigation_menu
-  = render "navigation_main"
-  = render "navigation_user"
+/ nav.top-bar#navigation_menu
+/   = render "navigation_main"
+/   = render "navigation_user"

app/views/layouts/application.html.slim

@@ -7,12 +7,18 @@ html class="no-js" lang="en"
     meta name="viewport" content="width=device-width, initial-scale=1.0"
     meta name="robots" content="NOODP,NOYDIR"
 
+    link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+
     = display_meta_tags site: "RailsBase", keywords: %w[title site]
     = csrf_meta_tags
 
     = stylesheet_link_tag :application
 
-    = javascript_tag "window.App = {}"
+    javascript:
+      window.App = {}
+      App.currentUserData = #{{current_user.to_json}};
+
+    = javascript_pack_tag :application
 
     == analytics_init if GoogleAnalytics.valid_tracker?
 
@@ -24,9 +30,3 @@ html class="no-js" lang="en"
       = yield
 
     = render "footer"
-
-    javascript:
-      App.currentUserData = #{{current_user.to_json}};
-
-    = javascript_pack_tag :application
-    = javascript_include_tag :application

app/views/pages/home.html.slim

@@ -2,3 +2,4 @@
   .cell
     h2
       = title("Home")
+    #nav

config/webpack/environment.js

@@ -1,12 +1,3 @@
 const { environment } = require('@rails/webpacker')
 
-const webpack = require('webpack')
-
-environment.plugins.prepend('Provide',
-  new webpack.ProvidePlugin({
-    $: 'jquery/src/jquery',
-    jQuery: 'jquery/src/jquery'
-  })
-)
-
 module.exports = environment

package.json

@@ -1,10 +1,11 @@
 {
   "dependencies": {
     "@babel/preset-react": "^7.10.1",
+    "@material-ui/core": "^4.10.2",
+    "@material-ui/icons": "^4.9.1",
     "@rails/ujs": "^6.0.3-1",
     "@rails/webpacker": "5.1.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "jquery": "^3.5.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"