feat(navigation): reorganize settings and account info layout for improved navigation

src/app/xtream-tauri/navigation/navigation.component.html

@@ -70,14 +70,9 @@
         <mat-icon matListItemIcon>favorite</mat-icon>
         <span matListItemTitle>Favorites</span>
     </a>
+</mat-nav-list>
 
-    <mat-divider />
-
-    <a mat-list-item (click)="openSettings()">
-        <mat-icon matListItemIcon>settings</mat-icon>
-        <span matListItemTitle>{{ 'MENU.SETTINGS' | translate }}</span>
-    </a>
-
+<mat-nav-list class="navigation-bottom">
     <a mat-list-item (click)="openAccountInfo()">
         <mat-icon matListItemIcon>account_circle</mat-icon>
         <span matListItemTitle>Account Info</span>
@@ -87,4 +82,9 @@
         <mat-icon matListItemIcon>info</mat-icon>
         <span matListItemTitle>Playlist Info</span>
     </a>
+
+    <a mat-list-item (click)="openSettings()">
+        <mat-icon matListItemIcon>settings</mat-icon>
+        <span matListItemTitle>{{ 'MENU.SETTINGS' | translate }}</span>
+    </a>
 </mat-nav-list>

src/app/xtream-tauri/navigation/navigation.component.scss

@@ -1,6 +1,7 @@
 :host {
     padding: 10px;
-    display: block;
+    display: flex;
+    flex-direction: column;
     height: 100%;
 }
 
@@ -8,6 +9,11 @@
     padding-top: 0;
 }
 
+.navigation-bottom {
+    margin-top: auto;
+    padding-bottom: 16px;
+}
+
 .active {
     transition: all 0.2s ease;
     background: rgba(63, 81, 181, 0.12);