Initial Commit
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="tablet">
|
||||
<div class="tabletHeader" @onclick="OnNavClicked" @onclick:preventDefault="true" @onclick:stopPropagation="true">
|
||||
<div class="tabletTitle">
|
||||
IGP Fan Reference
|
||||
</div>
|
||||
<div class="tabletButtons">
|
||||
|
||||
<SearchButtonComponent/>
|
||||
<div class="tabletButton">
|
||||
<div class="tabletMenuTitle">
|
||||
<i class="fa-solid fa-bars" style="font-size: 32px; margin:auto"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="fullPageButton @navOpen" @onclick="OnNavClicked" @onclick:stopPropagation="false"
|
||||
@onclick:preventDefault="false">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tabletNav @navOpen">
|
||||
@foreach (var webSection in WebSections)
|
||||
{
|
||||
var pages = (from page in WebPages
|
||||
where page.WebSectionModelId == webSection.Id
|
||||
select page).ToList();
|
||||
|
||||
<div>
|
||||
<div>
|
||||
@webSection.Name
|
||||
</div>
|
||||
|
||||
<div class="tabletNavItems">
|
||||
@foreach (var webPage in pages)
|
||||
{
|
||||
if (webPage.IsPrivate.Equals("True"))
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
<NavLink href="@webPage.Href" class="tabletNavItem" @onclick="OnPageClicked">
|
||||
@webPage.Name
|
||||
</NavLink>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.fullPageButton {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.fullPageButton.True {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tablet {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabletNav {
|
||||
position: fixed;
|
||||
background-color: rgba(30, 30, 30, 0.98);
|
||||
display: none;
|
||||
height: 100vh;
|
||||
padding: 32px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
top: 0px;
|
||||
gap: 22px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabletButtons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.tabletNavItem {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.tabletNavItems {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabletNav.True {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabletHeader {
|
||||
height: 60px;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
background-color: var(--accent);
|
||||
border-bottom: 4px solid rgba(0, 0, 0, 0.95);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tabletMenuTitle {
|
||||
margin: auto;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabletTitle {
|
||||
margin: auto;
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.tabletButton {
|
||||
border: 2px solid black;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabletButton:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
|
||||
@@media only screen and (max-width: 1025px) {
|
||||
.tablet {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@media only screen and (max-width: 480px) {
|
||||
.tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
#if NO_SQL
|
||||
[Parameter] public List<WebSectionModel> WebSections { get; set; } = default!;
|
||||
|
||||
[Parameter] public List<WebPageModel> WebPages { get; set; } = default!;
|
||||
|
||||
#else
|
||||
[Parameter]
|
||||
public DbSet<WebSectionModel> WebSections { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public DbSet<WebPageModel> WebPages { get; set; }
|
||||
#endif
|
||||
|
||||
|
||||
bool navOpen = true;
|
||||
|
||||
void OnNavClicked(EventArgs eventArgs)
|
||||
{
|
||||
navOpen = !navOpen;
|
||||
}
|
||||
|
||||
|
||||
void OnPageClicked(EventArgs eventArgs)
|
||||
{
|
||||
navOpen = false;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user