Add skeleton for mobile docs nav

2021-12-16 18:24:26 -05:00
parent 9a18019d9d
commit e01ab449cf
4 changed files with 58 additions and 12 deletions
--- a/frontend/src/app/components/docs/api-docs.component.scss
+++ b/frontend/src/app/components/docs/api-docs.component.scss
@@ -163,10 +163,38 @@ li.nav-item {
  float: right;
 }

-@media (max-width: 992px){
-  .doc-nav-desktop {
+.doc-nav-mobile.relative {
+
+}
+
+.doc-nav-mobile.relative {
+  position: relative;
+}
+
+.doc-nav-mobile.fixed {
+  position: fixed;
+  top: 20px;
+  width: calc(100% - 60px);
+  z-index: 100;
+}
+
+.doc-nav-mobile > div {
+  background-color: #2d3348;
+  z-index: 100;
+  border-radius: 0.25rem;
+}
+
+#doc-nav-mobile-toggle {
+  width: 100%;
+  background-color: #105fb0;
+  color: #fff;
+  border-color: #105fb0;
+}
+
+@media (max-width: 992px) {
+
+  .hide-on-mobile {
    display: none;
-    height: auto;
  }

  .doc-content {
@@ -186,3 +214,8 @@ li.nav-item {
  }
 }

+@media (min-width: 992px) {
+  .hide-on-desktop {
+    display: none;
+  }
+}