Sticky nav on entry action button click

tank0226 · Jan 21, 2020 · cfd77d1 · cfd77d1
1 parent 996b2ec
commit cfd77d1
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
@@ -131,6 +131,11 @@ nav {
   display: none;
 }
 
+.entry-nav-top--sticky {
+  position: sticky;
+  top: 0;
+}
+
 @media (min-width: 993px) {
   .button-collapse {
     display: none;

diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
@@ -17,6 +17,13 @@ import './js/shortcuts/entry';
 /* Theme style */
 import './css/index.scss';
 
+const stickyNav = () => {
+  const nav = $('.js-entry-nav-top');
+  $('[data-toggle="actions"]').click(() => {
+    nav.toggleClass('entry-nav-top--sticky');
+  });
+};
+
 $(document).ready(() => {
   // sideNav
   $('.button-collapse').sideNav();
@@ -36,6 +43,7 @@ $(document).ready(() => {
   initFilters();
   initExport();
   initRandom();
+  stickyNav();
 
   const toggleNav = (toShow, toFocus) => {
     $('.nav-panel-actions').hide(100);

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
@@ -8,7 +8,7 @@
     <div class="progress">
         <div class="determinate"></div>
     </div>
-    <nav class="hide-on-large-only">
+    <nav class="hide-on-large-only js-entry-nav-top">
         <div class="nav-panel-item cyan darken-1">
             <ul>
                 <li>
@@ -281,7 +281,7 @@
         </article>
 
         <div class="fixed-action-btn horizontal click-to-toggle hide-on-large-only">
-            <a class="btn-floating btn-large">
+            <a class="btn-floating btn-large" data-toggle="actions">
               <i class="material-icons">menu</i>
             </a>
             <ul>

diff --git a/web/wallassets/material.css b/web/wallassets/material.css
diff --git a/web/wallassets/material.js b/web/wallassets/material.js