Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend changes admin, navbar #31

Merged
merged 2 commits into from
Oct 18, 2024
Merged

Frontend changes admin, navbar #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a4300e
Adding login spinner button on click and show/hide passowrd
rotirk20 Oct 18, 2024
ee64350
Making dashboard sidebar responsive and open/close, navbar submenu ad…
rotirk20 Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 29 additions & 19 deletions frontend/src/app/admin/layout/dashboard-layout/dashboard-layout.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading