Skip to content

Commit 58de7c2

Browse files
imprathameshimprathamesh
committed
Navbar: Sidemenu, mobile menu
1 parent f35d6c6 commit 58de7c2

File tree

11 files changed

+295
-3
lines changed

11 files changed

+295
-3
lines changed

‎BootstrapComponents.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030

3131
<ItemGroup>
3232
<None Include="Accordion\Accordion.razor" />
33+
<None Include="Navbar\NavLeft.razor" />
3334
<None Include="Textbox\PasswordBox.razor" />
3435
</ItemGroup>
3536

‎Card/Card.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
11
@if (Visible)
22
{
33
<div class="card mb-3 [email protected] [email protected] [email protected] border-0 @Class">
4+
@* @if (Header)
5+
{
6+
<div class="card-header">@HeaderContent</div>
7+
}*@
48
<div class="card-body">
59
@ChildContent
610
</div>
11+
@*@if (Footer)
12+
{
13+
<div class="card-footer">@FooterContent</div>
14+
}*@
715
</div>
816
}
917
@code {
1018
[Parameter] public RenderFragment? ChildContent { get; set; }
19+
[Parameter] public RenderFragment? FooterContent { get; set; }
20+
[Parameter] public RenderFragment? HeaderContent { get; set; }
1121
[Parameter] public bool Visible { get; set; } = true;
1222
[Parameter] public Color BackgroundColor { get; set; } = Color.White;
1323
[Parameter] public Color TextColor { get; set; } = Color.Dark;
1424
[Parameter] public ShadowSize Shadow { get; set; } = ShadowSize.Large;
1525
[Parameter] public string? Class { get; set; }
26+
[Parameter] public bool Footer { get; set; } = false;
27+
[Parameter] public bool Header { get; set; } = false;
1628
}

‎Navbar/NavBottom.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@using Microsoft.AspNetCore.Components.Routing
2+
3+
<nav class="mobile-menu">
4+
<ul>
5+
@ChildContent
6+
</ul>
7+
<div class="bottom-space"></div>
8+
</nav>
9+
10+
@code
11+
{
12+
[Parameter] public RenderFragment ChildContent { get; set; }
13+
}

‎Navbar/NavBottom.razor.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.mobile-menu {
2+
background-color: #FFF;
3+
height: 72px;
4+
width: 100%;
5+
position: fixed;
6+
bottom: 0;
7+
border-top: 1px solid #eaeaea;
8+
border-radius: 8px 8px 0 0;
9+
}
10+
11+
.mobile-menu > ul {
12+
display: flex;
13+
list-style-type: none;
14+
list-style: none;
15+
padding: 0;
16+
margin: 0;
17+
justify-content: space-around;
18+
}
19+
20+
21+
22+
.bottom-space {
23+
height: 18px;
24+
width: 100%;
25+
display: block;
26+
background-color: #FFF;
27+
}

‎Navbar/NavItem.razor‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@using Microsoft.AspNetCore.Components.Routing
2+
3+
<li class="nav-item @CssClass">
4+
<NavLink class="nav-link" href="@Link" Match="NavLinkMatch.All">
5+
<i class="@Icon"></i>
6+
</NavLink>
7+
<ul class="no-menu @IsShowSubMenu()">
8+
<li>@LinkTitle</li>
9+
</ul>
10+
</li>
11+
12+
@code
13+
{
14+
[Parameter] public RenderFragment ChildContent { get; set; }
15+
[Parameter] public string CssClass { get; set; }
16+
[Parameter] public string LinkTitle { get; set; }
17+
[Parameter] public string Link { get; set; }
18+
[Parameter] public string Icon { get; set; }
19+
[Parameter] public bool ShowSubMenu { get; set; } = true;
20+
21+
string IsShowSubMenu()
22+
{
23+
if (ShowSubMenu == false)
24+
return "collapse";
25+
return string.Empty;
26+
}
27+
}

‎Navbar/NavItem.razor.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/*left navigation navleft*/
2+
3+
.leftmenu > ul > li {
4+
text-align: center;
5+
color: white;
6+
position: relative;
7+
padding: 4px 12px;
8+
}
9+
10+
.leftmenu > ul > li.logo {
11+
background: #FFFFFF;
12+
}
13+
14+
.leftmenu > ul > li.logo a.nav-link:hover {
15+
background-color: transparent;
16+
}
17+
18+
19+
.leftmenu > ul > li:hover ul {
20+
display: block;
21+
}
22+
23+
.leftmenu > ul > li.nav-item ::deep a.nav-link {
24+
color: white;
25+
padding: 12px 12px;
26+
display: block;
27+
display: grid;
28+
place-items: center;
29+
border-radius: 8px;
30+
pointer-events: auto;
31+
}
32+
33+
.leftmenu > ul > li.nav-item ::deep a:hover {
34+
background-color: #1861ac;
35+
}
36+
37+
.leftmenu > ul > li > a.nav-link > i {
38+
font-size: 24px;
39+
line-height: 24px;
40+
color: white;
41+
}
42+
43+
.leftmenu > ul > li.nav-item ::deep a.active {
44+
background-color: #1861ac;
45+
padding: 12px 12px;
46+
display: block;
47+
display: grid;
48+
place-items: center;
49+
}
50+
51+
.leftmenu > ul > li > ul {
52+
background: var(--sidemenu);
53+
list-style: none;
54+
padding: 0;
55+
margin: 0;
56+
position: absolute;
57+
left: 100%;
58+
top: 0;
59+
border-radius: 0 8px 8px 0;
60+
display: none;
61+
transition: all .3s ease-in-out;
62+
}
63+
64+
.leftmenu > ul > li > ul > li {
65+
text-align: left;
66+
color: white;
67+
font-size: 14px;
68+
font-weight: 400;
69+
}
70+
71+
.leftmenu > ul > li > ul.no-menu {
72+
top: 50%;
73+
transform: translateY(-50%);
74+
}
75+
76+
.leftmenu > ul > li > ul > li:first-child {
77+
padding: 4px 8px;
78+
}
79+
80+
.leftmenu > ul > li > ul > li:last-child > a.active {
81+
border-radius: 0 0 8px 0;
82+
}
83+
84+
.leftmenu > ul > li > ul > li > a.nav-link {
85+
text-align: left;
86+
color: white;
87+
font-size: 16px;
88+
padding: 4px 8px;
89+
opacity: .8;
90+
pointer-events: auto;
91+
white-space: nowrap;
92+
}
93+
94+
.leftmenu > ul > li > ul > li > a.nav-link.active {
95+
background-color: #1861ac;
96+
opacity: 1;
97+
}
98+
99+
.leftmenu > ul > li > ul > li > a.nav-link:hover {
100+
opacity: 1;
101+
}
102+
103+
.leftmenu > ul > li > ul > li:last-child > a.nav-link:hover {
104+
border-radius: 0 0 8px 0;
105+
}
106+
107+
108+
/*bottom navigation navbottom*/
109+
.mobile-menu > ul > li.nav-item {
110+
float: left;
111+
}
112+
113+
.mobile-menu > ul > li > a.nav-link {
114+
display: grid;
115+
place-items: center;
116+
height: 56px;
117+
}
118+
119+
.mobile-menu > ul > li > a.nav-link > i {
120+
font-size: 24px;
121+
color: #808080;
122+
}
123+
124+
.mobile-menu > ul > li > a.nav-link > span {
125+
font-size: 14px;
126+
color: #808080;
127+
margin-top: 4px
128+
}
129+
130+
.mobile-menu > ul > li > a.nav-link.active > i,
131+
.mobile-menu > ul > li > a.nav-link.active > span {
132+
color: var(--sidemenu);
133+
}

‎Navbar/NavLeft.razor‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<nav class="leftmenu">
2+
<ul>
3+
<li class="logo">
4+
<img alt="logo" src="@Logo" height="36" />
5+
</li>
6+
@* <li class="nav-item logo @IsShowLogo()">
7+
<a class="nav-link">
8+
<img alt="logo" src="@Logo" height="36" />
9+
</a>
10+
<ul class="no-menu">
11+
<li>Innovus Clinix</li>
12+
</ul>
13+
</li>*@
14+
@ChildContent
15+
</ul>
16+
</nav>
17+
@code
18+
{
19+
[Parameter] public RenderFragment ChildContent { get; set; }
20+
[Parameter] public bool ShowLogo { get; set; } = true;
21+
[Parameter] public string Logo { get; set; }
22+
23+
string IsShowLogo()
24+
{
25+
if (ShowLogo == false)
26+
return "collapse";
27+
return string.Empty;
28+
}
29+
}

‎Navbar/NavLeft.razor.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
:root {
2+
--sidemenu: #1861ac;
3+
}
4+
5+
.leftmenu {
6+
background: var(--sidemenu);
7+
height: calc(100vh );
8+
/*top: 64px;*/
9+
position: fixed;
10+
left: -80px;
11+
width: 80px;
12+
z-index: 999;
13+
-webkit-animation: slide 0.5s forwards;
14+
animation: slide-right 0.5s forwards;
15+
display: flex;
16+
justify-content: space-between;
17+
flex-direction: column;
18+
}
19+
20+
.leftmenu > ul {
21+
list-style: none;
22+
padding: 0;
23+
margin: 0;
24+
width: 100%;
25+
}
26+
27+
.leftmenu > ul > li.logo {
28+
background-color: #ffffff;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
height: 64px;
33+
width: 100%;
34+
}
35+
36+
37+
@-webkit-keyframes slide-right {
38+
100% {
39+
left: 0;
40+
}
41+
}
42+
43+
@keyframes slide-right {
44+
100% {
45+
left: 0;
46+
}
47+
}

‎Table/TableTd.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
<td class="@TextAlign.Name @Class">
1+
<td class="@TextAlign.Name @Class" @attributes="AdditionalAttributes">
22
@ChildContent
33
</td>
44

55
@code {
66
[Parameter] public RenderFragment? ChildContent { get; set; }
77
[Parameter] public TextAlign TextAlign { get; set; } = TextAlign.Start;
88
[Parameter] public string? Class { get; set; }
9+
[Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }
910
}

‎Table/TableTh.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<th @attributes="AdditionalAttributes" @>
1+
<th @attributes="AdditionalAttributes">
22
@ChildContent
33
</th>
44

0 commit comments

Comments
 (0)