feat(ui): revamp the header nav

Author: did

app/frontend/editor/components/header-nav/device-toggler.vue

@@ -7,7 +7,7 @@
       :color="icon.color"
       class="cursor-pointer hover:bg-editor-primary hover:bg-opacity-5 px-2"
       :class="{ 
-        'mx-2': index === 1,
+        'mx-1': index === 1,
         'bg-editor-primary bg-opacity-5': device === icon.device
       }"
       size="2.5rem"

app/frontend/editor/components/header-nav/index.vue

@@ -7,54 +7,28 @@
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
     </div>
-    <div class="flex justify-between h-full w-full" v-else>
-      <div class="flex">
-        <router-link
-          :to="{ name: 'listPages' }"
-          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-          :class="{
-            'bg-white': !isListPagesActive,
-            'bg-editor-primary bg-opacity-5': isListPagesActive,
-          }"
-        >
-          <span>{{ $t('headerNav.pages') }}</span>
-          <uikit-page-icon class="ml-4" :page="currentPage" />
-          <span class="ml-2">{{ currentPage.title }}</span>
-          <uikit-icon name="arrow-down-s-line" class="ml-3" />
-        </router-link>
-
-        <separator />
-
-        <router-link
-          :to="{ name: 'editPageSettings' }"
-          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-          :class="{
-            'bg-white': !isEditPageActive,
-            'bg-editor-primary bg-opacity-5': isEditPageActive,
-          }"
-        >
-          <uikit-icon name="settings-4-line" size="1.25rem" />
-          <span class="ml-2">{{ $t('headerNav.pageSettings') }}</span>
-        </router-link>
-
-        <separator />
+    <div class="grid grid-cols-5 h-full w-full" v-else>
+      <div class="col-span-3 lg:col-span-2">
+        <div class="flex h-full">
+          <page-info />
+        </div>
       </div>
 
-      <div class="flex">
-        <div class="flex items-center px-6">
-          <device-toggler />
-        </div>
-        <separator />
+      <div class="col-span-1 hidden lg:flex justify-center">
+        <device-toggler />
+      </div>
 
+      <div class="col-span-2 flex justify-end h-full">
         <div class="flex h-full relative" v-if="hasMultipleLocales">
           <locale-toggler />
         </div>
         <separator v-if="hasMultipleLocales" />
 
         <preview-toggler v-if="isSitePublishable" />
-        <preview-button v-else />
+        <preview-button v-else class="hidden lg:flex" />
 
         <separator v-if="isSitePublishable" />
+        
         <div
           class="flex items-center h-full relative space-x-1 pr-4"
           v-if="isSitePublishable"
@@ -64,7 +38,7 @@
         </div>
 
         <div v-else>
-          <save-button :big="true" />
+          <save-button big />
         </div>
       </div>
     </div>
@@ -79,6 +53,7 @@ import PreviewToggler from './preview-toggler.vue'
 import PublishButton from './publish-button.vue'
 import SaveButton from './save-button.vue'
 import Separator from './separator.vue'
+import PageInfo from './page-info.vue'
 
 export default {
   name: 'HeaderNav',
@@ -90,17 +65,15 @@ export default {
     SaveButton,
     Separator,
     PreviewToggler,
+    PageInfo,
   },
   computed: {
     isLoading() {
       return !this.currentSite || !this.currentPage
     },
     isListPagesActive() {
       return this.$route.name === 'listPages'
-    },
-    isEditPageActive() {
-      return this.$route.name === 'editPageSettings'
-    },
+    },    
   },
 }
 </script>

app/frontend/editor/components/header-nav/page-info.vue

@@ -0,0 +1,30 @@
+<template>
+  <router-link
+    :to="{ name: 'listPages' }"
+    class="flex items-center h-full px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+    :class="{
+      'bg-white': !isListPagesActive,
+      'bg-editor-primary bg-opacity-5': isListPagesActive,
+    }"
+  >
+    <uikit-page-icon :page="currentPage" size="1.5rem" />
+    <div class="ml-4 flex flex-col leading-none">
+      <span class="text-base">{{ currentPage.title }}</span>
+      <span class="text-xs text-gray-500 -mt-1 truncate">/{{ currentPage.path }}</span>
+    </div>
+    <uikit-icon name="arrow-down-s-line" class="ml-3" />
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'PageInfo',
+  computed: {
+    isListPagesActive() {
+      return this.$route.name === 'listPages'
+    },
+  }
+}
+</script>
+
+

app/frontend/editor/components/header-nav/preview-button.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    :href="currentPage.previewUrl"
+    :href="pageUrl"
     target="_blank"
     class="px-6 flex items-center hover:bg-editor-primary/5 transition-colors duration-200"
   >
@@ -9,7 +9,12 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'PreviewButton',
+  computed: {
+    ...mapGetters(['pageUrl']),
+  },
 }
 </script>

app/frontend/editor/components/header-nav/separator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full py-4 w-px">
+  <div class="h-full py-4 w-px shrink-0">
     <div class="h-full w-full bg-gray-300" />
   </div>
 </template>

app/frontend/editor/components/kit/icon-button.vue

@@ -1,6 +1,8 @@
 <template>
   <button
     class="px-1.5 py-1.5 rounded-full bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-800 focus:outline-none hover:bg-opacity-10 transition-colors duration-200"
+    v-on="$listeners"
+    v-bind="$attrs"
   >
     <uikit-icon :name="iconName" size="1.15rem" />
   </button>
@@ -9,6 +11,7 @@
 <script>
 export default {
   name: 'UIKitIconButton',
+  inheritAttrs: false,
   props: {
     iconName: { type: String, required: true },
   },

app/frontend/editor/components/kit/page-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <uikit-icon :name="iconName" />
+  <uikit-icon :name="iconName" :size="size" />
 </template>
 
 <script>