From ea6961eb8a2243328aed76b4f94d1af92e6b431b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20Polat?= <ozgur.polat035@gmail.com>
Date: Sun, 28 Sep 2025 05:41:26 +0300
Subject: [PATCH] feat: add sidebar toggle and normalize component padding

---
 .../main/components/home/home.component.html  |  24 ++--
 .../sysperf-cards.component.html              |   6 +-
 .../src/app/main/main.component.html          |  72 +++++-----
 .../src/app/main/main.component.scss          | 129 ++++++++++--------
 .../src/app/main/main.component.ts            |  11 +-
 5 files changed, 127 insertions(+), 115 deletions(-)

diff --git a/openbullet2-web-client/src/app/main/components/home/home.component.html b/openbullet2-web-client/src/app/main/components/home/home.component.html
index 726942b92..31a30d4ab 100644
--- a/openbullet2-web-client/src/app/main/components/home/home.component.html
+++ b/openbullet2-web-client/src/app/main/components/home/home.component.html
@@ -1,5 +1,5 @@
 <!-- Top information -->
-<div class="container-fluid">
+<div class="container-fluid no-paddings">
     <div class="row justify-content-between">
         <div class="col-4">
             <h1>OpenBullet 2</h1>
@@ -19,10 +19,10 @@ <h5>
 <app-spinner *ngIf="serverInfo === null || announcement === null" [fullWidth]="true" />
 
 <!-- Announcement -->
-<div class="mt-4 mx-3">
+<div class="mt-4">
     <p-card *ngIf="announcement !== null">
         <p class="announcement-label">Announcement</p>
-        <p class="announcement" 
+        <p class="announcement"
             [innerHTML]="announcement.markdownText | markdown : { disableSanitizer: true } | async"></p>
     </p-card>
 </div>
@@ -31,8 +31,8 @@ <h5>
 <app-sysperf-cards />
 
 <!-- Collection -->
-<h6 class="mx-3 mt-4">Your collection</h6>
-<div class="container-fluid mt-4">
+<h6 class="mt-4">Your collection</h6>
+<div class="container-fluid p-0 mt-4">
     <div *ngIf="collectionInfo !== null" class="row">
         <div class="col">
             <div class="collection-item-value">
@@ -102,8 +102,8 @@ <h6 class="mx-3 mt-4">Your collection</h6>
 </div>
 
 <!-- Stats and performance -->
-<h6 class="mx-3 mt-4">Recent hits</h6>
-<div class="container-fluid mt-4">
+<h6 class="mt-4">Recent hits</h6>
+<div class="container-fluid p-0 mt-4">
     <div class="row justify-content-between">
         <div class="col-12">
             <p-card>
@@ -116,13 +116,13 @@ <h6 class="mx-3 mt-4">Recent hits</h6>
 </div>
 
 <!-- Other server information -->
-<!-- Use the position-relative class and put the spinner inside the 
+<!-- Use the position-relative class and put the spinner inside the
 div if you want to display it only inside that div-->
-<div *ngIf="serverInfo !== null" class="container-fluid mt-4">
+<div *ngIf="serverInfo !== null" class="container-fluid p-0 mt-4">
     <div class="row justify-content-between">
         <div class="col-4">
             <span class="info-label">Webserver Uptime</span><br />
-            <span *ngIf="serverUptime !== null" 
+            <span *ngIf="serverUptime !== null"
             class="info">{{serverUptime | timespan}}</span>
             <span *ngIf="serverUptime === null">Unknown</span>
         </div>
@@ -143,7 +143,7 @@ <h6 class="mx-3 mt-4">Recent hits</h6>
         <div class="col-4">
             <span class="info-label">Current Working Directory</span><br />
             <span class="info" [pTooltip]="serverInfo.currentWorkingDirectory" tooltipPosition="bottom">{{serverInfo.currentWorkingDirectory | truncate : 30}}</span>
-            <button class="button button-transparent ml-3" 
+            <button class="button button-transparent ml-3"
                 (click)="copyCurrentWorkingDirectory()"
                 pTooltip="Copy to clipboard" >
                 <fa-icon [icon]="faCopy" [fixedWidth]="true"></fa-icon>
@@ -151,7 +151,7 @@ <h6 class="mx-3 mt-4">Recent hits</h6>
         </div>
         <div class="col-4">
             <span class="info-label">Build Date</span><br />
-            <span *ngIf="buildDate !== null" 
+            <span *ngIf="buildDate !== null"
             class="info">{{buildDate | date : 'medium'}}</span>
         </div>
     </div>
diff --git a/openbullet2-web-client/src/app/main/components/home/sysperf-cards/sysperf-cards.component.html b/openbullet2-web-client/src/app/main/components/home/sysperf-cards/sysperf-cards.component.html
index cf989a20f..9fd37bea0 100644
--- a/openbullet2-web-client/src/app/main/components/home/sysperf-cards/sysperf-cards.component.html
+++ b/openbullet2-web-client/src/app/main/components/home/sysperf-cards/sysperf-cards.component.html
@@ -1,5 +1,5 @@
-<h6 class="mt-4 mx-3">System performance</h6>
-<div class="container-fluid mt-4">
+<h6 class="mt-4">System performance</h6>
+<div class="container-fluid p-0 mt-4">
     <div class="row justify-content-between">
         <div class="col-4">
             <p-card>
@@ -92,7 +92,7 @@ <h6 class="mt-4 mx-3">System performance</h6>
                         <div class="col-6">
                             <span>Memory</span>
                             <span class="perf-timespan">Last minute</span>
-                            <button class="button button-transparent ml-2" 
+                            <button class="button button-transparent ml-2"
                                 *ngIf="isAdmin"
                                 pTooltip="Trigger aggressive server-side Garbage Collection"
                                 (click)="garbageCollect()">
diff --git a/openbullet2-web-client/src/app/main/main.component.html b/openbullet2-web-client/src/app/main/main.component.html
index 4c0c92b7f..3fcd56465 100644
--- a/openbullet2-web-client/src/app/main/main.component.html
+++ b/openbullet2-web-client/src/app/main/main.component.html
@@ -1,47 +1,37 @@
 <div class="wrapper">
-    <div class="sidebar">
-        <div class="sidebar-logo">
-            <img class="logo" src="../../assets/images/logohq.png"
-                alt="OpenBullet 2" />
-        </div>
-        <div class="sidebar-version" *ngIf="updateInfo !== null">
-            <a href="javascript:void(0);" (click)="showChangelog()"
-                [pTooltip]="updateInfo.isUpdateAvailable ? 'Update available! Click here to learn more' : ''">
-                <fa-icon
-                    *ngIf="updateInfo.isUpdateAvailable"
-                    class="color-custom mr-1"
-                    [icon]="faExclamationTriangle"
-                    [fixedWidth]="true"></fa-icon>
-                <span class="version">v{{updateInfo.currentVersion}} [{{updateInfo.currentVersionType}}]</span>
-            </a>
-        </div>
-        <div class="sidebar-menu">
-            <app-menu></app-menu>
-        </div>
-        <div *ngIf="canLogout()" class="sidebar-logout">
-            <button class="button button-transparent" 
-                (click)="logout()">
-                <fa-icon [icon]="faRightFromBracket" [fixedWidth]="true"></fa-icon>
-                Log out
-            </button>
-        </div>
+  <div #sidebar class="sidebar show">
+    <div class="sidebar-logo">
+      <img class="logo" src="../../assets/images/logohq.png" alt="OpenBullet 2" />
     </div>
-    <div class="content">
-        <router-outlet></router-outlet>
+    <div class="sidebar-version" *ngIf="updateInfo !== null">
+      <a href="javascript:void(0);" (click)="showChangelog()"
+        [pTooltip]="updateInfo.isUpdateAvailable ? 'Update available! Click here to learn more' : ''">
+        <fa-icon *ngIf="updateInfo.isUpdateAvailable" class="color-custom mr-1" [icon]="faExclamationTriangle"
+          [fixedWidth]="true"></fa-icon>
+        <span class="version">v{{updateInfo.currentVersion}} [{{updateInfo.currentVersionType}}]</span>
+      </a>
     </div>
+    <div class="sidebar-menu">
+      <app-menu></app-menu>
+    </div>
+    <div *ngIf="canLogout()" class="sidebar-logout">
+      <button class="button button-transparent" (click)="logout()">
+        <fa-icon [icon]="faRightFromBracket" [fixedWidth]="true"></fa-icon>
+        Log out
+      </button>
+    </div>
+  </div>
+  <div class="content">
+    <div class="mb-4 topbar">
+      <button class="button button-transparent p-0 sidebar-toggle-button" title="Toggle Sidebar" (click)="toggleSidebar()">
+        <i class="pi pi-fw pi-bars"></i>
+      </button>
+    </div>
+    <router-outlet></router-outlet>
+  </div>
 </div>
 
-<p-dialog 
-    #changelogModal
-    header="Changelog"
-    [(visible)]="changelogModalVisible" 
-    [modal]="true" 
-    [style]="{ width: '50vw' }" 
-    [dismissableMask]="true"
-    [closeOnEscape]="true"
-    [draggable]="false" 
-    [resizable]="false">
-    <app-changelog
-        #changelogComponent
-        [updateInfo]="updateInfo" />
+<p-dialog #changelogModal header="Changelog" [(visible)]="changelogModalVisible" [modal]="true"
+  [style]="{ width: '50vw' }" [dismissableMask]="true" [closeOnEscape]="true" [draggable]="false" [resizable]="false">
+  <app-changelog #changelogComponent [updateInfo]="updateInfo" />
 </p-dialog>
diff --git a/openbullet2-web-client/src/app/main/main.component.scss b/openbullet2-web-client/src/app/main/main.component.scss
index 68988204d..4bfc9cd33 100644
--- a/openbullet2-web-client/src/app/main/main.component.scss
+++ b/openbullet2-web-client/src/app/main/main.component.scss
@@ -3,71 +3,84 @@
 $sidebarWidth: 230px;
 
 .wrapper {
-    display: flex;
-    min-height: 100vh;
+  display: flex;
+  min-height: 100vh;
 
-    .sidebar {
-        background-color: var(--bg-secondary);
-        width: $sidebarWidth;
-        min-width: $sidebarWidth;
-        overflow-y: auto;
-        overflow-x: hidden;
-        flex: 0 1 $sidebarWidth;
-    
-        .sidebar-logo {
-            padding: 40px 50px 0px 50px;
-            margin-bottom: 10px;
-        
-            img {
-                width: 100%;
-            }
-        }
-    
-        .sidebar-version {
-            padding: 10px 0px;
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 10px;
+  .sidebar {
+    background-color: var(--bg-secondary);
+    width: $sidebarWidth;
+    min-width: $sidebarWidth;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex: 0 1 $sidebarWidth;
+    margin-left: -$sidebarWidth;
+    transition: margin 0.3s ease-in-out;
 
-            a {
-                color: var(--fg-inactive);
-                text-decoration: none;
-                font-weight: bold;
-            }
-        }
+    &.show {
+      margin-left: 0px;
+    }
 
-        .sidebar-logout {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 10px 0px;
-            margin-top: 10px;
+    .sidebar-logo {
+      padding: 40px 50px 0px 50px;
+      margin-bottom: 10px;
 
-            button {
-                color: var(--fg-primary);
-                border: none;
-                padding: 10px 50px;
-                border-radius: 5px;
-                cursor: pointer;
-                font-weight: bold;
-                transition: background-color 0.2s;
+      img {
+        width: 100%;
+      }
+    }
 
-                &:hover {
-                    background-color: var(--bg-primary);
-                }
-            
-            }
-        }
+    .sidebar-version {
+      padding: 10px 0px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 10px;
+
+      a {
+        color: var(--fg-inactive);
+        text-decoration: none;
+        font-weight: bold;
+      }
     }
 
-    .content {
-        background-color: var(--bg-primary);
+    .sidebar-logout {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 0px;
+      margin-top: 10px;
+
+      button {
         color: var(--fg-primary);
-        flex: 1 1 auto;
-        padding: 30px 50px;
-        width: calc(100vw - $sidebarWidth);
-        overflow-x: hidden;
+        border: none;
+        padding: 10px 50px;
+        border-radius: 5px;
+        cursor: pointer;
+        font-weight: bold;
+        transition: background-color 0.2s;
+
+        &:hover {
+          background-color: var(--bg-primary);
+        }
+      }
+    }
+  }
+
+  .content {
+    background-color: var(--bg-primary);
+    color: var(--fg-primary);
+    flex: 1 1 auto;
+    padding: 30px 50px;
+    width: calc(100vw - $sidebarWidth);
+    overflow-x: hidden;
+
+    .topbar {
+      .sidebar-toggle-button {
+        &:hover {
+          color: var(--fg-accent);
+        }
+      }
     }
+  }
 }
diff --git a/openbullet2-web-client/src/app/main/main.component.ts b/openbullet2-web-client/src/app/main/main.component.ts
index dec08435f..940edd3ae 100644
--- a/openbullet2-web-client/src/app/main/main.component.ts
+++ b/openbullet2-web-client/src/app/main/main.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { faExclamationTriangle, faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
 import { UpdateInfoDto, VersionType } from './dtos/info/update-info.dto';
@@ -11,11 +11,14 @@ import { UserService } from './services/user.service';
   styleUrls: ['./main.component.scss'],
 })
 export class MainComponent implements OnInit {
+  @ViewChild('sidebar') sidebar!: ElementRef;
+
   updateInfo: UpdateInfoDto | null = null;
   faExclamationTriangle = faExclamationTriangle;
   faRightFromBracket = faRightFromBracket;
   changelogModalVisible = false;
 
+
   constructor(
     private router: Router,
     private infoService: InfoService,
@@ -64,4 +67,10 @@ export class MainComponent implements OnInit {
     this.userService.resetJwt();
     window.location.reload();
   }
+
+  toggleSidebar() {
+    if (this.sidebar) {
+      this.sidebar.nativeElement.classList.toggle('show');
+    }
+  }
 }