mobile version edited

static/css/style.css

@@ -14,9 +14,9 @@ header {
 }
 
 .side-menu {
-  position: fixed; 
-  top: 0;
+  position: fixed;
   right: 0;
+  top: 0;
   width: 256px; 
   min-height: 100vh;
   overflow-y: scroll;
@@ -57,7 +57,7 @@ header {
 }
 
 .menu_bar-top {
-  width: 25px;
+  width: 30px;
 }
 
 .menu_bar-mid {
@@ -65,21 +65,7 @@ header {
 }
 
 .menu_bar-bot {
-  width: 25px;
-}
-
-.menu-opened .menu_bar-top {
-  transform: rotate(45deg);
-  transform-origin: 15% 15%;
-}
-
-.menu-opened .menu_bar-mid {
-  opacity: 0;
-}
-
-.menu-opened .menu_bar-bot {
-  transform: rotate(-45deg);
-  transform-origin: 15% 95%;
+  width: 30px;
 }
 
 .side-toggle {
@@ -99,12 +85,6 @@ header {
   text-decoration: none;
 }
 
-.saburly-footer,
-.content{
-  margin-left: 10%;
-  margin-right: 10%;
-}
-
 footer {
   background-color: #5763AB;
   width: 100%;
@@ -136,18 +116,45 @@ footer {
   color: white;
 }
 
-/* Hide side menu on large screens */
 @media (min-width: 1024px) {
   .side-menu {
       display: none;
   }
+  .saburly-footer,
+  .content {
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+  .empty-menu{
+    display: block;
+  }
+  .empty-menu-small{
+    display: none;
+  }
 }
 
-/* Show side menu on smaller screens */
 @media (max-width: 1023px) {
   .side-menu {
       display: block;
   }
+  .empty-menu{
+    display: none;
+  }
+  .empty-menu-small{
+    display: block;
+  }
+  .side-panel {
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .content {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .side-menu {
@@ -168,3 +175,27 @@ footer {
   transform: translateY(0); 
   transition: transform 0.3s ease; 
 } 
+
+
+.side-menu.active {
+  display: block; 
+}
+
+.menu-opened .menu_bar-top {
+  transform: rotate(45deg);
+  transform-origin: 15% 15%;
+}
+
+.menu-opened .menu_bar-mid {
+  opacity: 0;
+}
+
+.menu-opened .menu_bar-bot {
+  transform: rotate(-45deg);
+  transform-origin: 15% 95%;
+}
+
+.menu-opened .side-panel {
+  position:absolute;
+  left: -256px;
+}