From 89f24af1084de9c4057d18423194b1c436658201 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Tue, 24 Dec 2024 01:46:25 +0100
Subject: [PATCH] feat(navigation): reorganize settings and account info layout
 for improved navigation

---
 .../navigation/navigation.component.html           | 14 +++++++-------
 .../navigation/navigation.component.scss           |  8 +++++++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/xtream-tauri/navigation/navigation.component.html b/src/app/xtream-tauri/navigation/navigation.component.html
index 3cca84380..d4dc89754 100644
--- a/src/app/xtream-tauri/navigation/navigation.component.html
+++ b/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>
diff --git a/src/app/xtream-tauri/navigation/navigation.component.scss b/src/app/xtream-tauri/navigation/navigation.component.scss
index 4fe3fee04..15099cdb2 100644
--- a/src/app/xtream-tauri/navigation/navigation.component.scss
+++ b/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);