Browse Source

refactor(Admin): Overlay sidebar over content if expanded on mobile

Owen Diffey 3 years ago
parent
commit
5ec674cf9a
1 changed files with 17 additions and 12 deletions
  1. 17 12
      frontend/src/pages/Admin/index.vue

+ 17 - 12
frontend/src/pages/Admin/index.vue

@@ -98,18 +98,6 @@
 								<i class="material-icons">library_music</i>
 								<span>Playlists</span>
 							</router-link>
-							<router-link
-								class="sidebar-item news"
-								to="/admin/news"
-								content="News"
-								v-tippy="{
-									theme: 'info',
-									onShow: () => !sidebarActive
-								}"
-							>
-								<i class="material-icons">chrome_reader_mode</i>
-								<span>News</span>
-							</router-link>
 							<div
 								v-if="
 									sidebarActive &&
@@ -155,6 +143,18 @@
 								<i class="material-icons">people</i>
 								<span>Users</span>
 							</router-link>
+							<router-link
+								class="sidebar-item news"
+								to="/admin/news"
+								content="News"
+								v-tippy="{
+									theme: 'info',
+									onShow: () => !sidebarActive
+								}"
+							>
+								<i class="material-icons">chrome_reader_mode</i>
+								<span>News</span>
+							</router-link>
 							<router-link
 								class="sidebar-item statistics"
 								to="/admin/statistics"
@@ -469,6 +469,11 @@ export default {
 			min-width: 200px;
 			width: 200px;
 
+			@media screen and (max-width: 768px) {
+				min-width: 45px;
+				width: 45px;
+			}
+
 			.inner {
 				display: flex;
 				flex-direction: column;