✨ Hide navbar in fullscreen view mode

frontend/resources/styles/main/layouts/handoff.scss

@@ -6,19 +6,6 @@ $width-settings-bar: 16rem;
   grid-template-columns: 1fr;
   user-select: none;
 
-  &.fullscreen {
-    .viewer-header {
-      opacity: 0;
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .viewer-content {
-      grid-row: 1 / span 2;
-    }
-  }
-
   .viewer-header {
     grid-column: 1 / span 1;
     grid-row: 1 / span 1;
@@ -30,6 +17,25 @@ $width-settings-bar: 16rem;
   }
 }
 
+.fullscreen .handoff-layout {
+  .viewer-header {
+    width: 100%;
+    position: fixed;
+    top: -39px;
+    left: 0;
+    transition: top 400ms ease 300ms;
+  }
+
+  & .viewer-header:hover {
+    top: 0;
+    transition: top 200ms;
+  }
+
+  .viewer-content {
+    grid-row: 1 / span 2;
+  }
+}
+
 .handoff-layout {
   .viewer-preview {
     flex-wrap: nowrap;

frontend/resources/styles/main/layouts/viewer.scss

@@ -4,19 +4,6 @@
   grid-template-columns: 1fr;
   user-select: none;
 
-  &.fullscreen {
-    .viewer-header {
-      opacity: 0;
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .viewer-content {
-      grid-row: 1 / span 2;
-    }
-  }
-
   .viewer-header {
     grid-column: 1 / span 1;
     grid-row: 1 / span 1;
@@ -27,3 +14,22 @@
     grid-row: 2 / span 1;
   }
 }
+
+.fullscreen .viewer-layout {
+  & .viewer-header {
+    width: 100%;
+    position: fixed;
+    top: -39px;
+    left: 0;
+    transition: top 400ms ease 300ms;
+  }
+
+  & .viewer-header:hover {
+    top: 0;
+    transition: top 200ms;
+  }
+
+  & .viewer-content {
+    grid-row: 1 / span 2;
+  }
+}

frontend/src/app/main/data/viewer.cljs

@@ -342,9 +342,7 @@
             pparams (:path-params route)
             qparams (:query-params route)]
         (rx/of
-         (if (= :handoff section)
+          (rt/nav :viewer pparams (assoc qparams :section section)))))))
-           (rt/nav :handoff pparams qparams)
-           (rt/nav :viewer pparams (assoc qparams :section section))))))))
 
 
 (defn set-current-frame [frame-id]

frontend/src/app/main/ui.cljs

@@ -20,6 +20,7 @@
    [app.main.store :as st]
    [app.main.ui.auth :refer [auth]]
    [app.main.ui.auth.verify-token :refer [verify-token]]
+   [app.main.ui.components.fullscreen :as fs]
    [app.main.ui.context :as ctx]
    [app.main.ui.cursors :as c]
    [app.main.ui.dashboard :refer [dashboard]]
@@ -80,11 +81,6 @@
      {:path-params ::viewer-path-params
       :query-params ::viewer-query-params}}]
 
-   ["/handoff/:file-id/:page-id"
-    {:name :handoff
-     :conform {:path-params ::viewer-path-params
-               :query-params ::viewer-query-params}}]
-
    (when *assert*
      ["/debug/icons-preview" :debug-icons-preview])
 
@@ -151,22 +147,17 @@
            section (get-in route [:query-params :section] :interactions)
            file-id (get-in route [:path-params :file-id])
            page-id (get-in route [:path-params :page-id])]
+       [:& fs/fullscreen-wrapper {}
+        (if (= section :handoff)
+          [:& handoff {:page-id page-id
+                       :file-id file-id
+                       :index index
+                       :token token}]
           [:& viewer-page {:page-id page-id
                            :file-id file-id
                            :section section
                            :index index
-                        :token token}])
+                           :token token}])])
-
-     :handoff
-     (let [file-id (get-in route [:path-params :file-id])
-           page-id (get-in route [:path-params :page-id])
-           index   (get-in route [:query-params :index])
-           token   (get-in route [:query-params :token])]
-
-       [:& handoff {:page-id page-id
-                    :file-id file-id
-                    :index index
-                    :token token}])
 
      :render-object
      (do

frontend/src/app/main/ui/handoff.cljs

@@ -14,7 +14,6 @@
    [app.main.data.viewer.shortcuts :as sc]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.fullscreen :as fs]
    [app.main.ui.handoff.left-sidebar :refer [left-sidebar]]
    [app.main.ui.handoff.render :refer [render-frame-svg]]
    [app.main.ui.handoff.right-sidebar :refer [right-sidebar]]
@@ -97,7 +96,6 @@
     (mf/use-effect on-mount)
     (hooks/use-shortcuts sc/shortcuts)
 
-    [:& fs/fullscreen-wrapper {}
     [:div.handoff-layout
      [:& header
       {:data data
@@ -113,7 +111,7 @@
                         :state state
                         :index index
                         :page-id page-id
-                         :file-id file-id}]]]]))
+                        :file-id file-id}]]]))
 
 (mf/defc handoff
   [{:keys [file-id page-id index token] :as props}]

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

@@ -21,7 +21,6 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.comments :as cmt]
-   [app.main.ui.components.fullscreen :as fs]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.header :refer [header]]
@@ -243,7 +242,6 @@
     (mf/use-effect on-mount)
     (hooks/use-shortcuts sc/shortcuts)
 
-    [:& fs/fullscreen-wrapper {}
     [:div.viewer-layout
      [:& header
       {:data data
@@ -259,7 +257,7 @@
       [:& main-panel {:data data
                       :section section
                       :state state
-                       :index index}]]]]))
+                      :index index}]]]))
 
 
 ;; --- Component: Viewer Page