Added transition effects

Author: aeagle

demo/src/ui-demo/Layers.scss

@@ -2,14 +2,27 @@
 	aside {
 		opacity: 0.7;
 		background-color: #e0eeee;
+		transition: width 0.5s;
+
+		.description {
+			position: relative;
+			top: -30px;
+		}
 	}
 
 	nav {
 		background-color: #eee0e0;
+		transition: width 0.5s;
+
+		.description {
+			position: relative;
+			top: 30px;
+		}
 	}
 
 	main {
 		background-color: #eee;
+		transition: left 0.5s;
 	}
 
 	.description {

demo/src/ui-demo/Layers.tsx

@@ -14,6 +14,7 @@ export const LayersDemo = () => {
 					onMouseEnter={() => setFixedSideBarHovered(true)} 
 					onMouseLeave={() => setFixedSideBarHovered(false)} 
 					as="nav">
+					{Description("Layer 1 left")}
 				</Space.Left>
 
 				<Space.Fill as="main">
@@ -27,7 +28,7 @@ export const LayersDemo = () => {
 					onMouseEnter={() => setFloatingSideBarHovered(true)} 
 					onMouseLeave={() => setFloatingSideBarHovered(false)} 
 					as="aside">
-					{Description("Left floated")}
+					{Description("Layer 2 left")}
 				</Space.Left>
 			</Space.Layer>
 		</Space.Fill>