🐛 Fix pages dropdown in viewer

CHANGES.md

@@ -9,6 +9,7 @@
 
 - Fix problem with exporting before the document is saved [Taiga #2189](https://tree.taiga.io/project/penpot/issue/2189)
 - Fix undo stacking when changing color from color-picker [Taiga #2191](https://tree.taiga.io/project/penpot/issue/2191)
+- Fix pages dropdown in viewer [Taiga #2087](https://tree.taiga.io/project/penpot/issue/2087)
 
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

frontend/resources/styles/main/partials/viewer-header.scss

@@ -6,7 +6,6 @@
   height: 48px;
   padding: 0 $size-4 0 55px;
   position: relative;
-  z-index: 12;
   justify-content: space-between;
 
   a {

frontend/resources/styles/main/partials/viewer-thumbnails.scss

@@ -6,7 +6,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  z-index: 12;
+  z-index: 10;
 
   &.invisible {
     visibility: hidden;

frontend/src/app/main/ui/viewer/header.cljs

@@ -75,31 +75,33 @@
 
 (mf/defc header-sitemap
   [{:keys [project file page frame index] :as props}]
-  (let [project-name (:name project)
-        file-name    (:name file)
-        page-name    (:name page)
-        frame-name   (:name frame)
-        total        (count (:frames page))
-
-        toggle-thumbnails
-        (fn []
-          (st/emit! dv/toggle-thumbnails-panel))
-
+  (let [project-name   (:name project)
+        file-name      (:name file)
+        page-name      (:name page)
+        frame-name     (:name frame)
+        total          (count (:frames page))
         show-dropdown? (mf/use-state false)
 
+        toggle-thumbnails
+        (mf/use-callback
+         (fn []
+           (st/emit! dv/toggle-thumbnails-panel)))
+
         open-dropdown
-        (fn []
-          (reset! show-dropdown? true)
-          (st/emit! dv/close-thumbnails-panel))
+        (mf/use-callback
+         (fn []
+           (reset! show-dropdown? true)))
 
         close-dropdown
-        (fn []
-          (reset! show-dropdown? false))
+        (mf/use-callback
+         (fn []
+           (reset! show-dropdown? false)))
 
         navigate-to
-        (fn [page-id]
-          (st/emit! (dv/go-to-page page-id))
-          (reset! show-dropdown? false))]
+        (mf/use-callback
+         (fn [page-id]
+           (st/emit! (dv/go-to-page page-id))
+           (reset! show-dropdown? false)))]
 
      [:div.sitemap-zone {:alt (tr "viewer.header.sitemap")}
       [:div.breadcrumb
@@ -108,6 +110,7 @@
        [:span "/"]
        [:span.file-name file-name]
        [:span "/"]
+
        [:span.page-name page-name]
        [:span.icon i/arrow-down]