Start refactoring top bar

_scripts/webpack.renderer.config.js

@@ -60,7 +60,10 @@ const config = {
             options: {
               // eslint-disable-next-line
               implementation: require('sass'),
-            },
+              sassOptions: {
+                indentedSyntax: true
+              }
+            }
           },
         ],
       },

src/renderer/components/top-nav/top-nav.css

@@ -1,194 +0,0 @@
-.topNav {
-    background-color: var(--card-bg-color);
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 4;
-    -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color);
-}
-
-.topNavBarColor {
-  background-color: var(--primary-color);
-}
-
-.menuIcon {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-}
-
-.navIcon {
-  font-size: 20px;
-  padding: 10px;
-  cursor: pointer;
-  color: var(--primary-text-color);
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.topNavBarColor .navIcon {
-  color: var(--text-with-main-color);
-}
-
-.navIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.topNavBarColor .navIcon:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.navIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.topNavBarColor .menuIcon:active {
-  background-color: var(--primary-color-active)
-}
-
-.navBackIcon {
-  position: absolute;
-  top: 10px;
-  left: 50px;
-}
-
-.navForwardIcon {
-  position: absolute;
-  top: 10px;
-  left: 85px;
-}
-
-.navSearchIcon {
-  position: absolute;
-  top: 10px;
-  display: none;
-}
-
-.logoIcon {
-  background-image: var(--logo-icon);
-  background-repeat: no-repeat;
-  background-position: right top;
-  background-size: 25px;
-  position: absolute;
-  top: 20px;
-  left: 140px;
-  width: 25px;
-  height: 25px;
-}
-
-.logoIconBarColor {
-  background-image: var(--logo-icon-bar-color);
-}
-
-.logoText {
-  background-image: var(--logo-text);
-  background-repeat: no-repeat;
-  background-position: right top;
-  background-size: 100px;
-  position: absolute;
-  top: 9px;
-  left: 175px;
-  width: 100px;
-  height: 40px;
-}
-
-.logoTextBarColor {
-  background-image: var(--logo-text-bar-color);
-}
-
-.searchContainer {
-  margin: 0 auto;
-  width: 500px;
-  position: relative;
-}
-
-.searchInput {
-  width: 450px;
-}
-
-.navFilterIcon {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
-.searchFilters {
-  margin-left: 270px;
-  margin-right: 20px;
-  margin-top: 10px;
-  margin-bottom: 20px;
-  transition-property: margin;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-}
-
-.expand {
-  margin-left: 100px;
-}
-
-@media only screen and (max-width: 680px) {
-  .menuIcon {
-    display: none;
-  }
-
-  .navBackIcon {
-    left: 45px;
-  }
-
-  .navForwardIcon {
-    left: 80px;
-  }
-
-  .navSearchIcon {
-    display: block;
-    left: 120px;
-  }
-
-  .logoIcon {
-    left: 10px;
-  }
-
-  .logoText {
-    display: none;
-  }
-
-  .searchContainer {
-    position: fixed;
-    display: none;
-    width: 100%;
-    top: 60px;
-    background-color: var(--side-nav-color);
-  }
-
-  .topNavBarColor .searchContainer {
-    background-color: var(--primary-color-hover);
-  }
-
-  .searchInput {
-    width: 80%;
-    margin: 0 auto;
-  }
-
-  .navFilterIcon {
-    right: 0px;
-  }
-
-  .searchFilters {
-    margin-top: 130px;
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-}

src/renderer/components/top-nav/top-nav.js

@@ -35,7 +35,7 @@ export default Vue.extend({
       const searchContainer = $('.searchContainer').get(0)
 
       if (width > 680) {
-        searchContainer.style.display = 'block'
+        searchContainer.style.display = ''
       } else {
         searchContainer.style.display = 'none'
       }
@@ -68,8 +68,8 @@ export default Vue.extend({
     toggleSearchContainer: function () {
       const searchContainer = $('.searchContainer').get(0)
 
-      if (searchContainer.style.display === 'none' || searchContainer.style.display === '') {
+      if (searchContainer.style.display === 'none') {
-        searchContainer.style.display = 'block'
+        searchContainer.style.display = ''
       } else {
         searchContainer.style.display = 'none'
       }

src/renderer/components/top-nav/top-nav.sass

@@ -0,0 +1,177 @@
+.topNav
+  position: fixed
+  z-index: 4
+  left: 0
+  right: 0
+  top: 0
+  height: 60px
+  line-height: 60px
+  background-color: var(--card-bg-color)
+  -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color)
+  display: grid
+  grid-template-columns: 1fr auto 1fr
+  align-items: center
+
+
+.side
+  display: flex
+  align-items: center
+
+
+.topNavBarColor
+  background-color: var(--primary-color)
+
+
+.navIcon
+  font-size: 20px
+  padding: 10px
+  cursor: pointer
+  color: var(--primary-text-color)
+  border-radius: 50%
+  transition: background 0.2s ease-out
+
+
+.topNavBarColor .navIcon
+  color: var(--text-with-main-color)
+
+
+.navIcon:hover
+  background-color: var(--side-nav-hover-color)
+  transition: background 0.2s ease-in
+
+
+.topNavBarColor .navIcon:hover
+  background-color: var(--primary-color-hover)
+
+
+.navIcon:active
+  background-color: var(--tertiary-text-color)
+  transition: background 0.2s ease-in
+
+
+.topNavBarColor .menuIcon:active
+  background-color: var(--primary-color-active)
+
+
+.navBackIcon
+  top: 10px
+  left: 50px
+
+
+.navForwardIcon
+  top: 10px
+  left: 85px
+
+
+.navSearchIcon
+  top: 10px
+  display: none
+
+.logo
+  display: flex
+  align-items: center
+  padding: 0px 25px 0px 10px
+
+  .logoIcon
+    background-image: var(--logo-icon)
+    background-repeat: no-repeat
+    background-position: right top
+    background-size: 25px
+    width: 25px
+    height: 25px
+
+
+  .logoIconBarColor
+    background-image: var(--logo-icon-bar-color)
+
+
+  .logoText
+    margin-left: 5px
+    position: relative
+    top: -3px
+    background-image: var(--logo-text)
+    background-repeat: no-repeat
+    background-position: right top
+    background-size: 100px
+    width: 100px
+    height: 40px
+
+
+  .logoTextBarColor
+    background-image: var(--logo-text-bar-color)
+
+.middle
+
+  .searchContainer
+    display: flex
+    align-items: center
+
+  .searchInput
+    width: 400px
+
+  .searchFilters
+    position: absolute
+    margin-left: 270px
+    margin-right: 20px
+    margin-top: 10px
+    margin-bottom: 20px
+    transition-property: margin
+    transition-duration: 150ms
+    transition-timing-function: ease-in-out
+
+
+.expand
+  margin-left: 100px
+
+
+@media only screen and (max-width: 680px)
+  .menuIcon
+    display: none
+
+
+  .navBackIcon
+    left: 45px
+
+
+  .navForwardIcon
+    left: 80px
+
+
+  .navSearchIcon
+    display: block
+    left: 120px
+
+
+  .logoIcon
+    left: 10px
+
+
+  .logoText
+    display: none
+
+
+  .searchContainer
+    position: fixed
+    display: none
+    width: 100%
+    top: 60px
+    background-color: var(--side-nav-color)
+
+
+  .topNavBarColor .searchContainer
+    background-color: var(--primary-color-hover)
+
+
+  .searchInput
+    width: 80%
+    margin: 0 auto
+
+
+  .navFilterIcon
+    right: 0px
+
+
+  .searchFilters
+    margin-top: 130px
+    margin-left: 10px
+    margin-right: 10px

src/renderer/components/top-nav/top-nav.vue

@@ -3,54 +3,61 @@
     class="topNav"
     :class="{ topNavBarColor: barColor }"
   >
-    <font-awesome-icon
+    <div class="side">
-      class=" menuIcon navIcon"
+      <font-awesome-icon
-      icon="bars"
+        class=" menuIcon navIcon"
-      @click="toggleSideNav"
+        icon="bars"
-    />
+        @click="toggleSideNav"
-    <font-awesome-icon
-      class="navBackIcon navIcon"
-      icon="arrow-left"
-      @click="historyBack"
-    />
-    <font-awesome-icon
-      class="navForwardIcon navIcon"
-      icon="arrow-right"
-      @click="historyForward"
-    />
-    <font-awesome-icon
-      class="navSearchIcon navIcon"
-      icon="search"
-      @click="toggleSearchContainer"
-    />
-    <div
-      class="logoIcon"
-      :class="{ logoIconBarColor: barColor }"
-    />
-    <div
-      class="logoText"
-      :class="{ logoTextBarColor: barColor }"
-    />
-    <div class="searchContainer">
-      <ft-input
-        placeholder="Search / Go to URL"
-        class="searchInput"
-        :is-search="true"
-        @click="goToSearch"
       />
       <font-awesome-icon
-        class="navFilterIcon navIcon"
+        class="navBackIcon navIcon"
-        icon="filter"
+        icon="arrow-left"
-        @click="showFilters = !showFilters"
+        @click="historyBack"
+      />
+      <font-awesome-icon
+        class="navForwardIcon navIcon"
+        icon="arrow-right"
+        @click="historyForward"
+      />
+      <font-awesome-icon
+        class="navSearchIcon navIcon"
+        icon="search"
+        @click="toggleSearchContainer"
+      />
+      <div class="logo">
+        <div
+          class="logoIcon"
+          :class="{ logoIconBarColor: barColor }"
+        />
+        <div
+          class="logoText"
+          :class="{ logoTextBarColor: barColor }"
+        />
+      </div>
+    </div>
+    <div class="middle">
+      <div class="searchContainer">
+        <ft-input
+          placeholder="Search / Go to URL"
+          class="searchInput"
+          :is-search="true"
+          @click="goToSearch"
+        />
+        <font-awesome-icon
+          class="navFilterIcon navIcon"
+          icon="filter"
+          @click="showFilters = !showFilters"
+        />
+      </div>
+      <ft-search-filters
+        v-show="showFilters"
+        class="searchFilters"
+        :class="{ expand: !isSideNavOpen }"
       />
     </div>
-    <ft-search-filters
+    <div class="side" />
-      v-show="showFilters"
-      class="searchFilters"
-      :class="{ expand: !isSideNavOpen }"
-    />
   </div>
 </template>
 
 <script src="./top-nav.js" />
-<style scoped src="./top-nav.css" />
+<style scoped lang="sass" src="./top-nav.sass" />