From ed14b0e909a6b6b20de574501ee0983c66eb6287 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Fri, 18 Apr 2014 17:14:12 -0700
Subject: [PATCH] GUAC-324: Add menu show/hide animation.

---
 guacamole/src/main/webapp/styles/client.css | 55 ++++++++++++++++++++-
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index 713981790..2f418c8c2 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -502,14 +502,65 @@ p.hint {
 
 /* Menu */
 
+/**
+ * show-menu: Animation for showing the menu
+ */
+@keyframes show-menu {
+    from { left: -320px; }
+    to   { left: 0; }
+}
+@-moz-keyframes show-menu {
+    from { left: -320px; }
+    to   { left: 0; }
+}
+@-webkit-keyframes show-menu {
+    from { left: -320px; }
+    to   { left: 0; }
+}
+
+/**
+ * hide-menu: Animation for hiding the menu
+ */
+@keyframes hide-menu {
+    from { left: 0; }
+    to   { left: -320px; }
+}
+@-moz-keyframes hide-menu {
+    from { left: 0; }
+    to   { left: -320px; }
+}
+@-webkit-keyframes hide-menu {
+    from { left: 0; }
+    to   { left: -320px; }
+}
+
 #menu {
     overflow: auto;
     position: fixed;
     top: 0;
-    left: 0;
+    left: -320px;
     bottom: 0;
     max-width: 100%;
     width: 320px;
-    padding: 1em;
     background: red;
 }
+
+#menu.closed {
+    animation-name: hide-menu;
+    animation-timing-function: linear;
+    animation-duration: 0.125s;
+    -webkit-animation-name: hide-menu;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-duration: 0.125s;
+    left: -320px;
+}
+
+#menu.open {
+    animation-name: show-menu;
+    animation-timing-function: linear;
+    animation-duration: 0.125s;
+    -webkit-animation-name: show-menu;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-duration: 0.125s;
+    left: 0px;
+}