Use AppSidebar

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
nextcloud · May 15, 2020 · c6c742b · c6c742b
1 parent a505714
commit c6c742b
Show file tree

Hide file tree

Showing 3 changed files with 356 additions and 348 deletions.
diff --git a/css/src/style.scss b/css/src/style.scss
@@ -711,10 +711,9 @@ $blue_due: #4271a6;			// due dates and low importance
 }
 
 /**
-	* rules for app-sidebar
-	*/
-
-#app-sidebar {
+ * rules for app-sidebar
+ */
+.app-sidebar {
 	.flex-container {
 		display: flex;
 		flex-direction: column;

diff --git a/src/App.vue b/src/App.vue
@@ -32,9 +32,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			<RouterView />
 		</AppContent>
 
-		<div id="app-sidebar" :class="{disappear: $route.params.taskId === undefined}">
-			<RouterView name="details" />
-		</div>
+		<RouterView name="details" :class="{disappear: $route.params.taskId === undefined}" />
 	</Content>
 </template>
 
@@ -115,7 +113,7 @@ export default {
 			if (!($event.target.closest('.reactive') || $event.target.classList.contains('reactive')
 			|| $event.target.classList.contains('mx-btn') // For some reason the click-outside handlers fire for the datepicker month and year buttons!?
 			)
-			&& !$event.target.closest('#app-sidebar') && this.$route.params.taskId) {
+			&& !$event.target.closest('.app-sidebar') && this.$route.params.taskId) {
 				if (this.$route.params.calendarId) {
 					this.$router.push({ name: 'calendars', params: { calendarId: this.$route.params.calendarId } })
 				} else {