From ee64350ccf8c769b38f550ca94685aa54f53198c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tarik=20Dedi=C4=87?= <tarikdedic95@gmail.com>
Date: Sat, 19 Oct 2024 00:02:46 +0200
Subject: [PATCH] Making dashboard sidebar responsive and open/close, navbar
 submenu adjustments

---
 .../dashboard-layout.component.html           | 48 +++++++++++--------
 .../dashboard-layout.component.ts             |  9 +++-
 .../components/navbar/navbar.component.html   | 26 +++++-----
 .../components/navbar/navbar.component.scss   |  5 ++
 4 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.html b/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.html
index 679c185..359c5cc 100644
--- a/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.html
+++ b/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.html
@@ -1,36 +1,44 @@
 <div class="flex h-screen bg-gray-100">
-    <!-- sidebar -->
-    <div class="hidden md:flex flex-col w-64 bg-gray-800">
+    <!-- Sidebar -->
+    <div [ngClass]="{
+        'w-64': sidebarOpen,
+        'w-0': !sidebarOpen
+    }" class="overflow-hidden transition-all duration-300 ease-in-out bg-gray-800">
         <div class="flex items-center justify-center h-16 bg-gray-900">
-            <a routerLink="/" class="text-white font-bold uppercase">SMETOVI</a>
+            <a routerLink="/" class="text-white font-bold uppercase"
+                [ngClass]="{'opacity-100': sidebarOpen, 'opacity-0': !sidebarOpen, 'transition-opacity': true, 'duration-300': true}">SMETOVI</a>
         </div>
-        <div class="flex flex-col flex-1 overflow-y-auto">
+        <div class="flex flex-col flex-1">
             <nav class="flex-1 px-2 py-4 bg-gray-800">
-                <a routerLink="/dashboard/home" class="flex items-center px-4 py-2 text-gray-100 hover:bg-gray-700">
+                <a routerLink="/dashboard/home" routerLinkActive="active-route"
+                    class="flex items-center px-4 py-2 text-gray-100 hover:bg-gray-700"
+                    [ngClass]="{'opacity-100': sidebarOpen, 'opacity-0': !sidebarOpen, 'transition-opacity': true, 'duration-300': true}">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
-                    Dashboard
+                    <span *ngIf="sidebarOpen" class="ml-2">Dashboard</span>
                 </a>
-                <a routerLink="/dashboard/lokacije"
-                    class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700">
+                <a routerLink="/dashboard/lokacije" routerLinkActive="active-route"
+                    class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700"
+                    [ngClass]="{'opacity-100': sidebarOpen, 'opacity-0': !sidebarOpen, 'transition-opacity': true, 'duration-300': true}">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M6 18L18 6M6 6l12 12" />
                     </svg>
-                    Lokacije
+                    <span *ngIf="sidebarOpen" class="ml-2">Lokacije</span>
                 </a>
-                <a routerLink="/dashboard/postavke"
-                    class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700">
+                <a routerLink="/dashboard/postavke" routerLinkActive="active-route"
+                    class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700"
+                    [ngClass]="{'opacity-100': sidebarOpen, 'opacity-0': !sidebarOpen, 'transition-opacity': true, 'duration-300': true}">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M13 10V3L4 14h7v7l9-11h-7z" />
                     </svg>
-                    Postavke
+                    <span *ngIf="sidebarOpen" class="ml-2">Postavke</span>
                 </a>
             </nav>
         </div>
@@ -40,7 +48,7 @@
     <div class="flex flex-col flex-1 overflow-y-auto">
         <div class="flex items-center justify-between h-16 bg-white border-b border-gray-200 px-4">
             <div class="flex items-center">
-                <button class="text-gray-500 focus:outline-none focus:text-gray-700">
+                <button class="text-gray-500 focus:outline-none focus:text-gray-700" (click)="toggleSidebar()">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -51,12 +59,15 @@
             </div>
 
             <!-- Logout button positioned to the right -->
-            <button routerLink="/home" (click)="signOut()" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H3" />
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 21H4a2 2 0 01-2-2V5a2 2 0 012-2h5" />
+            <button routerLink="/home" (click)="signOut()"
+                class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M17 16l4-4m0 0l-4-4m4 4H3" />
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M9 21H4a2 2 0 01-2-2V5a2 2 0 012-2h5" />
                 </svg>
-                
             </button>
         </div>
 
@@ -65,5 +76,4 @@
             <router-outlet></router-outlet>
         </div>
     </div>
-
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.ts b/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.ts
index 84a5368..8cacb1c 100644
--- a/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.ts
+++ b/frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.ts
@@ -1,3 +1,4 @@
+import { NgClass, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import { Router, NavigationEnd } from '@angular/router';
@@ -6,11 +7,13 @@ import { AuthService } from 'src/app/shared/services/auth.service';
 @Component({
   selector: 'app-dashboard-layout',
   standalone: true,
-  imports: [RouterOutlet, RouterLink],
+  imports: [RouterOutlet, RouterLink, NgClass, NgIf],
   templateUrl: './dashboard-layout.component.html',
   styleUrls: ['./dashboard-layout.component.scss'],
 })
 export class DashboardLayoutComponent implements OnInit {
+  sidebarOpen = true;  // Change this to false if you want the sidebar to start closed
+
   constructor(private router: Router, private authService: AuthService) {}
 
   ngOnInit() {
@@ -21,6 +24,10 @@ export class DashboardLayoutComponent implements OnInit {
     });
   }
 
+  toggleSidebar() {
+    this.sidebarOpen = !this.sidebarOpen;
+  }
+
   signOut() {
     this.authService.logOut();
   }
diff --git a/frontend/src/app/components/navbar/navbar.component.html b/frontend/src/app/components/navbar/navbar.component.html
index 6eb0adb..6a2f62b 100644
--- a/frontend/src/app/components/navbar/navbar.component.html
+++ b/frontend/src/app/components/navbar/navbar.component.html
@@ -11,17 +11,17 @@
 
             <!-- Navigation Menu on the Right (Desktop) -->
             <div class="hidden sm:flex space-x-8 items-center">
-                <a routerLink="/" routerLinkActive="text-blue-500 active-route" [routerLinkActiveOptions]="{exact: true}"
+                <a routerLink="/" routerLinkActive="active-route" [routerLinkActiveOptions]="{exact: true}"
                     class="text-md font-medium hover:text-blue-500 font-mountain"
                     [ngClass]="{'text-white': isHomePage && !hasScrolled && !isMobileMenuOpen && !isActive('/') }">
                     Početna
                 </a>
-                <a routerLink="/lokacije" routerLinkActive="text-blue-500 active-route"
+                <a routerLink="/lokacije" routerLinkActive="active-route"
                     class="text-md font-medium hover:text-blue-500 font-mountain"
                     [ngClass]="{'text-white': isHomePage && !hasScrolled && !isMobileMenuOpen && !isActive('/lokacije') }">
                     Lokacije
                 </a>
-                <a routerLink="/kontakt" routerLinkActive="text-blue-500 active-route"
+                <a routerLink="/kontakt" routerLinkActive="active-route"
                     class="text-md font-medium hover:text-blue-500 font-mountain"
                     [ngClass]="{'text-white': isHomePage && !hasScrolled && !isMobileMenuOpen && !isActive('/kontakt') }">
                     Kontakt
@@ -33,16 +33,16 @@
                     <img src="../../../assets/images/smetovi-trees.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer" />
 
                     <div *ngIf="subMenuOpen"
-                        class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-md border z-10">
-                        <ul class="py-2">
+                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-sm shadow-sm border z-10">
+                        <ul>
                             <li>
-                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-4 py-2 hover:bg-gray-100">Admin</a>
+                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Admin</a>
                             </li>
                             <li>
-                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-4 py-2 hover:bg-gray-100">Postavke</a>
+                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Postavke</a>
                             </li>
                             <li>
-                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100">Odjava</a>
+                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
                             </li>
                         </ul>
                     </div>
@@ -67,16 +67,16 @@
                     <img src="../../../assets/images/smetovi-trees.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer" />
 
                     <div *ngIf="subMenuOpen"
-                        class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-md border z-10">
-                        <ul class="py-2">
+                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-sm shadow-sm border z-10">
+                        <ul>
                             <li>
-                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-4 py-2 hover:bg-gray-100">Admin</a>
+                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Admin</a>
                             </li>
                             <li>
-                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-4 py-2 hover:bg-gray-100">Postavke</a>
+                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Postavke</a>
                             </li>
                             <li>
-                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100">Odjava</a>
+                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
                             </li>
                         </ul>
                     </div>
diff --git a/frontend/src/app/components/navbar/navbar.component.scss b/frontend/src/app/components/navbar/navbar.component.scss
index 1498c26..5dffa06 100644
--- a/frontend/src/app/components/navbar/navbar.component.scss
+++ b/frontend/src/app/components/navbar/navbar.component.scss
@@ -9,4 +9,9 @@ nav {
     a {
         padding: 8px;
     }
+    .sub-menu {
+        a {
+            padding: 8px 20px;
+        }
+    }
 }
\ No newline at end of file