🐛 Attempt to fix theme bug on first load -1

Author: KRRISH96

doc/gatsby-node.js

@@ -5,3 +5,32 @@
  */
 
 // You can delete this file if you're not using it
+// const path = require('path');
+
+// exports.onCreateWebpackConfig = ({
+//   actions, stage,
+// }) => {
+//   const { setWebpackConfig } = actions;
+//   const PRODUCTION = stage !== 'develop';
+
+//   const sassLoader = PRODUCTION ?
+//     'sass-loader' :
+//     `${require.resolve('sass-loader')}?sourceMap`;
+
+//   const styleLoader = [
+//     'style-loader',
+//     sassLoader,
+//   ];
+
+//   setWebpackConfig({
+//     module: {
+//       rules: [
+//         {
+//           test: /\.scss$/,
+//           include: path.resolve(__dirname, './doc'),
+//           use: styleLoader,
+//         },
+//       ],
+//     },
+//   });
+// };

doc/package-lock.json

@@ -24,9 +24,11 @@
     "build": "gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "http-server": "rm -rf ./cache && rm -rf ./public && npm run build && http-server ./public"
   },
   "devDependencies": {
+    "http-server": "^0.11.1",
     "prettier": "^1.14.2"
   },
   "repository": {

doc/package.json

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import Navbar from '../../../lib/navbar';
 import liteLogo from '../images/match.svg';
-import theme from './theme.scss';
+import theme from './theme.module.scss';
 
 const Header = ({ location }) => (
   <Navbar theme={theme} className={`navbar${location.pathname !== '/' ? ' navbar-extended' : ''}`} position="fixed" flat title={<Link to="/">React Lite UI</Link>} leftIcon={<Link to="/"><img src={liteLogo} alt="navbar-left-logo" /></Link>}>

doc/src/components/header.js

@@ -28,4 +28,26 @@
       width: 100%;
       background: #e09b2d
   }
+}
+
+div[class*=navlinks] {
+  a {
+      &:hover {
+          background: transparent;
+          &::after {
+              content: '';
+              display: block;
+              height: 3px;
+              width: 100%;
+              background: #e09b2d
+          }
+      }
+
+      &::after {
+          content: '';
+          display: block;
+          height: 3px;
+          width: 100%;
+      }
+  }
 }

doc/src/components/styles.scss

@@ -44,8 +44,19 @@ module.exports = {
         ],
       },
       {
-        test: /\.module\.scss$/,
-        include: path.resolve(__dirname, './lib'),
+        test: /\.s(a|c)ss$/,
+        include: [
+          path.resolve(__dirname, './lib'),
+          path.resolve(__dirname, './doc'),
+        ],
+        use: styleLoader,
+      },
+      {
+        test: /\.module\.s(a|c)ss$/,
+        include: [
+          path.resolve(__dirname, './lib'),
+          path.resolve(__dirname, './doc'),
+        ],
         use: styleLoader,
       },
       {