opening and closing the nav

1 files changed, 21 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 3689593..5c62b03 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -5,6 +5,15 @@
   width: 100%;
   font-size: 18px;
 }
+.main-nav {
+  transition: all 0.2s;
+  transform: translateZ(0) translateY(0);
+}
+.sections-open .main-nav {
+  transform: translateZ(0) translateY(-22rem);
+  background: black;
+  color: white;
+}
 
 /* The main nav row */
 
@@ -65,6 +74,14 @@
   width: 100%;
   height: 100%;
 }
+.viewer-nav .arrow path,
+.viewer-nav .arrow polygon {
+  fill: #000;
+}
+.sections-open .viewer-nav .arrow path,
+.sections-open .viewer-nav .arrow polygon {
+  fill: #fff;
+}
 
 /* Volume button */
 
@@ -81,10 +98,10 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.nav-open .volume path {
+.sections-open .volume path {
   fill: #fff;
 }
-.nav-open .volume.muted path {
+.sections-open .volume.muted path {
   fill: #000;
   stroke: #fff;
 }
@@ -100,8 +117,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.nav-open .playToggle path,
-.nav-open .playToggle polygon {
+.sections-open .playToggle path,
+.sections-open .playToggle polygon {
   fill: #fff;
 }