fix(docs-infra): use a fixed top-menu on marketing pages as well (#41051)

Previously, in contrast to docs pages, marketing pages had a non-fixed
top-menu, which meant that the top-menu would scroll out of the viewport
along with the rest of the content. This had a couple of downsides:
- The UI was different between pages (i.e. different top-menu behavior
  on docs vs marketing pages).
- Since some of the marketing pages are long, it was not easy for people
  to navigate to a different page (i.e. they had to scroll all the way
  back up).

This commit improves the UX by using the same, fixed top-menu on all
pages, which restores consistency and allows the user to navigate around
more easily.

NOTE:
The old behavior (non-fixed top-menu) is kept on the homepage, since its
top-menu design in a little different than other pages (e.g. it uses a
transparent top-menu) and would not play well with a fixed top-menu.

PR Close #41051
This commit is contained in:
George Kalpakas 2021-03-09 14:15:15 +02:00 committed by Andrew Kushnir
parent 7944ee2c30
commit 27bb6f6a04
1 changed files with 2 additions and 10 deletions

View File

@ -20,21 +20,13 @@ mat-toolbar.app-toolbar {
@media (min-width: 481px) { @media (min-width: 481px) {
&:not(.transitioning) { &:not(.transitioning) {
background-color: transparent; background-color: transparent;
box-shadow: none;
position: absolute;
transition: background-color 0.2s linear; transition: background-color 0.2s linear;
} }
} }
} }
// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
@include marketing-pages($nestParentSelector: true) {
box-shadow: none;
// FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
@media (min-width: 481px) {
position: absolute;
}
}
// DOCS PAGES OVERRIDE: HAMBURGER // DOCS PAGES OVERRIDE: HAMBURGER
@include docs-pages($nestParentSelector: true) { @include docs-pages($nestParentSelector: true) {
@media (min-width: $showTopMenuWidth) { @media (min-width: $showTopMenuWidth) {