create admin layout
This commit is contained in:
parent
e2211e2de7
commit
ce76bf75c9
@ -29,7 +29,7 @@
|
|||||||
'loading': loading(),
|
'loading': loading(),
|
||||||
'btn-responsive': responsive()
|
'btn-responsive': responsive()
|
||||||
}"
|
}"
|
||||||
[class]="customClass()"
|
[class]="customClass() || ''"
|
||||||
(click)="onClick($event)"
|
(click)="onClick($event)"
|
||||||
>
|
>
|
||||||
<ng-content />
|
<ng-content />
|
||||||
|
|||||||
@ -0,0 +1,32 @@
|
|||||||
|
<footer class="footer sm:footer-horizontal bg-neutral text-neutral-content p-10">
|
||||||
|
@if (config()) {
|
||||||
|
@for ( footerNav of config()?.navs; let i = $index; track i){
|
||||||
|
<nav>
|
||||||
|
<h6 class="footer-title">{{ footerNav.label }}</h6>
|
||||||
|
@for ( link of footerNav.links; let j = $index; track j){
|
||||||
|
<a class="link link-hover" [routerLink]="link.href" >{{link.text}}</a>
|
||||||
|
}
|
||||||
|
</nav>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<nav>
|
||||||
|
<h6 class="footer-title">Services</h6>
|
||||||
|
<a class="link link-hover">Branding</a>
|
||||||
|
<a class="link link-hover">Design</a>
|
||||||
|
<a class="link link-hover">Marketing</a>
|
||||||
|
<a class="link link-hover">Advertisement</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 class="footer-title">Company</h6>
|
||||||
|
<a class="link link-hover">About us</a>
|
||||||
|
<a class="link link-hover">Contact</a>
|
||||||
|
<a class="link link-hover">Jobs</a>
|
||||||
|
<a class="link link-hover">Press kit</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 class="footer-title">Legal</h6>
|
||||||
|
<a class="link link-hover">Terms of use</a>
|
||||||
|
<a class="link link-hover">Privacy policy</a>
|
||||||
|
<a class="link link-hover">Cookie policy</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { Footer } from './footer';
|
||||||
|
|
||||||
|
describe('Footer', () => {
|
||||||
|
let component: Footer;
|
||||||
|
let fixture: ComponentFixture<Footer>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [Footer]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(Footer);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { Component, input } from '@angular/core';
|
||||||
|
import { FooterConfig } from '../../daisy.types';
|
||||||
|
import { RouterLink } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'rs-daisy-footer',
|
||||||
|
imports: [
|
||||||
|
RouterLink,
|
||||||
|
],
|
||||||
|
templateUrl: './footer.html',
|
||||||
|
styleUrl: './footer.css',
|
||||||
|
})
|
||||||
|
export class Footer {
|
||||||
|
|
||||||
|
config = input<FooterConfig>()
|
||||||
|
}
|
||||||
|
|
||||||
13
admin/projects/rschneider/ng-daisyui/src/lib/daisy.types.ts
Normal file
13
admin/projects/rschneider/ng-daisyui/src/lib/daisy.types.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
export interface Link{
|
||||||
|
href: string;
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FooterNav{
|
||||||
|
label: string;
|
||||||
|
links: Link[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FooterConfig{
|
||||||
|
navs: FooterNav[]
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
|
||||||
|
<div class="drawer lg:drawer-open">
|
||||||
|
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
|
||||||
|
|
||||||
|
<!-- Page Content -->
|
||||||
|
<div class="drawer-content flex flex-col h-screen">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="navbar bg-base-200 p-4 shadow-md z-10">
|
||||||
|
<div class="flex-1">
|
||||||
|
<a class="btn btn-ghost text-xl">DV Booking</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex-none">
|
||||||
|
<div class="dropdown dropdown-end">
|
||||||
|
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img
|
||||||
|
alt="Tailwind CSS Navbar component"
|
||||||
|
src="sample-profile-photo.webp" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
tabindex="-1"
|
||||||
|
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
|
||||||
|
<li>
|
||||||
|
<a class="justify-between">
|
||||||
|
Profile
|
||||||
|
<span class="badge">New</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li><a>Settings</a></li>
|
||||||
|
<li><a (click)="onClick($event,'logout')">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="flex-1 p-6 bg-base-100 overflow-y-auto">
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-base-200 p-4 text-center">
|
||||||
|
<p>Copyright © 2025 - All right reserved</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<div class="drawer-side">
|
||||||
|
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||||
|
<ul class="menu p-4 w-80 min-h-full bg-base-300 text-base-content">
|
||||||
|
<!-- Sidebar content here -->
|
||||||
|
<li class="text-lg font-bold p-4">My App</li>
|
||||||
|
<li><a><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>Dashboard</a></li>
|
||||||
|
<li><a><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Analytics</a></li>
|
||||||
|
<li><a><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>Reports</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AdminLayoutRs1 } from './admin-layout-rs1';
|
||||||
|
|
||||||
|
describe('AdminLayoutRs1', () => {
|
||||||
|
let component: AdminLayoutRs1;
|
||||||
|
let fixture: ComponentFixture<AdminLayoutRs1>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AdminLayoutRs1]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(AdminLayoutRs1);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { Component, input, output } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'rs-daisy-admin-layout-rs1',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './admin-layout-rs1.html',
|
||||||
|
styleUrl: './admin-layout-rs1.css',
|
||||||
|
})
|
||||||
|
export class AdminLayoutRs1 {
|
||||||
|
|
||||||
|
|
||||||
|
readonly loggedIn = input<boolean>(false)
|
||||||
|
|
||||||
|
// New Output for the click event
|
||||||
|
// By default, it emits 'void' (no specific data), but you could specify a type if needed.
|
||||||
|
readonly clickEvent = output<MouseEvent>();
|
||||||
|
|
||||||
|
// Event handler method
|
||||||
|
onClick(event: MouseEvent, command: string): void {
|
||||||
|
// Prevent default browser behavior for buttons if needed (e.g., form submission)
|
||||||
|
// event.preventDefault();
|
||||||
|
|
||||||
|
// Emit the click event
|
||||||
|
this.clickEvent.emit(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export * from './admin-layout-rs1/admin-layout-rs1';
|
||||||
@ -4,3 +4,6 @@
|
|||||||
|
|
||||||
export * from './lib/ng-daisyui';
|
export * from './lib/ng-daisyui';
|
||||||
export * from './lib/components/button/button';
|
export * from './lib/components/button/button';
|
||||||
|
export * from './lib/components/footer/footer';
|
||||||
|
export * from './lib/daisy.types';
|
||||||
|
export * from './lib/layout/';
|
||||||
|
|||||||
BIN
admin/public/sample-profile-photo.webp
Normal file
BIN
admin/public/sample-profile-photo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -1,6 +1,3 @@
|
|||||||
<div>
|
<rs-daisy-admin-layout-rs1 (clickEvent)="logout()" [loggedIn]="true">
|
||||||
<button (click)="logout()">Logout</button>
|
|
||||||
<rs-daisy-button variant="primary"(click)="logout()" >Logout</rs-daisy-button>
|
|
||||||
</div>
|
|
||||||
<app-main-menu></app-main-menu>
|
|
||||||
<router-outlet />
|
<router-outlet />
|
||||||
|
</rs-daisy-admin-layout-rs1>
|
||||||
|
|||||||
@ -5,12 +5,13 @@ import { AuthService } from './auth/auth.service';
|
|||||||
import { AdminLayout } from './layout/admin-layout/admin-layout';
|
import { AdminLayout } from './layout/admin-layout/admin-layout';
|
||||||
import { finalize } from 'rxjs/operators';
|
import { finalize } from 'rxjs/operators';
|
||||||
import {Button} from '@rschneider/ng-daisyui';
|
import {Button} from '@rschneider/ng-daisyui';
|
||||||
|
import { AdminLayoutRs1 } from '../../projects/rschneider/ng-daisyui/src/lib/layout';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
|
|
||||||
imports: [RouterOutlet, MainMenu, Button],
|
imports: [RouterOutlet, MainMenu, Button, AdminLayoutRs1],
|
||||||
templateUrl: './app.html',
|
templateUrl: './app.html',
|
||||||
styleUrl: './app.css'
|
styleUrl: './app.css',
|
||||||
})
|
})
|
||||||
export class App {
|
export class App {
|
||||||
protected readonly title = signal('admin');
|
protected readonly title = signal('admin');
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user