Add scrolling SubNavigation to Home and Account timelines

app/styles/components/account-header.scss

@@ -335,3 +335,13 @@
     }
   }
 }
+
+.account__sub-navigation {
+  display: none;
+
+  @media (max-width: 897px) {
+    display: flex;
+    position: fixed;
+    margin: 0;
+  }
+}

app/styles/components/columns.scss

@@ -924,8 +924,8 @@
 }
 
 // Make MaterialStatus flush against SubNavigation
-.sub-navigation ~ .slist .item-list > article:first-child .material-status__status,
-.sub-navigation ~ .material-status:not(.material-status + .material-status) .material-status__status {
+.sub-navigation:not(.sub-navigation--hidden) ~ .slist .item-list > article:first-child .material-status__status,
+.sub-navigation:not(.sub-navigation--hidden) ~ .material-status:not(.material-status + .material-status) .material-status__status {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -940,7 +940,7 @@
     }
   }
 
-  .sub-navigation ~ .slist .slist__append {
+  .sub-navigation:not(.sub-navigation--hidden) ~ .slist .slist__append {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }

app/styles/components/timeline-queue-header.scss

@@ -15,7 +15,7 @@
   padding: 0 10px;
   z-index: 500;
 
-  .sub-navigation ~ & {
+  .sub-navigation:not(.sub-navigation--hidden) ~ & {
     top: calc(60px + 41px);
   }
 

app/styles/components/wtf-panel.scss

@@ -162,7 +162,7 @@
   }
 }
 
-.column .sub-navigation ~ .wtf-panel {
+.column .sub-navigation:not(.sub-navigation--hidden) ~ .wtf-panel {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }

app/styles/navigation.scss

@@ -128,11 +128,22 @@
   align-items: center;
   justify-content: center;
   z-index: 999;
+  transition: transform 0.2s, border-radius 0.2s;
 
-  &--scrolled {
+  &--sticking {
     border-radius: 0 !important;
   }
 
+  &--show-after {
+    transform: translateY(-41px) scaleY(0);
+    margin-top: -1041px;
+    margin-bottom: 1000px;
+
+    &.sub-navigation--visible {
+      transform: translateY(0) scaleY(1);
+    }
+  }
+
   &__content {
     width: 100%;
     height: 100%;
@@ -170,6 +181,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-left: auto;
 
     .svg-icon {
       width: 20px;
@@ -182,3 +194,7 @@
     border-top-right-radius: 10px;
   }
 }
+
+.home-timeline .sub-navigation__back {
+  display: none;
+}