Hello everybody I have a html code, css, using blazor where I need to do some things in javascript.
my code:
.mywin {
width: 300px;
height: 150px;
}
.navigation {
width: 100px;
height: 100%;
}
.ItemActive {
border-radius: 5px;
background: red;
}
.navigation.active {
width: 50px;
}
.windowHome .windowInfo {
right: 0;
width: 200px;
height: 100%;
}
<div classe="mywin">
<button type="button">Click Me!</button>
<div class="navigation">
<ul>
<li class="ItemActive">
<a href="#"><i class="fas fa-home icon"/><span>Home</span></a>
</li>
<li>
<a href="#"><i class="fas fa-bell icon"/><span>Info</span> </a>
</li>
</ul>
<div class="windowHome">
....
</div>
<div class="windowInfo">
....
</div>
</div>
<div>
@code {
}
1- Change the class navigation to navigation active by clicking on the button and when clicking again, go back to navigation
2 - Change the ItemActive class by clicking on another item, in this case I have two, Home and Info
3 - Display the window as I click on the Home and Info items, with windowHome for the Home item and windowInfo for the info item
Could someone show me how I can do this?
Something to start with using Blazor:
<div class="navigation @(@IsClicked ? "active" : "")">@(@IsClicked ? "active" : "")</div>
<ul>
<li class="@(@IsClicked ? "" : "ItemActive")">
<a href="#"><i class="fas fa-home icon" /><span>Home</span></a>
</li>
<li class="@(@IsClicked ? "ItemActive" : "")">
<a href="#"><i class="fas fa-bell icon" /><span>Info</span> </a>
</li>
</ul>
@if (@IsClicked)
{
<div class="windowHome">
windowHome
</div>
}
else
{
<div class="windowInfo">
windowInfo
</div>
}
@code {
private bool IsClicked;
protected void OnClick()
{
IsClicked = !IsClicked;
}
}