feat(navbar): add navbar component and update dashboard layout
This commit is contained in:
parent
8bbbdd2dfa
commit
ebe251c149
10 changed files with 189 additions and 161 deletions
0
src/app/navbar/navbar.component.css
Normal file
0
src/app/navbar/navbar.component.css
Normal file
52
src/app/navbar/navbar.component.html
Normal file
52
src/app/navbar/navbar.component.html
Normal file
|
@ -0,0 +1,52 @@
|
|||
<div class="navbar bg-base-100 rounded-2xl shadow-xl my-3 z-100">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
||||
<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="M4 6h16M4 12h8m-8 6h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[10000] mt-3 w-52 p-2 shadow">
|
||||
<li><a>Dashboard</a></li>
|
||||
<li>
|
||||
<a>Parent</a>
|
||||
<ul class="p-2">
|
||||
<li><a>Submenu 1</a></li>
|
||||
<li><a>Submenu 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Item 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn-ghost text-xl">jklink</a>
|
||||
</div>
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li><a>Item 1</a></li>
|
||||
<li>
|
||||
<details>
|
||||
<summary>Parent</summary>
|
||||
<ul class="p-2">
|
||||
<li><a>Submenu 1</a></li>
|
||||
<li><a>Submenu 2</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li><a>Item 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<a class="btn">Button</a>
|
||||
</div>
|
||||
</div>
|
23
src/app/navbar/navbar.component.spec.ts
Normal file
23
src/app/navbar/navbar.component.spec.ts
Normal file
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NavbarComponent } from './navbar.component';
|
||||
|
||||
describe('NavbarComponent', () => {
|
||||
let component: NavbarComponent;
|
||||
let fixture: ComponentFixture<NavbarComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [NavbarComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(NavbarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
12
src/app/navbar/navbar.component.ts
Normal file
12
src/app/navbar/navbar.component.ts
Normal file
|
@ -0,0 +1,12 @@
|
|||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar',
|
||||
imports: [],
|
||||
templateUrl: './navbar.component.html',
|
||||
styleUrl: './navbar.component.css',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class NavbarComponent {
|
||||
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue