Refactor desktop navbar into a component, change layout to grid for

better compatibility with search field and simpler CSS

3 files changed, 280 insertions, 0 deletions

diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
new file mode 100644
index 00000000..ee99ec10
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -0,0 +1,89 @@
+import SearchBar from 'components/search_bar/search_bar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+)
+
+export default {
+  components: {
+    SearchBar
+  },
+  data: () => ({
+    searchBarHidden: true,
+    supportsMask: window.CSS && window.CSS.supports && (
+      window.CSS.supports('mask-size', 'contain') ||
+        window.CSS.supports('-webkit-mask-size', 'contain') ||
+        window.CSS.supports('-moz-mask-size', 'contain') ||
+        window.CSS.supports('-ms-mask-size', 'contain') ||
+        window.CSS.supports('-o-mask-size', 'contain')
+    )
+  }),
+  computed: {
+    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
+    logoStyle () {
+      return {
+        'visibility': this.enableMask ? 'hidden' : 'visible'
+      }
+    },
+    logoMaskStyle () {
+      return this.enableMask ? {
+        'mask-image': `url(${this.$store.state.instance.logo})`
+      } : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      }
+    },
+    logoBgStyle () {
+      return Object.assign({
+        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        opacity: this.searchBarHidden ? 1 : 0
+      }, this.enableMask ? {} : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      })
+    },
+    logo () { return this.$store.state.instance.logo },
+    sitename () { return this.$store.state.instance.name },
+    hideSitename () { return this.$store.state.instance.hideSitename },
+    logoLeft () { return this.$store.state.instance.logoLeft },
+    currentUser () { return this.$store.state.users.currentUser },
+    privateMode () { return this.$store.state.instance.private },
+  },
+  methods: {
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    onSearchBarToggled (hidden) {
+      this.searchBarHidden = hidden
+    },
+    openSettingsModal () {
+      this.$store.dispatch('openSettingsModal')
+    },
+  }
+}
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
new file mode 100644
index 00000000..028692a9
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -0,0 +1,112 @@
+@import '../../_variables.scss';
+
+.DesktopNav {
+  height: 50px;
+  width: 100%;
+  position: fixed;
+
+  .inner-nav {
+    display: grid;
+    grid-template-rows: 50px;
+    grid-template-columns: 2fr auto 2fr;
+    grid-template-areas: "sitename logo actions";
+    box-sizing: border-box;
+    padding: 0 1.2em;
+    margin: auto;
+    max-width: 980px;
+  }
+
+  &.-logoLeft {
+    grid-template-columns: auto 2fr 2fr;
+    grid-template-areas: "logo sitename actions";
+  }
+
+  button {
+    &, svg {
+      color: $fallback--text;
+      color: var(--btnTopBarText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPressedTopBar, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPressedTopBarText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnDisabledTopBarText, $fallback--text);
+    }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnToggledTopBarText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btnToggledTopBar, $fallback--fg)
+    }
+  }
+
+  .logo {
+    grid-area: logo;
+    position: relative;
+    transition: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
+
+    @media all and (min-width: 800px) {
+      opacity: 1 !important;
+    }
+
+    .mask {
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      background-color: $fallback--fg;
+      background-color: var(--topBarText, $fallback--fg);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    img {
+      display: inline-block;
+      height: 50px;
+    }
+  }
+
+  .nav-icon {
+    margin-left: 0.2em;
+    width: 2em;
+    text-align: center;
+  }
+
+  a, a svg {
+    color: $fallback--link;
+    color: var(--topBarLink, $fallback--link);
+  }
+
+  .sitename {
+    grid-area: sitename;
+  }
+
+  .actions {
+    grid-area: actions;
+  }
+
+  .item {
+    flex: 1;
+    line-height: 50px;
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+
+    &.right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+}
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
new file mode 100644
index 00000000..d166be08
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -0,0 +1,79 @@
+<template>
+  <nav
+    id="nav"
+    class="DesktopNav"
+    :class="{ '-logoLeft': logoLeft }"
+    @click="scrollToTop()"
+    >
+    <div class="inner-nav">
+      <div class="item sitename">
+        <router-link
+          v-if="!hideSitename"
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+          >
+          {{ sitename }}
+        </router-link>
+      </div>
+      <router-link
+        class="logo"
+        :to="{ name: 'root' }"
+        :style="logoBgStyle"
+        >
+        <div
+          class="mask"
+          :style="logoMaskStyle"
+          />
+        <img
+          :src="logo"
+          :style="logoStyle"
+          >
+      </router-link>
+      <div class="item right actions">
+        <search-bar
+          v-if="currentUser || !privateMode"
+          @toggled="onSearchBarToggled"
+          @click.stop.native
+          />
+        <a
+          href="#"
+          class="nav-icon"
+          @click.stop="openSettingsModal"
+          >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="cog"
+            :title="$t('nav.preferences')"
+            />
+        </a>
+        <a
+          v-if="currentUser && currentUser.role === 'admin'"
+          href="/pleroma/admin/#/login-pleroma"
+          class="nav-icon"
+          target="_blank"
+          ><FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="tachometer-alt"
+            :title="$t('nav.administration')"
+            /></a>
+        <a
+          v-if="currentUser"
+          href="#"
+          class="nav-icon"
+          @click.prevent="logout"
+          ><FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+            :title="$t('login.logout')"
+            /></a>
+      </div>
+      </div>
+  </nav>
+</template>
+<script src="./desktop_nav.js"></script>
+
+<style src="./desktop_nav.scss" lang="scss"></style>