1 files changed, 79 insertions, 0 deletions
diff --git a/src/mobile/SideBar.scss b/src/mobile/SideBar.scss
new file mode 100644
index 000000000..fb6d13a2b
--- /dev/null
+++ b/src/mobile/SideBar.scss
@@ -0,0 +1,79 @@
+* {
+    margin:0px;
+    padding:0px;
+    box-sizing:border-box;
+    font-family:"Open Sans";
+}
+body {
+    overflow:hidden;
+}
+.navbar {
+    position:fixed;
+    top:0px;
+    left:0px;
+    width:100vw;
+    height:50px;
+    background:rgba(0,0,0,0.95);
+}
+.navbar .toggle-btn {
+    position:absolute;
+    right:20px;
+    height:50px;
+    width:50px;
+    transition:all 300ms ease-in-out 200ms;
+}
+.navbar .toggle-btn span {
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    width:70%;
+    height:4px;
+    background:#eee;
+    transition:all 200ms ease;
+}
+.navbar .toggle-btn span:nth-child(1) {
+    transition:top 200ms ease-in-out;
+    top:30%;
+}
+.navbar .toggle-btn span:nth-child(3) {
+    transition:top 200ms ease-in-out;
+    top:70%;
+}
+.navbar .toggle-btn.active {
+    transition:transform 200ms ease-in-out 200ms;
+    transform:rotate(135deg);
+}
+.navbar .toggle-btn.active span:nth-child(1) {
+    top:50%;
+}
+.navbar .toggle-btn.active span:nth-child(2) {
+    transform:translate(-50%,-50%) rotate(90deg);
+}
+.navbar .toggle-btn.active span:nth-child(3) {
+    top:50%;
+}
+.sidebar {
+    position:absolute;
+    top:50px;
+    opacity:0;
+    right:-100%;
+    width:100vw;
+    height:calc(100vh - 45px);
+    z-index:5;
+    background:rgba(40,40,40,1);
+    transition:all 400ms ease 50ms;
+    padding:15px;
+}
+.sidebar .item {
+    width:100%;
+    padding:13px 6px;
+    border-bottom:1px solid rgba(200,200,200,0.7);
+    font-size:18px;
+    text-transform:uppercase;
+    color:rgba(250,250,250,0.95);
+}
+.sidebar.active {
+    right:0%;
+    opacity:1;
+}
+\ No newline at end of file