left menu collapse state added

projects/ui/src/lib/avatar/avatar.component.scss

@@ -22,7 +22,7 @@
     --local-size: 50px;
   }
   &[data-size="default"] {
-    --local-size: 42px;
+    --local-size: 40px;
     font-weight: 500;
   }
   &[data-size="small"] {

projects/ui/src/lib/game/game.component.html

@@ -1,12 +1,12 @@
 <a [routerLink]="['/game/' + game.gameId]" routerLinkActive="active">
-  <div class="sk-game">
+  <div class="sk-game" [ngClass]="{collapsed}">
     <skirda-image-icon [src]="game.image"></skirda-image-icon>
-    <div class="sk-game-info">
+    <div class="sk-game-info" *ngIf="!collapsed">
       <div class="info-game-line">
         <skirda-heading size="6">{{game.title}}</skirda-heading>
       </div>
       <skirda-text>description</skirda-text>
     </div>
-    <skirda-icon name="play" size="24" (click)="run(game)" color="var(--sk-primary-accent)"></skirda-icon>
+    <skirda-icon *ngIf="!collapsed" name="play" size="24" (click)="run(game)" color="var(--sk-primary-accent)"></skirda-icon>
   </div>
 </a>

projects/ui/src/lib/game/game.component.scss

@@ -32,11 +32,15 @@
       opacity: 0.5;
       cursor: pointer;
 
+      &.collapsed {
+        border-radius: 2rem;
+      }
+
       .sk-game-info {
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: var(--sk-gap-m);
+        gap: var(--sk-gap-s);
       }
     }
   }

projects/ui/src/lib/game/game.component.ts

@@ -9,6 +9,7 @@ import { LauncherService } from 'src/app/services/launcher.service';
 })
 export class GameComponent implements OnInit {
   @Input() game!: Game
+  @Input() collapsed = false
 
   constructor(private launcher: LauncherService) { }
 

projects/ui/src/lib/session/session.component.html

@@ -1,7 +1,7 @@
 <a [routerLink]="['/session/' + session.gameId]" routerLinkActive="active" [title]="session.status ?? 'No status'">
-  <div class="sk-session">
+  <div class="sk-session" [ngClass]="{collapsed}">
     <skirda-image-icon [src]="session.icon"></skirda-image-icon>
-    <div class="sk-session-info">
+    <div class="sk-session-info" *ngIf="!collapsed">
       <div class="info-heading-line">
         <skirda-heading size="6">{{session.title}}</skirda-heading>
       </div>
@@ -10,6 +10,6 @@
         <skirda-tag>{{session.expires | countdown | async}}</skirda-tag>
       </div>
     </div>
-    <skirda-icon name="play" size="24" (click)="run(session)" color="var(--sk-primary-accent)"></skirda-icon>
+    <skirda-icon *ngIf="!collapsed" name="play" size="24" (click)="run(session)" color="var(--sk-primary-accent)"></skirda-icon>
   </div>
 </a>

projects/ui/src/lib/session/session.component.scss

@@ -33,11 +33,15 @@
       opacity: 0.5;
       cursor: pointer;
 
+      &.collapsed {
+        border-radius: 2rem;
+      }
+
       .sk-session-info {
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: var(--sk-gap-m);
+        gap: var(--sk-gap-s);
 
         .info-heading-line {
           display: flex;

projects/ui/src/lib/session/session.component.ts

@@ -10,6 +10,7 @@ import { LauncherService } from 'src/app/services/launcher.service'
 })
 export class SessionComponent implements OnInit {
   @Input() session!: Session;
+  @Input() collapsed = false
 
   constructor(
     private launcher: LauncherService

projects/ui/src/lib/tag/tag.component.scss

@@ -8,7 +8,7 @@
   .sk-tag {
     display: inline-flex;
     align-items: center;
-    padding: 2px var(--sk-gap-m);
+    padding: 0px var(--sk-gap-m);
     border-radius: var(--sk-br-s);
     background-color: rgba(255, 255, 255, 0.05);
   }

src/app/components/loading-screen/loading-screen.component.scss

@@ -35,7 +35,6 @@
     width: 140px;
     height: 140px;
     overflow: hidden;
-    background-color: var(--sk-item-active);
     mask-image: url('/assets/icon_mask.svg');
     mask-size: cover;
     user-select: none;

src/app/components/main/main-menu/main-menu.component.html

@@ -1,9 +1,9 @@
 <menu>
   <div class="menu-search-panel">
-    <skirda-input [formControl]="search" size="l" placeholder="Quick search">
+    <skirda-input *ngIf="!collapsed" [formControl]="search" size="l" placeholder="Quick search">
       <skirda-icon name="search" size="18" role="left"></skirda-icon>
     </skirda-input>
-    <button>
+    <button (click)="toggle()">
       <skirda-icon name="menu-panel" color="var(--sk-primary-accent)"></skirda-icon>
     </button>
   </div>
@@ -26,8 +26,8 @@
         <skirda-heading size="6">Downloads</skirda-heading>
       </skirda-section>
     </div> -->
-    <app-menu-games></app-menu-games>
+    <app-menu-games [collapsed]="collapsed"></app-menu-games>
-    <app-menu-sessions></app-menu-sessions>
+    <app-menu-sessions [collapsed]="collapsed"></app-menu-sessions>
   </div>
-  <app-menu-profile></app-menu-profile>
+  <app-menu-profile  [collapsed]="collapsed"></app-menu-profile>
 </menu>

src/app/components/main/main-menu/main-menu.component.scss

@@ -2,6 +2,20 @@
   display: block;
   width: 340px;
 
+  &.collapsed {
+    width: 75px;
+
+    menu {
+
+      .menu-search-panel {
+
+        button {
+          flex: 1;
+        }
+      }
+    }
+  }
+
   menu {
     display: flex;
     margin: 0;
@@ -35,7 +49,6 @@
         appearance: none;
         background: none;
         border: 0;
-        transition: 0.1s ease;
         border-radius: var(--sk-br-m);
         cursor: pointer;
         flex-shrink: 0;

src/app/components/main/main-menu/main-menu.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { LocalStorage } from 'ngx-webstorage'
 
 @Component({
   selector: 'app-main-menu',
@@ -9,7 +10,15 @@ import { FormControl } from '@angular/forms';
 export class MainMenuComponent implements OnInit {
   search = new FormControl<string>('');
 
+  @HostBinding('class.collapsed')
+  @LocalStorage('menu-collapsed', false)
+  collapsed!: boolean
+
   constructor() {}
 
   ngOnInit(): void {}
+
+  toggle () {
+    this.collapsed = !this.collapsed
+  }
 }

src/app/components/main/main-menu/menu-games/menu-games.component.html

@@ -1,9 +1,11 @@
-<skirda-section-label>
+<skirda-section-label *ngIf="!collapsed">
   Pinned games <div class="count">{{games.length}}</div>
 </skirda-section-label>
+<skirda-icon name="library" size="20" *ngIf="collapsed"></skirda-icon>
 <div class="games">
   <skirda-game
     *ngFor="let game of games; index as i"
     [game]="game"
+    [collapsed]="collapsed"
   ></skirda-game>
 </div>

src/app/components/main/main-menu/menu-games/menu-games.component.scss

@@ -1,6 +1,11 @@
 :host {
   display: block;
 
+  skirda-icon {
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+
   .games {
     display: flex;
     flex-direction: column;

src/app/components/main/main-menu/menu-games/menu-games.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Game } from 'src/app/interfaces/game.interface'
 import { GoGetGames } from 'src/app/services/go';
 
@@ -24,6 +24,8 @@ export class MenuGamesComponent implements OnInit {
 
   games: Game[] = []
 
+  @Input() collapsed: boolean = false
+
   constructor() { }
 
   ngOnInit(): void {

src/app/components/main/main-menu/menu-profile/menu-profile.component.html

@@ -1,13 +1,13 @@
 <a [routerLink]="['profile']" routerLinkActive="active" class="profile-area">
-  <skirda-avatar [username]="profile.username" size="small"></skirda-avatar>
+  <skirda-avatar [username]="profile.username" size="default"></skirda-avatar>
-  <div class="profile-info">
+  <div class="profile-info" *ngIf="!collapsed">
     <skirda-heading size="6">{{profile.username}}</skirda-heading>
     <skirda-text>online</skirda-text>
   </div>
-  <a [routerLink]="['settings']">
+  <a [routerLink]="['settings']" *ngIf="!collapsed">
     <skirda-icon name="settings" color="var(--sk-primary-accent)"></skirda-icon>
   </a>
 </a>
-<div class="theme-toggle" (click)="toggleTheme()" [ngClass]="{'active': theme === 'light'}">
+<div class="theme-toggle" *ngIf="!collapsed" (click)="toggleTheme()" [ngClass]="{'active': theme === 'light'}">
   <skirda-icon name="sun" color="var(--sk-primary-accent)"></skirda-icon>
 </div>

src/app/components/main/main-menu/menu-profile/menu-profile.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { LocalStorage } from 'ngx-webstorage'
 import { Profile } from 'src/app/interfaces/profile.interface'
 
@@ -14,6 +14,8 @@ export class MenuProfileComponent implements OnInit {
   @LocalStorage('theme', 'dark')
   public theme!: string
 
+  @Input() collapsed = false
+
   constructor() { }
 
   ngOnInit(): void {

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html

@@ -1,9 +1,11 @@
-<skirda-section-label>
+<skirda-section-label *ngIf="!collapsed">
   Active sessions <div class="count">{{sessions.length}}</div>
 </skirda-section-label>
+<skirda-icon name="server" size="20" *ngIf="collapsed"></skirda-icon>
 <div class="sessions">
   <skirda-session
     *ngFor="let session of sessions; index as i"
     [session]="session"
+    [collapsed]="collapsed"
   ></skirda-session>
 </div>

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss

@@ -1,6 +1,11 @@
 :host {
   display: block;
 
+  skirda-icon {
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+
   .sessions {
     display: flex;
     flex-direction: column;

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Session } from 'src/app/interfaces/session.interface';
 import { GoGetSessions } from 'src/app/services/go';
 
@@ -33,6 +33,7 @@ export class MenuSessionsComponent implements OnInit {
     },
   ];
   sessions: Session[] = [];
+  @Input() collapsed = false
 
   constructor() {}