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

…roved navigation
4gray · Dec 24, 2024 · 89f24af · 89f24af
1 parent 973f94d
commit 89f24af
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -1,13 +1,19 @@
 :host {
     padding: 10px;
-    display: block;
+    display: flex;
+    flex-direction: column;
     height: 100%;
 }
 
 .mat-nav-list {
     padding-top: 0;
 }
 
+.navigation-bottom {
+    margin-top: auto;
+    padding-bottom: 16px;
+}
+
 .active {
     transition: all 0.2s ease;
     background: rgba(63, 81, 181, 0.12);