feat(aio): implement survey notification link (#21371)

Closes #21094

PR Close #21371

aio/src/styles/1-layouts/_top-menu.scss

@@ -10,9 +10,12 @@ mat-toolbar.mat-toolbar {
   right: 0;
   left: 0;
   z-index: 10;
-  padding: 0 16px 0 0;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
 
+  mat-toolbar-row {
+    padding: 0 16px 0 0;
+  }
+
   mat-icon {
     color: $white;
   }

aio/src/styles/2-modules/_modules-dir.scss

@@ -29,3 +29,4 @@
    @import 'toc';
    @import 'select-menu';
    @import 'deploy-theme';
+   @import 'notification';

aio/src/styles/2-modules/_notification.scss

@@ -0,0 +1,106 @@
+$notificationHeight: 56px;
+
+// we need to override some of the toolbar styling
+.mat-toolbar mat-toolbar-row.notification-container {
+  padding: 0;
+  height: auto;
+  overflow: hidden;
+}
+
+aio-notification {
+  background: $darkgray;
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: $notificationHeight;
+  justify-content: center;
+
+  @media (max-width: 430px) {
+    justify-content: flex-start;
+    padding-left: 10px;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $notificationHeight;
+    height: $notificationHeight;
+    background: $darkgray;
+  }
+
+  .content {
+    display: flex;
+    max-width: calc(100% - #{$notificationHeight});
+    text-transform: none;
+    padding: 0;
+
+    .icon {
+      margin-right: 10px;
+      @media (max-width: 464px) {
+        display: none;
+      }
+    }
+
+    .message {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .action-button {
+      margin-left: 10px;
+      background: $brightred;
+      border-radius: 15px;
+      text-transform: uppercase;
+      padding: 0 10px;
+      font-size: 12px;
+      @media (max-width: 780px) {
+        display: none;
+      }
+    }
+  }
+}
+
+// Here are all the hacks to make the content and sidebars the right height
+// when the notification is visible
+.aio-notification-show {
+  .sidenav-content {
+    padding-top: 80px + $notificationHeight;
+  }
+
+  mat-sidenav.mat-sidenav.sidenav {
+    top: 56px + $notificationHeight;
+
+    @media (max-width: 600px) {
+      top: 56px + $notificationHeight;
+    }
+  }
+
+  .toc-container {
+    top: 76px + $notificationHeight;
+  }
+
+  .search-results {
+    padding-top: 68px + $notificationHeight;
+  }
+
+  &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute  {
+    section {
+      padding-top: $notificationHeight;
+    }
+  }
+}
+
+// Animate the content when the notification bar is dismissed
+// this should be kept in sync with the animation durations in
+// - aio/src/app/layout/notification/notification.component.ts
+// - aio/src/app/app.component.ts : notificationDismissed()
+.aio-notification-animating {
+  .sidenav-content {
+    transition: padding-top 250ms ease;
+  }
+  mat-sidenav.mat-sidenav.sidenav, .toc-container {
+    transition: top 250ms ease;
+  }
+}