new menu & header layout

src/css/dark.css

@@ -13,7 +13,7 @@
     --notify: #7074da;
     --warning-background: #d87470;
     --heart-color: #f2231d;
-    --login-background: #2d2e36;
+    --login-background: #1f2125;
     --seen-indicator: rgba(255, 255, 255, 0.45);
     --input-bg: #1f2125;
     --input-text: #dbdcde;
@@ -38,4 +38,6 @@
     --day-separator-color: rgba(255, 255, 255, 0.88);
     --logotype-filter: contrast(0) brightness(2);
     --non-string-value-color: #8286ff;
+    --nav-border-bottom: 1px solid #222526;
+    --nav-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.8);
 }

src/css/light.css

@@ -37,4 +37,5 @@
     --day-separator-bg: rgba(227, 249, 255, 0.91);
     --day-separator-color: rgba(74, 74, 74, 0.88);
     --non-string-value-color: blue;
+    --nav-border-bottom: 1px solid rgba(0,0,0,.08);
 }

src/css/style.css

@@ -144,21 +144,22 @@ img, video {
   user-select: none;
 }
 
-.nav a.logo {
+.application-list a.logo {
   display: flex;
   align-items: center;
   transition: opacity 0.1s ease;
+  padding: 15px 30px;
 }
 
-.nav a.logo:focus {
+.application-list a.logo:focus {
   opacity: 0.75;
 }
 
-.nav a.logo img:first-child {
+.application-list a.logo img:first-child {
   margin-right: 9px;
 }
 
-.nav a.logo img:last-child {
+.application-list a.logo img:last-child {
   filter: var(--logotype-filter);
 }
 
@@ -332,7 +333,8 @@ img, video {
   flex:1;
   background-color: var(--header-color);
   max-height:60px;
-  border-bottom: 1px solid rgba(0,0,0,.08);
+  border-bottom: var(--nav-border-bottom);
+  box-shadow: var(--nav-shadow);
 }
 
 .nav .name {
@@ -402,8 +404,9 @@ header.footer .header-content {
 
 .main-view {
   flex:1;
-  overflow-y: auto;
   padding: 10px 15px;
+  overflow-y: auto;
+  height: 100%;
   background-color: var(--main-color);
   min-width: 0;
 }
@@ -480,15 +483,19 @@ header.footer .header-content {
 }
 
 .application-list {
+  -webkit-app-region: drag;
   z-index: 2;
   width: 220px;
   transition: all 0.25s ease;
-  padding-top: 15px;
   background: var(--menu-bg);
-  border-right: var(--sidebar-border-right)
+  border-right: var(--sidebar-border-right);
   color: var(--sidebar-color);
 }
 
+.application-list .electron-padding {
+  height: 40px;
+}
+
 .overlay {
   transition: all 0.25s ease;
   z-index: -1;
@@ -511,7 +518,7 @@ header.footer .header-content {
 
 @media (max-width:1100px) {
   .application-list {
-    width: 70px;
+    width: 78px;
     margin-left: 0;
   }
 
@@ -723,6 +730,7 @@ a.msg {
   flex-direction: row;
   height: 100%;
   flex: 1;
+  padding: 0;
 }
 
 #chat-view #message-list {

src/js/Main.js

@@ -19,7 +19,6 @@ import CheckoutView from './components/CheckoutView.js';
 import ProductView from './components/ProductView.js';
 import Login from './components/Login.js';
 import Profile from './components/Profile.js';
-import Header from './components/Header.js';
 import Footer from './components/Footer.js';
 import MessageView from './components/MessageView.js';
 import FollowsView from './components/FollowsView.js';
@@ -63,6 +62,12 @@ const MenuView = props => {
   const pub = Session.getPubKey();
   return html`
     <div class="application-list">
+      ${iris.util.isElectron ? html`<div class="electron-padding"/>` : html`
+        <a href="/" onClick=${e => this.onLogoClick(e)} tabindex="0" class="logo">
+          <img src="img/icon128.png" width=40 height=40/>
+          <img src="img/iris_logotype.png" height=23 width=41 />
+        </a>
+      `}
       <div class="visible-xs-block">
         <${Link} onClick=${() => props.toggleMenu(false)} activeClassName="active" href="/profile/${pub}">
           <span class="icon"><${Identicon} str=${pub} width=40/></span>
@@ -115,7 +120,6 @@ class Main extends Component {
     let content = '';
     if (this.state.loggedIn || window.location.hash.length <= 2) {
       content = this.state.loggedIn ? html`
-        <${Header} toggleMenu=${show => this.toggleMenu(show)}/>
         <section class="main ${this.state.showMenu ? 'menu-visible-xs' : ''}" style="flex-direction: row;">
           <${MenuView} toggleMenu=${show => this.toggleMenu(show)}/>
           <div class="overlay" onClick=${e => this.onClickOverlay(e)}></div>

src/js/components/ChatView.js

@@ -2,6 +2,7 @@ import { Component } from '../lib/preact.js';
 import { html } from '../Helpers.js';
 import { translate as t } from '../Translation.js';
 import State from '../State.js';
+import Header from './Header.js';
 import Identicon from './Identicon.js';
 import Message from './Message.js';
 import MessageForm from './MessageForm.js';
@@ -187,7 +188,8 @@ class ChatView extends Component {
     });
 
     return html`
-    <div id="chat-view">
+    <${Header} toggleMenu=${show => this.toggleMenu(show)}/>
+    <div id="chat-view" class="main-view">
     <${ChatList} class=${this.props.id ? 'hidden-xs' : ''}/>
     <div id="chat-main" class=${this.props.id ? '' : 'hidden-xs'}>
     ${this.props.id && this.props.id.length > 20 ? html`

src/js/components/FeedView.js

@@ -2,6 +2,7 @@ import { Component } from '../lib/preact.js';
 import Helpers, { html } from '../Helpers.js';
 import PublicMessages from '../PublicMessages.js';
 import State from '../State.js';
+import Header from './Header.js';
 import MessageForm from './MessageForm.js';
 import Identicon from './Identicon.js';
 import FollowButton from './FollowButton.js';
@@ -100,6 +101,7 @@ class FeedView extends Component {
 
   render() {
     return html`
+      <${Header} toggleMenu=${show => this.toggleMenu(show)}/>
       <div class="main-view public-messages-view" id="message-view">
         <div class="centered-container">
           <${MessageForm} activeChat="public" class="hidden-xs" autofocus=${false}/>

src/js/components/Header.js

@@ -68,7 +68,7 @@ class Header extends Component {
       }
 
       let title = '';
-      if (activeRoute.indexOf('/chat/') === 0) {
+      if (activeRoute.indexOf('/chat/') === 0 && activeRoute.indexOf('/chat/new') !== 0) {
         if (activeRoute.indexOf('/chat/') === 0 && Session.getKey() && this.chatId === Session.getKey().pub) {
           title = html`<b style="margin-right:5px">📝</b> <b>${t('note_to_self')}</b>`;
         } else {
@@ -116,12 +116,6 @@ class Header extends Component {
       </div>
       ` : ''}
       <div class="header-content">
-        ${iris.util.isElectron ? '' : html`
-          <a href="/" onClick=${e => this.onLogoClick(e)} tabindex="0" class="${activeRoute && activeRoute.indexOf('/chat/') === 0 ? 'hidden-xs' :'' } logo">
-            <img src="img/icon128.png" width=40 height=40/>
-            <img src="img/iris_logotype.png" height=23 width=41 />
-          </a>
-        `}
         <div class="text" style=${this.chatId ? 'cursor:pointer' : ''} onClick=${() => this.onTitleClicked()}>
           ${this.state.title && activeRoute && activeRoute.indexOf('/chat/') === 0 ? html`
             <div class="name">

src/js/components/Profile.js

@@ -4,6 +4,7 @@ import {translate as t} from '../Translation.js';
 import State from '../State.js';
 import Session from '../Session.js';
 import Helpers from '../Helpers.js';
+import Header from './Header.js';
 import MessageForm from './MessageForm.js';
 import ProfilePhotoPicker from './ProfilePhotoPicker.js';
 import { route } from '../lib/preact-router.es.js';
@@ -205,6 +206,7 @@ class Profile extends Component {
       }
     }
     return html`
+    <${Header} toggleMenu=${show => this.toggleMenu(show)}/>
     <div class="main-view" id="profile">
       <div class="content">
         <div class="profile-top">