feat(navigation): sticky header

packages/my-joy-images/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-joy-images",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": true,
   "license": "MPL-2.0",
   "repository": "github:yldio/joyent-portal",

packages/my-joy-images/src/components/image.js

@@ -125,7 +125,9 @@ export const Image = ({
                   <Popover placement="bottom">
                     <PopoverItem disabled={false} onClick={onCreateInstance}>
                       <ItemAnchor
-                        href={`${GLOBAL.origin}/instances/~create/?image=${name}`}
+                        href={`${
+                          GLOBAL.origin
+                        }/instances/~create/?image=${name}`}
                         target="__blank"
                         rel="noopener noreferrer"
                       >

packages/my-joy-images/src/components/summary.js

@@ -116,7 +116,9 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
                 <Medium>
                   <Button
                     type="button"
-                    href={`${GLOBAL.origin}/instances/~create/?image=${image.name}`}
+                    href={`${GLOBAL.origin}/instances/~create/?image=${
+                      image.name
+                    }`}
                     target="__blank"
                     rel="noopener noreferrer"
                     bold

packages/my-joy-images/src/containers/list.js

@@ -160,7 +160,10 @@ export default compose(
     (dispatch, { removeImage, history }) => ({
       handleCreateInstance: image => {
         return window
-          .open(`${GLOBAL.origin}/instances/~create/?image=${image.name}`, '_blank')
+          .open(
+            `${GLOBAL.origin}/instances/~create/?image=${image.name}`,
+            '_blank'
+          )
           .focus();
       },
       handleRemove: async id => {

packages/my-joy-instances/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-joy-instances",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "private": true,
   "license": "MPL-2.0",
   "repository": "github:yldio/joyent-portal",

packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -3648,7 +3648,7 @@ exports[`renders <Item /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/undefined"
+          to="/instances/undefined"
         />
       </td>
       <td
@@ -4162,7 +4162,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/name"
+          to="/instances/name"
         >
           name
         </a>
@@ -4678,7 +4678,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/undefined"
+          to="/instances/undefined"
         />
       </td>
       <td
@@ -5185,7 +5185,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/undefined"
+          to="/instances/undefined"
         />
       </td>
       <td

packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -1437,7 +1437,7 @@ exports[`renders <Summary /> without throwing 1`] = `
             >
               <a
                 className="c18 c19 c20 c21"
-                href="http://localhost:3070/~create/undefined"
+                href="http://localhost/images/~create/undefined"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
@@ -3543,7 +3543,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
             >
               <a
                 className="c18 c19 c20 c21"
-                href="http://localhost:3070/~create/undefined"
+                href="http://localhost/images/~create/undefined"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
@@ -5904,7 +5904,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
             >
               <a
                 className="c18 c19 c20 c21"
-                href="http://localhost:3070/~create/undefined"
+                href="http://localhost/images/~create/undefined"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
@@ -8202,7 +8202,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
             >
               <a
                 className="c18 c19 c20 c21"
-                href="http://localhost:3070/~create/undefined"
+                href="http://localhost/images/~create/undefined"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
@@ -10415,7 +10415,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
             >
               <a
                 className="c18 c19 c20 c21"
-                href="http://localhost:3070/~create/undefined"
+                href="http://localhost/images/~create/undefined"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
@@ -12576,7 +12576,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
             >
               <a
                 className="c18 c19 c20 c21"
-                href="http://localhost:3070/~create/undefined"
+                href="http://localhost/images/~create/undefined"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
@@ -14567,7 +14567,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
             >
               <a
                 className="c18 c19 c20 c21"
-                href="http://localhost:3070/~create/undefined"
+                href="http://localhost/images/~create/undefined"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"

packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -3765,7 +3765,7 @@ exports[`renders <List instances /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/2252839a"
+              to="/instances/2252839a"
             >
               2252839a
             </a>
@@ -3896,7 +3896,7 @@ exports[`renders <List instances /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/f1bd1730"
+              to="/instances/f1bd1730"
             >
               f1bd1730
             </a>
@@ -5871,7 +5871,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/2252839a"
+              to="/instances/2252839a"
             >
               2252839a
             </a>
@@ -6002,7 +6002,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/f1bd1730"
+              to="/instances/f1bd1730"
             >
               f1bd1730
             </a>
@@ -8297,7 +8297,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/2252839a"
+              to="/instances/2252839a"
             >
               2252839a
             </a>
@@ -8428,7 +8428,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/f1bd1730"
+              to="/instances/f1bd1730"
             >
               f1bd1730
             </a>
@@ -10936,7 +10936,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <a
               className="c34 c35 c36"
-              to="/2252839a"
+              to="/instances/2252839a"
             >
               2252839a
             </a>
@@ -11067,7 +11067,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <a
               className="c34 c35 c36"
-              to="/f1bd1730"
+              to="/instances/f1bd1730"
             >
               f1bd1730
             </a>

packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -2484,7 +2484,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
               >
                 <a
                   className="c19 c20 c21 c22"
-                  href="http://localhost:3070/~create/undefined"
+                  href="http://localhost/images/~create/undefined"
                   icon={true}
                   rel="noopener noreferrer"
                   target="__blank"
@@ -4883,7 +4883,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
               >
                 <a
                   className="c19 c20 c21 c22"
-                  href="http://localhost:3070/~create/undefined"
+                  href="http://localhost/images/~create/undefined"
                   icon={true}
                   rel="noopener noreferrer"
                   target="__blank"

packages/my-joy-instances/src/routes.js

@@ -104,7 +104,9 @@ export default () => (
       <Route
         path="/instances/~create/"
         exact
-        component={({ match, location }) => (<Redirect to={`/instances/~create/name${location.search}`} />)}
+        component={({ match, location }) => (
+          <Redirect to={`/instances/~create/name${location.search}`} />
+        )}
       />
       <Route path="/instances/~create/:step" component={CreateInstance} />
     </Switch>

packages/my-joy-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-joy-navigation",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "license": "MPL-2.0",
   "main": "lib/index.js",
@@ -38,7 +38,8 @@
     "preact-emotion": "^8.0.12",
     "preact-emotion-flexboxgrid": "^1.0.1",
     "react-apollo": "^2.0.4",
-    "remcalc": "^1.0.10"
+    "remcalc": "^1.0.10",
+    "stickybits": "^3.1.1"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.2",

packages/my-joy-navigation/src/header.js

@@ -5,6 +5,7 @@ import pascalCase from 'pascal-case';
 import keys from 'lodash.keys';
 
 import { DataCenterIcon, TritonIcon, ServicesIcon } from './components';
+// import { ServicesIcon } from './components';
 import * as Overlays from './containers';
 
 import {

packages/my-joy-navigation/src/index.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import stickybits from 'stickybits';
 
 import App from './app';
 
 ReactDOM.render(<App />, document.getElementById('header'));
+
+stickybits('#header');

packages/ui-toolkit/src/base/global.js

@@ -31,7 +31,11 @@ export default ({ theme }) => css`
   html,
   body,
   #root {
-    min-height: 100vh;
+    min-height: calc(100vh - ${remcalc(48)});
+  }
+
+  #header {
+    z-index: 9999;
   }
 
   body > #root {

packages/ui-toolkit/src/footer/sticky-footer.js

@@ -27,11 +27,13 @@ const Footer = styled.div`
   height: ${remcalc(70)};
   max-height: ${remcalc(70)};
   z-index: 1;
+
   ${is('fixed')`
     position: fixed;
     left: 0;
     right: 0;
   `};
+
   ${is('bottom', 'fixed')`
     bottom: 0;
   `};

yarn.lock

@@ -5185,8 +5185,8 @@ handlebars@^4.0.2, handlebars@^4.0.3:
     uglify-js "^2.6"
 
 hapi-render-react-joyent-document@^4.3.0, hapi-render-react-joyent-document@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/hapi-render-react-joyent-document/-/hapi-render-react-joyent-document-4.4.0.tgz#af0b75f4b646908bc4f2ad41221ca1ecf219ff07"
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/hapi-render-react-joyent-document/-/hapi-render-react-joyent-document-4.4.1.tgz#41a6956b8647ba4d22ca86ae41e8f1735e0dadde"
   dependencies:
     through2 "^2.0.3"
 
@@ -10706,6 +10706,10 @@ statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+stickybits@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/stickybits/-/stickybits-3.1.1.tgz#b2c6a7e9d2ba6a19235d5068639298ac958e9dad"
+
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"