ChartJs.Blazor/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Shared/NavMenu.razor at 2148a20d87df2e3bf6c5da308576b68456b405d6 · mariusmuntean/ChartJs.Blazor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">ChartJs.Blazor Samples</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            </div>

            <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
                <ul class="nav flex-column">
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="welcome">
                            <span class="oi oi-home" aria-hidden="true"></span>Welcome
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="SimpleBarChart">
                            <span class="oi oi-bar-chart" aria-hidden="true"></span>Simple BarChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="HorizontalBarChart">
                            <span class="oi oi-bar-chart" aria-hidden="true"></span>Horizontal BarChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="StackedBarChart">
                            <span class="oi oi-bar-chart" aria-hidden="true"></span>Stacked BarChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="TimeBarChart">
                            <span class="oi oi-bar-chart" aria-hidden="true"></span>Time BarChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="LinearLineChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>Linear LineChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="LogarithmicLineChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>Logarithmic LineChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="TimeLineChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>Time LineChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="DoughnutChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>DoughChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="PieChart">
                            <span class="oi oi-pie-chart" aria-hidden="true"></span>PieChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="PolarAreaChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>PolarAreaChart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="BubbleChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>Bubble Chart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="ScatterChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>Scatter Chart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="RadarChart">
                            <span class="oi oi-graph" aria-hidden="true"></span>Radar Chart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="OnClickHandler">
                            <span class="oi oi-info" aria-hidden="true"></span>OnClickHandler
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="SineLineChart">
                            <span class="oi oi-info" aria-hidden="true"></span>Sine Line Chart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="FinancialChart">
                            <span class="oi oi-info" aria-hidden="true"></span>Financial chart
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="about">
                            <span class="oi oi-info" aria-hidden="true"></span>About
                        </NavLink>
                    </li>
                </ul>
	             </div>

	             @code {
		             private bool collapseNavMenu = true;

		             private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

		             private void ToggleNavMenu()
		             {
			             collapseNavMenu = !collapseNavMenu;
		             }

	             }