feat: sidebar+top nav V2

src/components/dashboard.js

@@ -4,8 +4,8 @@ import dashboardStyles from '../../style/dashboard.scss';
 import dashboardButtonsStyles from '../../style/dashboard-filter.scss';
 import { PageViewElement } from './page-view-element.js';
 import '@polymer/iron-icons/iron-icons.js';
-import './sidebar.js';
-import './top-nav.js';
+import './sidebarV2.js';
+import './top-navV2.js';
 import './info-card.js';
 import './tag-card.js';
 import './news-feed.js';
@@ -19,17 +19,17 @@ class OAEDashboard extends PageViewElement {
 
   render() {
     return html`
-      <section class="hero is-primary is-fullheight">
+      <section class="hero is-fullheight">
         <div class="hero-body is-fullheight">
           <div class="container content-dashboard is-fluid">
             <div class="columns dasboard">
-              <div class="column is-narrow sidebar">
-                <sidebar-nav></sidebar-nav>
+              <div class="column is-narrow sidebar is-fullheight">
+                <sidebar-nav2></sidebar-nav2>
               </div>
               <div class="column content-base">
                 <div class=" column content-wrap">
                   <div class="column top-nav">
-                    <top-nav></top-nav>
+                    <top-nav2></top-nav2>
                   </div>
                   <div class=" columns is-flex main-content">
                     <div class="column is-three-fifths main-left">

src/components/my-view1.js

@@ -1,55 +1,85 @@
-/**
-@license
-Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-
 import { html } from 'lit-element';
+import sharedStyles from '../../style/app.scss';
+import dashboardStyles from '../../style/dashboard.scss';
+import dashboardButtonsStyles from '../../style/dashboard-filter.scss';
 import { PageViewElement } from './page-view-element.js';
-
-// These are the shared styles needed by this element.
-import { SharedStyles } from './shared-styles.js';
+import '@polymer/iron-icons/iron-icons.js';
+import './top-nav.js';
+import './sidebar.js';
+import './info-card.js';
+import './tag-card.js';
+import './news-feed.js';
+import './quick-settings.js';
+import './tags.js';
 
 class MyView1 extends PageViewElement {
   static get styles() {
-    return [SharedStyles];
+    return [sharedStyles, dashboardStyles, dashboardButtonsStyles];
   }
 
   render() {
     return html`
-      <section>
-        <h2>Static page</h2>
-        <p>This is a text-only page.</p>
-        <p>It doesn't do anything other than display some static text.</p>
-      </section>
-      <section>
-        <h2>Welcome</h2>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in
-          diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu
-          ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class
-          aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id
-          purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare,
-          aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in
-          sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at
-          laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.
-        </p>
-      </section>
-      <section>
-        <p>
-          Vestibulum at est ex. Aenean id ligula id nibh dictum laoreet. Etiam non semper erat. Pellentesque eu justo
-          rhoncus diam vulputate facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat
-          metus ex, vel fringilla massa tincidunt sit amet. Nunc facilisis bibendum tristique. Mauris commodo, dolor
-          vitae dapibus fermentum, odio nibh viverra lorem, eu cursus diam turpis et sapien. Nunc suscipit tortor a
-          ligula tincidunt, id hendrerit tellus sollicitudin.
-        </p>
+      <section class="hero is-fullheight">
+        <!-- Hero head: will stick at the top -->
+        <div class="hero-head">
+          <top-nav></top-nav>
+        </div>
+
+        <!-- Hero content: will be in the middle -->
+        <div class="hero-body">
+          <div class="container content-dashboard is-fluid">
+            <div class="columns dasboard">
+              <div class="column is-narrow sidebar is-fullheight">
+                <sidebar-nav></sidebar-nav>
+              </div>
+              <div class="column content-base">
+                <div class=" column content-wrap">
+                  <div class=" columns is-flex main-content">
+                    <div class="column is-three-fifths main-left">
+                      <section class="column activity-dashboard">
+                        <section class="is-flex">
+                          <ul class="breadcrumb">
+                            <li><a href="#">User Profile Area</a></li>
+                            <li>Dashboard</li>
+                          </ul>
+                        </section>
+                        <nav class="level">
+                          <!-- Left side -->
+                          <div class="level-left">
+                            <div class="level-item">
+                              <span class="dashboard-icon">
+                                <iron-icon icon="icons:update"></iron-icon>
+                              </span>
+                              <h3>Recent Activity</h3>
+                            </div>
+                          </div>
+                          <!-- Right side -->
+                          <div class="level-right">
+                            <div class="buttons">
+                              <button class="button filter-feed filter-active-feed">Most Recent</button>
+                              <button class="button filter-feed">Oldest</button>
+                            </div>
+                          </div>
+                        </nav>
+                        <news-feed></news-feed>
+                        <news-feed></news-feed>
+                        <news-feed></news-feed>
+                      </section>
+                    </div>
+                    <div class="column">
+                      <quick-settings></quick-settings>
+                      <info-card></info-card>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
       </section>
     `;
   }
 }
-
 window.customElements.define('my-view1', MyView1);

src/components/shop-products.js

@@ -10,75 +10,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 /* eslint-disable import/no-unassigned-import */
 
-import { LitElement, html, css } from 'lit-element';
-import { connect } from 'pwa-helpers/connect-mixin.js';
-
-// This element is connected to the Redux store.
-import { store } from '../store.js';
-
-// These are the elements needed by this element.
-import './shop-item.js';
-
-// These are the actions needed by this element.
-import { getAllProducts, addToCart } from '../actions/shop.js';
-
-// These are the elements needed by this element.
-import { addToCartIcon } from './my-icons.js';
-
-// These are the shared styles needed by this element.
-import { ButtonSharedStyles } from './button-shared-styles.js';
-
-class ShopProducts extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      _products: { type: Object }
-    };
-  }
-
+class ShopProducts extends PageViewElement {
   static get styles() {
-    return [
-      ButtonSharedStyles,
-      css`
-        :host {
-          display: block;
-        }
-      `
-    ];
+    return [sharedStyles, dashboardStyles, dashboardButtonsStyles];
   }
-
-  render() {
-    return html`
-      ${Object.keys(this._products).map(key => {
-        const item = this._products[key];
-        return html`
-          <div>
-            <shop-item name="${item.title}" amount="${item.inventory}" price="${item.price}"></shop-item>
-            <button
-              .disabled="${item.inventory === 0}"
-              @click="${this._addButtonClicked}"
-              data-index="${item.id}"
-              title="${item.inventory === 0 ? 'Sold out' : 'Add to cart'}"
-            >
-              ${item.inventory === 0 ? 'Sold out' : addToCartIcon}
-            </button>
-          </div>
-        `;
-      })}
-    `;
-  }
-
-  firstUpdated() {
-    store.dispatch(getAllProducts());
-  }
-
-  _addButtonClicked(e) {
-    store.dispatch(addToCart(e.currentTarget.dataset.index));
-  }
-
-  // This is called every time something is updated in the store.
-  stateChanged(state) {
-    this._products = state.shop.products;
+
+    render() {
+      return html`
+
+      `;
+    }
   }
-}
 
 window.customElements.define('shop-products', ShopProducts);

src/components/sidebar.js

@@ -13,11 +13,6 @@ class Sidebar extends LitElement {
   render() {
     return html`
       <aside class="menu">
-        <div class="navbar-brand sidebar-brand">
-          <a class="navbar-item" href="http://0.0.0.0:8080/oae">
-            <img src="/images/logo-oae2.svg" width="112" height="28" />
-          </a>
-        </div>
         <ul class="menu-list">
           <li>
             <span class="icon sidebar-icon">

src/components/sidebarV2.js

@@ -0,0 +1,68 @@
+import { html, LitElement } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import '@polymer/iron-icons/av-icons.js';
+import homepageStyles from '../../style/homepage.scss';
+import sharedStyles from '../../style/app.scss';
+
+class SidebarV2 extends LitElement {
+  static get styles() {
+    return [sharedStyles, homepageStyles];
+  }
+
+  render() {
+    return html`
+      <aside class="menu">
+        <div class="navbar-brand sidebar-brand">
+          <a class="navbar-item" href="http://0.0.0.0:8080/oae">
+            <img src="/images/logo-oae2.svg" width="112" height="28" />
+          </a>
+        </div>
+        <ul class="menu-list">
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="dashboard"></iron-icon>
+            </span>
+            <a class="dashboard">
+              Dashboard
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="av:library-books"></iron-icon>
+            </span>
+            <a class="library">
+              Library
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="content-paste"></iron-icon>
+            </span>
+            <a class="discussions">
+              Discussions
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="social:people-outline"></iron-icon>
+            </span>
+            <a class="groups">
+              Groups
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="social:public"></iron-icon>
+            </span>
+            <a class="network">
+              Network
+            </a>
+          </li>
+        </ul>
+      </aside>
+    `;
+  }
+}
+
+window.customElements.define('sidebar-nav2', SidebarV2);

src/components/top-nav.js

@@ -15,29 +15,39 @@ class topNav extends LitElement {
 
   render() {
     return html`
-        <section>
-          <nav class="navbar" role="navigation" aria-label="dropdown navigation">
+      <header class="navbar">
+        <div class="container top-nav">
+          <div class="navbar-brand">
+            <a class="navbar-item" href="http://0.0.0.0:8080/oae">
+              <img src="/images/logo-oae2.svg" width="112" height="28" />
+            </a>
             <div class="navbar-item">
               <div class="field has-addons has-addons-centered">
                 <p class="control">
                   <span class="icon topbar-search-icon">
                     <iron-icon icon="search"></iron-icon>
                   </span>
-                    <p class="control">
-                      <input class="input top-nav-input" type="text" placeholder="Type to search">
-                    </p>
-              </div>
-            </div>
-              <div class="navbar-end">
-                  <notifications-button></notifications-button>
-                  <context-button></context-button>
-                  <userprofile-button></userprofile-button>
-                </div>
+                </p>
+                <p class="control">
+                  <input class="input top-nav-input" type="text" placeholder="Type to search" />
+                </p>
               </div>
             </div>
+            <span class="navbar-burger burger" data-target="navbarMenuHeroC">
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+          </div>
+          <div id="navbarMenuHeroC" class="navbar-menu">
+            <div class="navbar-end">
+            <notifications-button></notifications-button>
+            <context-button></context-button>
+            <userprofile-button></userprofile-button>
             </div>
-          </nav>
-        </section>
+          </div>
+        </div>
+      </header>
     `;
   }
 }

src/components/top-navV2.js

@@ -0,0 +1,51 @@
+import { html, LitElement } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import '@polymer/iron-icons/maps-icons.js';
+import homepageStyles from '../../style/homepage.scss';
+import sharedStyles from '../../style/app.scss';
+import './notifications.js';
+import './context.js';
+import './user-button.js';
+
+class topNavV2 extends LitElement {
+  static get styles() {
+    return [sharedStyles, homepageStyles];
+  }
+
+  render() {
+    return html`
+      <header class="navbar">
+        <div class="container top-nav">
+            <div class="navbar-item">
+              <div class="field has-addons has-addons-centered">
+                <p class="control">
+                  <span class="icon topbar-search-icon">
+                    <iron-icon icon="search"></iron-icon>
+                  </span>
+                </p>
+                <p class="control">
+                  <input class="input top-nav-input" type="text" placeholder="Type to search" />
+                </p>
+              </div>
+            </div>
+            <span class="navbar-burger burger" data-target="navbarMenuHeroC">
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+          </div>
+          <div id="navbarMenuHeroC" class="navbar-menu">
+            <div class="navbar-end">
+            <notifications-button></notifications-button>
+            <context-button></context-button>
+            <userprofile-button></userprofile-button>
+            </div>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+}
+
+window.customElements.define('top-nav2', topNavV2);

style/app.scss

@@ -21,6 +21,7 @@ $link: #0060df;
 @import '../node_modules/bulma/sass/components/dropdown.sass';
 @import '../node_modules/bulma/sass/components/modal.sass';
 @import '../node_modules/bulma/sass/components/level.sass';
+@import '../node_modules/bulma/sass/components/tabs.sass';
 
 // Elements
 @import '../node_modules/bulma/sass/elements/box.sass';
@@ -96,7 +97,7 @@ body {
 .hero-body {
   margin: 0;
   padding: 0;
-  background-color: #fafafa;
+  //background-color: #fafafa;
 }
 
 .container.is-fluid {
@@ -127,10 +128,10 @@ body {
 }
 
 .column.is-narrow {
-  background-color: white;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  z-index: 1;
-  width: 210px;
+  //background-color: white;
+  //box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  //z-index: 1;
+  width: 200px;
   padding: 0;
 }
 
@@ -149,8 +150,8 @@ body {
 }
 
 .sidebar-brand {
-  margin: -70px 0 30px 0;
-  padding-left: 30px;
+  margin: -10px 0 30px 0;
+  padding-left: 25px;
 }
 
 .navbar-item img {
@@ -159,7 +160,9 @@ body {
 
 .menu {
   width: 185px;
-  position: fixed;
+  //position: fixed;
+  //top: 8.5em;
+  margin-top: 3.5em;
 }
 
 .menu-list {
@@ -168,7 +171,7 @@ body {
 }
 
 .menu-list li {
-  padding-left: 35px;
+  padding-left: 30px;
   margin-bottom: 18px;
   border-radius: 0 25px 25px 0;
   height: 30px;
@@ -207,6 +210,11 @@ a.network {
 }
 
 // Top Bar
+.top-nav {
+  margin: 0.5em;
+  max-width: 97%;
+}
+
 .topbar-search-icon {
   display: flex;
   align-items: center;
@@ -244,7 +252,7 @@ a.network {
 
 // Navbar
 .navbar {
-  background-color: transparent;
+  background-color: #fafafa;
 }
 
 .tags {

style/dashboard.scss

@@ -10,4 +10,8 @@ h3 {
 
 .content-dashboard {
   position: absolute;
+}
+
+.sidebar {
+  height: 100%;
 }

style/topnav-buttons.scss

@@ -12,13 +12,14 @@
 
 .navbar-item.has-dropdown {
   color: #0060df;
-  margin-right: 15px;
+  margin-top: 18px;
+  margin-right: 10px;
   font-size: 14px;
   height: 35px;
-  border-radius: 25px;
-  border: solid;
-  border-color: #EEEEEE;
-  border-width: 1px;
+  //border-radius: 25px;
+  //border: solid;
+  //border-color: #EEEEEE;
+  //border-width: 1px;
 }
 
 .notification-icon {
@@ -43,7 +44,7 @@
 }
 
 .navbar-item.is-hoverable {
-  background-color: white;
+  background-color: transparent;
 }
 
 .notification-icon {