Use AppSidebar

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud · Aug 3, 2020 · f9c62f6 · f9c62f6
1 parent 4683c3b
commit f9c62f6
Show file tree

Hide file tree

Showing 3 changed files with 361 additions and 353 deletions.
diff --git a/css/src/style.scss b/css/src/style.scss
@@ -823,10 +823,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
@@ -27,9 +27,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>
 
@@ -104,7 +102,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 {