slupjs · lucat1 · Aug 18, 2017 · Aug 14, 2017 · Aug 14, 2017 · Aug 14, 2017
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <body>
+  <body style="margin: 0;">
     <div id="root"></div>
     <script src="dist.js"></script>
   </body>

diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
     "babel-plugin-transform-object-rest-spread": "6.23.0",
     "babel-preset-es2015": "6.24.1",
     "inferno": "3.7.1",
+    "inferno-compat": "3.7.1",
     "inferno-component": "3.7.1",
+    "styled-components": "2.1.2",
     "webpack": "3.5.1",
     "webpack-dev-server": "2.7.1"
   },

diff --git a/packages/Navbar/.babelrc b/packages/Navbar/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [ "es2015" ],
+  "plugins": [
+    "inferno",
+    "transform-decorators-legacy",
+    "transform-class-properties",
+    "transform-object-rest-spread"
+  ]
+}
diff --git a/packages/Navbar/.npmignore b/packages/Navbar/.npmignore
@@ -0,0 +1,2 @@
+src
+yarn.lock
diff --git a/packages/Navbar/package.json b/packages/Navbar/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@slup/navbar",
+  "version": "0.0.1",
+  "description": "Material design navbar",
+  "main": "dist.js",
+  "author": "Gejsi",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "6.25.0",
+    "babel-loader": "7.1.1",
+    "babel-plugin-inferno": "3.2.0",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-decorators-legacy": "1.3.4",
+    "babel-plugin-transform-object-rest-spread": "6.23.0",
+    "babel-preset-es2015": "6.24.1",
+    "babili-webpack-plugin": "0.1.2",
+    "cross-env": "5.0.4",
+    "decko": "1.2.0",
+    "inferno": "3.7.1",
+    "inferno-compat": "3.7.1",
+    "inferno-component": "3.7.1",
+    "styled-components": "2.1.2",
+    "webpack": "3.4.1"
+  },
+  "scripts": {
+    "compile:watch": "webpack --watch --progress",
+    "compile:build": "cross-env NODE_ENV=production webpack --progress",
+    "prepublish": "yarn run compile:build"
+  }
+}
diff --git a/packages/Navbar/src/index.js b/packages/Navbar/src/index.js
@@ -0,0 +1,69 @@
+import Inferno   from 'inferno'
+import Component from 'inferno-component'
+import styled    from 'styled-components'
+import { bind }  from 'decko'
+
+export const Bar = styled.div`
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  transition:
+    max-height 150ms cubic-bezier(0.4, 0.0, 0.2, 1),
+        height 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  height: 64px;
+  max-height: ${props => props.maxHeight}px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  background: ${props => props.background || 'transparent'};
+  position:   ${props => props.fixed || props.reveal
+    ? 'fixed'
+    : 'absolute'
+  };
+  right: 0;
+  left: 0;
+  z-index: 998;
+
+  @media only screen and (max-width: 960px) {
+    height: 56px;
+  }
+`
+
+export class Navbar extends Component {
+  previousY = 0
+  previousX = 0
+  state = { maxHeight: 64 }
+
+  componentDidMount() {
+    if (this.props.reveal)
+      window.addEventListener('scroll', this.handleScroll)
+  }
+
+  componentWillUnmount() {
+    if (this.props.reveal)
+      window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  @bind
+  handleScroll() {
+    const currentX = window.scrollX
+    const currentY = window.scrollY
+
+    // Ignore the horizontal scroll
+    if(currentX !== this.previousX)
+      return this.previousX = currentX
+
+    if (currentY < this.previousY)
+      this.setState({ maxHeight: 64 })
+    else
+      this.setState({ maxHeight: 0 })
+
+    this.previousY = currentY
+  }
+
+  render(props) {
+    return <Bar {...props} maxHeight={this.state.maxHeight} />
+  }
+}
diff --git a/packages/Navbar/webpack.config.js b/packages/Navbar/webpack.config.js
@@ -0,0 +1,44 @@
+const webpack           = require('webpack')
+const BabiliPlugin      = require("babili-webpack-plugin")
+const { join }          = require('path')
+
+let config = {
+  entry: join(__dirname, 'src', 'index'),
+
+  output: {
+    path: __dirname,
+    filename: 'dist.js'
+  },
+
+  resolve: {
+    extensions: [ '.js' ],
+    alias: {
+      'react': 'inferno-compat',
+      'react-dom': 'inferno-compat'
+    }
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin()
+  ],
+
+  devtool: 'source-map',
+  target: 'web'
+}
+
+if(process.env.NODE_ENV == 'production') {
+  config.plugins.push(new BabiliPlugin())
+  config.plugins.push(new webpack.optimize.ModuleConcatenationPlugin())
+}
+
+module.exports = config