Skip to content

Commit e8b3263

Browse files
jplantesjplantes
committed
Desplegable responsivo
1 parent fb2c012 commit e8b3263

12 files changed

+97
-7
lines changed

‎docs/assets/img/avatar.jpg

22.9 KB
Loading

‎docs/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
<link rel="stylesheet" href="assets/output.css">
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
1313
<link rel="stylesheet" href="styles.92647ec0a7beb8b2898d.css"></head>
14-
<body>
14+
<body class="bg-gray-200">
1515
<app-root></app-root>
1616

1717

18-
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.1a3c78b07cd6f16c6e9a.js" nomodule defer></script><script src="polyfills-es2015.1f913f16a2d346cc8bdc.js" type="module"></script><script src="main-es2015.ddca73aea35c1a66888a.js" type="module"></script><script src="main-es5.ddca73aea35c1a66888a.js" nomodule defer></script></body>
18+
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.1a3c78b07cd6f16c6e9a.js" nomodule defer></script><script src="polyfills-es2015.1f913f16a2d346cc8bdc.js" type="module"></script><script src="main-es2015.7bf4c47ba72342d8858c.js" type="module"></script><script src="main-es5.7bf4c47ba72342d8858c.js" nomodule defer></script></body>
1919
</html>

‎docs/main-es2015.ddca73aea35c1a66888a.js renamed to ‎docs/main-es2015.7bf4c47ba72342d8858c.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main-es5.ddca73aea35c1a66888a.js renamed to ‎docs/main-es5.7bf4c47ba72342d8858c.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { NgModule } from '@angular/core';
44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66
import { MenuComponent } from './components/navBar/menu/menu.component';
7+
import { DesplegableComponent } from './components/navBar/desplegable/desplegable.component';
78

89
@NgModule({
910
declarations: [
1011
AppComponent,
11-
MenuComponent
12+
MenuComponent,
13+
DesplegableComponent
1214
],
1315
imports: [
1416
BrowserModule,

‎src/app/components/navBar/desplegable/desplegable.component.css

Whitespace-only changes.

‎src/app/components/navBar/desplegable/desplegable.component.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!-- Menú para navegador -->
2+
<div class="relative hidden sm:block">
3+
<div>
4+
<button (click)="isOpen = !isOpen" class="relative z-10 block h-8 w-8 rounded-full overflow-hidden border-2 border-gray-600 focus:outline-none focus:border-white" >
5+
<img class="h-full w-full object-cover " src="assets/img/avatar.jpg" alt="Mi avatar">
6+
</button>
7+
</div>
8+
9+
<button *ngIf="isOpen" (click)="isOpen = false" tabindex="-1" class="fixed inset-0 h-full w-full bg-gray-900 opacity-50 cursor-default"></button>
10+
11+
<div *ngIf="isOpen" class="absolute right-0 mt-2 py-1 w-48 bg-white rounded-lg shadow-xl ">
12+
<a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Sobre mi</a>
13+
<a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Configuracón</a>
14+
<a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Salir</a>
15+
</div>
16+
</div>
17+
18+
<!-- Menú para celulares -->
19+
<div class="sm:hidden">
20+
<div class=" border-t border-gray-600">
21+
<div class="mt-3 flex items-center focus:outline-none focus:border-white" >
22+
<img class="h-8 w-8 rounded-full overflow-hidden border-2" src="assets/img/avatar.jpg" alt="Mi avatar">
23+
<span class="text-white ml-3">El Cascarudo</span>
24+
</div>
25+
</div>
26+
27+
<div class=" mt-2 py-1">
28+
<a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Sobre mi</a>
29+
<a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Configuracón</a>
30+
<a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-500 hover:text-white my-1" >Salir</a>
31+
</div>
32+
</div>

‎src/app/components/navBar/desplegable/desplegable.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { DesplegableComponent } from './desplegable.component';
4+
5+
describe('DesplegableComponent', () => {
6+
let component: DesplegableComponent;
7+
let fixture: ComponentFixture<DesplegableComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ DesplegableComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(DesplegableComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/components/navBar/desplegable/desplegable.component.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-desplegable',
5+
templateUrl: './desplegable.component.html',
6+
styleUrls: ['./desplegable.component.css']
7+
})
8+
export class DesplegableComponent implements OnInit {
9+
10+
isOpen: Boolean = false;
11+
12+
13+
constructor() { }
14+
15+
ngOnInit(): void {
16+
17+
const escape = (e) => {
18+
if ( e.key === 'Esc' || e.key === 'Escape') {
19+
this.isOpen = false;
20+
}
21+
}
22+
23+
document.addEventListener( 'keydown', escape );
24+
25+
26+
}
27+
28+
29+
}

‎src/app/components/navBar/menu/menu.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<header class="bg-gray-900 sm:flex sm:justify-between sm:items-center">
22

3-
<div class="flex items-center justify-between px-4 py-3">
3+
<div class="flex items-center justify-between px-6 py-3">
44
<div>
55
<img class="h-10" src="assets/img/angular-logo.png" alt="LogoAngular">
66
</div>
@@ -17,6 +17,8 @@
1717
<a href="#" class="btn-resp-menu" >Menu 1</a>
1818
<a href="#" class="btn-resp-menu" >Menu 2</a>
1919
<a href="#" class="btn-resp-menu" >Menu 3</a>
20+
21+
<app-desplegable></app-desplegable>
2022
</div>
2123

2224
</header>

0 commit comments

Comments
 (0)