From 3ed28e3b3af5eb4e4a9cecb59d11965e593d4d32 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Fri, 28 Jun 2024 17:36:51 +0900
Subject: [PATCH] nav bar fix

---
 .../Components/Layout/NavMenu.razor           | 105 ++++--------------
 1 file changed, 22 insertions(+), 83 deletions(-)

diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index 49a37ca..0a654dc 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -8,97 +8,36 @@
 
 <input type="checkbox" title="Navigation menu" class="navbar-toggler" />
 
-<RadzenStack AlignItems="AlignItems.Center">
-    <div class="nav-scrollable flex-column">
+
+ <div class="nav-scrollable">
+    <RadzenStack AlignItems="AlignItems.Center">
         <RadzenPanelMenu Multiple="true">
-            <RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
+            <div onclick="document.querySelector('.navbar-toggler').click()">
+                <RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
+            </div>
             <RadzenPanelMenuItem Text="Original" Icon="first_page">
+            <div onclick="document.querySelector('.navbar-toggler').click()">
                 <RadzenPanelMenuItem Text="Counter" Icon="trending_up" Path="counter" />
                 <RadzenPanelMenuItem Text="Weather" Icon="cloud" Path="weather" />
+            </div>
             </RadzenPanelMenuItem>
             <RadzenPanelMenuItem Text="UI Fundamentals" Icon="water_drop">
-                <RadzenPanelMenuItem Text="Typo" Icon="text_fields" Path="typo" />
-                <RadzenPanelMenuItem Text="Icon" Icon="emoji_emotions" Path="icon" />
-                <RadzenPanelMenuItem Text="Borders" Icon="border_outer" Path="borders" />
-                <RadzenPanelMenuItem Text="SRBS" Icon="sort_by_alpha" Path="srbs" />
+                <div onclick="document.querySelector('.navbar-toggler').click()">
+                    <RadzenPanelMenuItem Text="Typo" Icon="text_fields" Path="typo" />
+                    <RadzenPanelMenuItem Text="Icon" Icon="emoji_emotions" Path="icon" />
+                    <RadzenPanelMenuItem Text="Borders" Icon="border_outer" Path="borders" />
+                    <RadzenPanelMenuItem Text="SRBS" Icon="sort_by_alpha" Path="srbs" />
+                </div>
             </RadzenPanelMenuItem>
             <RadzenPanelMenuItem Text="DataGrid" Icon="calendar_view_month">
-                <RadzenPanelMenuItem Text="Basic" Icon="view_headline" Path="datagrid" />
-                <RadzenPanelMenuItem Text="Advanced" Icon="view_headline" Path="datagridadv" />
-                <RadzenPanelMenuItem Text="REST" Icon="view_headline" Path="datagridrest" />
-                <RadzenPanelMenuItem Text="Editing" Icon="view_headline" Path="datagridedit" />
+                <div onclick="document.querySelector('.navbar-toggler').click()">
+                    <RadzenPanelMenuItem Text="Basic" Icon="view_headline" Path="datagrid" />
+                    <RadzenPanelMenuItem Text="Advanced" Icon="view_headline" Path="datagridadv" />
+                    <RadzenPanelMenuItem Text="REST" Icon="view_headline" Path="datagridrest" />
+                    <RadzenPanelMenuItem Text="Editing" Icon="view_headline" Path="datagridedit" />
+                </div>
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>
-    </div>
-</RadzenStack>
-
-@* <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="typo">
-                <RadzenIcon Icon="description" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Typo
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="icon">
-                <RadzenIcon Icon="face" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Icon
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="borders">
-                <RadzenIcon Icon="aspect_ratio" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Borders
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="srbs">
-                <RadzenIcon Icon="event_seat" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;SRBS
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="datagrid">
-                <RadzenIcon Icon="assignment" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="datagridadv">
-                <RadzenIcon Icon="assignment" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid Adv.
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="datagridrest">
-                <RadzenIcon Icon="assignment" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid REST
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="datagridedit">
-                <RadzenIcon Icon="build" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;DataGrid Edit
-            </NavLink>
-        </div>
-    </nav>
-</div> *@
+    </RadzenStack>
+</div>