Skip to content

Commit

Permalink
Merge pull request #31 from rotirk20/development
Browse files Browse the repository at this point in the history 
Frontend changes admin, navbar
  • Loading branch information
@rotirk20
rotirk20 authored Oct 18, 2024
2 parents ee9d9fe + ee64350 commit 088f420
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 52 deletions.
48 changes: 29 additions & 19 deletions frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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"
Expand All @@ -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>

Expand All @@ -65,5 +76,4 @@
<router-outlet></router-outlet>
</div>
</div>

</div>
9 changes: 8 additions & 1 deletion frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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() {
Expand All @@ -21,6 +24,10 @@ export class DashboardLayoutComponent implements OnInit {
});
}

toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
}

signOut() {
this.authService.logOut();
}
Expand Down
28 changes: 14 additions & 14 deletions frontend/src/app/components/navbar/navbar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -86,7 +86,7 @@
</div>

<!-- Mobile Menu -->
<div id="mobile-menu" class="sm:hidden hidden">
<div id="mobile-menu" class="sm:hidden hidden px-4">
<a routerLink="/" routerLinkActive="text-blue-500 active-route" [routerLinkActiveOptions]="{exact: true}"
class="block px-4 py-2 text-md font-medium hover:bg-gray-100 font-mountain text-black">Početna</a>
<a routerLink="/lokacije" routerLinkActive="text-blue-500 active-route"
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/app/components/navbar/navbar.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,9 @@ nav {
a {
padding: 8px;
}
.sub-menu {
a {
padding: 8px 20px;
}
}
}
Loading

0 comments on commit 088f420

Please sign in to comment.