Correo: aconradoacosta27@outlook.

es
Contraseña: Lalisa15202427

Ng generate component ----nombredelcomponente---

children:[
{
path:'change-detection',
title:'Change Detection',
loadComponent:()=>import('./dashboard/pages/change-detection/change-detection.component'),
},

{
path:'control-flow',
title:'Control-flow',
loadComponent:()=>import('./dashboard/pages/control-flow/control-flow.component'),
},

{
path:'defer-options',
title:'Defer-options',
loadComponent:()=>import('./dashboard/pages/defer-options/defer-options.component'),
},

{
path:'defer-views',
title:'Defer-views',
loadComponent:()=>import('./dashboard/pages/defer-views/defer-views.component'),
},
{
path:'user/:id',
title:'User',
loadComponent:()=>import('./dashboard/pages/user/user.component'),
},

{
path:'users-list',
title:'Users-list',
loadComponent:()=>import('./dashboard/pages/users/users.component'),
},

{
path:'view-transition',
title:'View-transition',
 loadComponent:()=>import('./dashboard/pages/view-transition/view-transition.component'),
},

},

{
path:'',
redirectTo:'/dashboard',
pathMatch:'full'
}
<nav class="navbar">
<a href="#" class ="sincronizacion" ><i class="bi bi-arrow-repeat"></i></a>
<a href="#" class="notificacion"><i class="bi bi-bell-fill"></i></a>

<a href="#" class="user" data-toggle="dropdown"> System admin <b class="caret"></b></a>

</nav>

Rutas

<nav class="navbar navbar-expand-lg bg-body-tertiary">

<ul>
<li>
<a routerLinkActive="activebutton" routerLink="/inicio"> INICIO</a>
<a routerLinkActive="activebutton" routerLink="/cart"> home</a>
</li>
</ul>

</nav>

const sidebar=document.querySelector('.sidebar');
const toggleBtn=document.querySelector('.toggle-btn');
toggleBtn.addEventListener('click',()=>{
sidebar.classList.toggle('active');
});

https://www.youtube.com/watch?v=ZYGh7MZAWoY

<ul class="list">
<li class="list-item">
<a href="">
<i class='bx bxs-home'></i>
<span class="link-name">Home</span>
</a>
</li>

<li class="list-item">
<a href="">
<i class='bx bxs-inbox'></i>
<span class="link-name">Inventario</span>
</a>
</li>
<nav class="sidebar">
<div class="logo-menu">
<h2 class="logo">HHAHAHAH</h2>
<i class="bx bx-menu toggle-btn"></i>
</div>

</nav>
-->

<nav class="sidebar">
<div class="logo-menu">
<h2 class="logo"></h2>
<i class="bx bx-menu toggle-btn"></i>
</div>

<ul class="list">
<li class="list-item">
<a href="">
<i class='bx bxs-home'></i>
<span class="link-name">Home</span>
</a>
</li>
<li class="list-item">
<a href="">
 <i class='bx bxs-home'></i>
<span class="link-name">Inventario</span>
</a>
</li>
</ul>

</nav>

.sidebar{
position:fixed;
top:56px;
left:0px;
width:200px;
height:300px;
background:purple;
}

.sidebar .logo-menu {
display:flex;
align-item:center;
width:100%;
height:60px;
background:slateblue;
}

.sidebar .logo-menu .logo{

font-size:20px;
color:#fff;
pointer-events:none;
}

.sidebar .logo-menu .toggle-btn{

position:absolute;
top:11px;
left:74%;
transform:translateX(-40);
width:40px;
height:40px;
background:salmon;
font-size:22px;
color:#fff;
text-align:center;
line-height:40px;
 cursor:pointer;
}

.sidebar .list{
margin-top:10px;

.list .list-item{
list-style:none;
width:100%;
height:50px;
margin:5px 0;
line-height:50px;

.list .list-item a {
font-size:18px;
color:#fff;
text-decoration:none;
border-radius:6px;
background:rgba(220,220,220);
}

.list .list-item a i{
min-width:50px;
height:50px;
text-align:center;
line-height:50px;
}

.sidebar .list{
margin-top:10px;
}

.list .list-item {
list-style:none;
width:100%;
height:40px;
margin:2px 0px;
line-height:50px;

}
.list .list-item a {
display:flex;
align-items:center;
font-size:18px;
color:#fff;
text-decoration:none;
border-radius:6px;
transition:.5s;

.list .list-item.active a,
.list .list-item a:hover {
background:rgba(255,255,255,2)

:root {
--main-bg-color: #009d63;
--main-text-color: #009d63;
--second-text-color: #bbbec5;
--second-bg-color: #c1efde;
}

.primary-text {
color: var(--main-text-color);
}

.second-text {
color: var(--second-text-color);
}

.primary-bg {
background-color: var(--main-bg-color);
}

.secondary-bg {
background-color: var(--second-bg-color);
}

.rounded-full {
border-radius: 100%;
}
<!-- navbar -->

{path:'inicio',component:NavbarComponent},
{path:'cart',component:HomeComponent}

}<div class="inputBox">

<input type="text" required="required">

</div>

{path:'',redirectTo:'/',pathMatch:'full'},

.sidebar {
position: fixed;
left: 0;
top: 20;

height: 40vh;
transition: 0.3s;

width: 40px;
&.expanded {
width: 250px;

.header {
h1 {
margin-left: 0px;
}
#bars {
margin-left: 0px;
&::before {
transform: rotate(-135deg);
}
}
}

.content {
 .link {
.content {
.title {
max-width: 200px;
}
.icon {
margin-right: 3px;
}
}
.children {
.content {
padding-left: 30px;
}
}
}
}
}

background: #f3f1f1;
color: #000;

.header {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background:transparent;

h1 {
font-size: 20px;
color: #8f8f8f;
margin: 0;
flex: 1;
transition: 0.3s;
margin-left: -100px;
}

.gg-menu {
color: #6d6e7e;
cursor: pointer;
transition: 0.3s;
margin-left: -25px;
min-width: 20px;
height: 12px;
padding-left: 12px;
 display: block;
text-align: center;

&::before {
transition: 0.3s;
transform: rotate(45deg);
}

&:hover {
color: white;
}
}
}

.content {
.link {
.children {
.content {
background: #27283a;
padding-left: 10px;

&.active {
background-color: #1fd387;
}
}
}
.content {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px;
cursor: pointer;
transition: 0.3s;
flex-direction: row;

&:hover {
background: #1fd387;
.title {
color: white;
}
svg {
fill: white;
}
}
 &.active {
background: #1fd387;
.title {
color: black;
}
}

.icon {
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.title {
flex: 1;
color: black;
transition: 0.3s;
max-width: 0px;
overflow: hidden;

}
}
}
}
}

#menu {
background-color: #1fd387;
}

#icons {
color: #fff;
}

#titulo {
position: absolute;
padding-left: 20px;
float: left;
line-height: 55px;
color: #fff;
text-transform: uppercase;
font-size: 1.4em;
}
.inputbox {
position: relative;
width: 220px;
margin: -15px 0;
left: 18px;
font-size: 14px;
border-bottom: 1px solid #dfdfdf;
}

.inputbox input {
width: 60%;
height: 40px;
background: transparent;
font-size: em;
border: none;
outline: none;
padding: 10px 25px 0 5px;
color: #fff;

}
.inputbox i{
position: absolute;
right: 1px;
color: #dfdfdf;
font-size: 0.9em;
top: 17px;
}

<div class="sidebar" [ngClass]="{ expanded: isExpanded }">

<div class="header">
<h1 class="title"></h1>
<div class="toggle" (click)="handleSidebarToggle()">
<i class="bi bi-list"></i>
</div>
</div>

<div class="content">

<div class="inputbox">
<i class="bi bi-search"></i>
<input type="text" placeholder="Search......." />

</div>
 <div class="link">
<div class="content">
<div class="icon">
<i class="bi bi-house" ></i>
</div>
<div class="title">Home</div>
</div>
</div>

<div class="link">
<div class="content">
<div class="icon">
<i class="bi bi-list-ol"></i>
</div>
<div class="title">Inve</div>
</div>
</div>
<div class="link with-children">
<div class="content">
<div class="icon">
<i class="bi bi-gear"></i>
</div>
<div class="title">Subjects</div>
</div>
</div>
</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-
awesome.min.css);

//header
<nav class="navbar" id="menu">
<!-- This is the application title with a link to the root -->
<a class="navbar-brand" id="titulo"> AUCTIONATOR</a>
<!-- This is a spacer so the links move to the end -->
<div class="mr-auto"></div>
<!-- This main navigation links are defined here -->
<div class="navbar-expand">
<div class="navbar-nav" id="menudeiconos">
<!-- Each link has the routerLink property set to a different route -->
<a class="nav-item nav-link" routerLinkActive="active" routerLink="/home" id="icons"><i
class="bi bi-arrow-repeat"></i></a>
<a class="nav-item nav-link" routerLinkActive="active" routerLink="/home" id="icons"><i
class="bi bi-bell-fill"></i></a>
<a class="nav-item nav-link" routerLinkActive="active" routerLink="/home" id="icons"><i
class="bi bi-person-fill"></i>Sys Admin &(admin)</a>
</div>
</div>
</nav>

#menu {
background-color: #1fd387;
}

#icons {
color: #fff;
}

#titulo {
position: absolute;
padding-left: 20px;
float: left;
line-height: 55px;
color: #fff;
text-transform: uppercase;
font-size: 1.4em;
}
//search busqueda

<div class="inputbox">
<i class="bi bi-search"></i>
<input type="text" placeholder="Search......." />

</div>
.inputbox {
position: relative;
width: 220px;
margin: -15px 0;
left: 18px;
font-size: 14px;
border-bottom: 1px solid #dfdfdf;
}

.inputbox input {
width: 60%;
height: 40px;
background: transparent;
font-size: em;
border: none;
outline: none;
padding: 10px 25px 0 5px;
color: #fff;

}
.inputbox i{
position: absolute;
right: 1px;
color: #8f8f8f;
font-size: 0.9em;
top: 17px;
}

//login
<div class="login-container">
<form *ngIf="activeForm === 'login'" [formGroup]="loginForm" (ngSubmit) = "login()">
<h2>login</h2>

<div class="form-group">
<input type="email" formControlName="email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" formControlName="password" placeholder="Password">

</div>
<button type="submit">Login</button>

<p (click)="toggleForm('register')">Dont't have an account?

<span class="highlighted">Register</span>
</p>
 </form>

<form *ngIf="activeForm === 'register'" [formGroup]="registerForm" (ngSubmit) = "register()">

<h2>login</h2>

<div class="form-group">
<input type="text" formControlName="username" placeholder="Username">
</div>
<div class="form-group">
<input type="email" formControlName="email" placeholder="Email">

</div>
<div class="form-group">
<input type="email" formControlName="password" placeholder="Password">

</div>
<button type="submit">Register</button>

<p (click)="toggleForm('login')">Already have an account?

<span class="highlighted">Login</span>
</p>
</form>

</div>

https://www.youtube.com/watch?v=tfo08-
ZdALI&list=PL0p3qZD8OGB9k5mdiw1Azf3Fz9JHF2WaQ&index=10

https://www.youtube.com/watch?
v=xQLCcgy3m9E&list=PL3EibBwUnE37aZ937p2L2VoozXUKcsI76&index=8

https://www.youtube.com/watch?v=S8hdW6rz4jY&list=PLCKuOXG0bPi0Ym-
wA_VIViDzUCgPqWhWu&index=9

https://youtube.com/watch?v=lxIQfVG9ZA8

.header {
display: block;
 margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #3F5EFB;
position: fixed;
height: 60px !important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}

#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #5f1a7c 0%, #3F5EFB 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);

}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
 box-sizing: border-box;
position: relative;
height: 3px;
width: 100%;
background-color: #fff;
margin: 2px 0;
}
.horizontal, .diagonal.part-1, .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
} */
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>

<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic <span>Web Developer</span></li>
<li><a href="#" >Company</a></li>
<li><a href="#" >Instagram</a></li>
<li><a href="#" >Twitter</a></li>
<li><a href="#" >YouTube</a></li>
<li><a href="#" >Linkedin</a></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>

//

<div class="sidenav" [class.minimized]="isMinimized">

<button class="minimize-btn" (click)="toggleMinimize()">

<i class="fa fa-bars"></i>
</button>

<div class="sidebar-content">
<a href="#about"> <i class="fa fa-home"></i>About</a>

<button class="dropdown-btn" (click)="toggleDropdown($event)">

<i class="fa fa-warehouse"></i>Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container" [style.display]="dropdownVisible ? 'block' : 'none'">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
 <a href="#">Link 3</a>
</div>

<a href="#contact">Search</a>

</div>

</div>

body {
font-family: "Lato", sans-serif;
}

/* Style the sidenav links and the dropdown button */

.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}

/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}

/* Add an active class to the active dropdown button */

.active {
background-color: green;
color: white;
}
 /* Dropdown container (hidden by default). Optional: add a lighter background color and some left
padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}

/* Optional: Style the caret down icon */

.fa-caret-down {
float: right;
padding-right: 8px;
}

/* Some media queries for responsiveness */

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

.minimized a:not(:first-child),
.minimized .dropdown-btn {
display: none;
}

.sidebar-container {
display: flex;
}

.sidenav {
width: 250px;
height: 100vh;
background-color: #333;
transition: width 0.3s ease;
}

.minimized .sidenav {
width: 20px;
}
.sidebar-content {
padding: 20px;
transition: opacity 0.1s ease;

.minimized .sidebar-content {
opacity: 0; /* Oculta los elementos cuando el sidebar está minimizado */
pointer-events: none; /* Evita que los elementos sean clicables cuando están ocultos */
}

.sidebar-content a {
display: flex;
align-items: center;
color: #fff;
text-decoration: none;
padding: 10px;
}

.minimize-btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
}

.minimize-btn i {
font-size: 20px;
}

import { Component } from '@angular/core';

import { CommonModule } from '@angular/common' ;
import { DashboardService } from './dashboard.service';

@Component({
selector: 'app-dashboard',
standalone: true,
 imports: [CommonModule],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.css'
})
export class DashboardComponent {
dropdownVisible: boolean = false;
isMinimized: boolean = false;

toggleDropdown(event: Event): void {

this.dropdownVisible = !this.dropdownVisible;
event.stopPropagation(); // Evita que el evento se propague a elementos superiores
}

toggleMinimize(): void {
this.isMinimized = !this.isMinimized;
}