feat: revamp dashboard mensa section

src/app/modules/dashboard/section/section.component.html

@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -12,16 +12,46 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <a *ngIf="item; else titleTemplate" [routerLink]="['/data-detail', item.uid]">
+        <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
+      </a>
 
-<ion-label class="section-headline"
-  >{{ title }}
-  <ion-icon
-    size="25"
-    class="icon-margin-right"
-    *ngIf="isEditable"
-    (click)="onEditClick()"
-    name="edit_square"
-  ></ion-icon>
-  <ion-icon size="25" *ngIf="customIcon" (click)="onEditClick()" [name]="customIcon"></ion-icon>
-</ion-label>
-<ng-content></ng-content>
+      <ng-template #titleTemplate>
+        <ion-label class="section-headline">{{ title }} </ion-label>
+        <ng-content select="[slot=subtitle]"></ng-content>
+      </ng-template>
+    </ion-col>
+
+    <ng-container *ngIf="swiper">
+      <ion-col size="auto" class="swiper-button">
+        <ion-button fill="clear" color="medium" (click)="slidePrev()" [disabled]="false">
+          <ion-icon size="24" slot="icon-only" name="chevron_left"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <ion-col size="auto" class="swiper-button">
+        <ion-button fill="clear" color="medium" (click)="slideNext()" [disabled]="false">
+          <ion-icon size="24" slot="icon-only" name="chevron_right"></ion-icon>
+        </ion-button>
+      </ion-col>
+    </ng-container>
+
+    <ion-col size="auto" *ngIf="isEditable">
+      <ion-button fill="clear" color="medium" (click)="onEditClick()">
+        <ion-icon size="24" slot="icon-only" name="edit_square"></ion-icon>
+      </ion-button>
+    </ion-col>
+    <ion-col size="auto" *ngIf="customIcon">
+      <ion-button fill="clear" color="medium" (click)="onEditClick()">
+        <ion-icon slot="icon-only" size="24" [name]="customIcon"></ion-icon>
+      </ion-button>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col #content>
+      <ng-content></ng-content>
+    </ion-col>
+  </ion-row>
+</ion-grid>