Admin Actions in Submenu

Author: linkdotnet

LinkDotNet.Blog.Web/Shared/AccessControl.razor

@@ -1,10 +1,20 @@
 <AuthorizeView>
-    <Authorized>        
-        <a href="create">Create</a>
-        <a href="draft">Draft Blog Posts</a>
-        <a href="logout">Log out</a>
+    <Authorized>
+        <li>
+            <div class="dropdown">
+                <a data-toggle="dropdown" class="active" href="#" aria-haspopup="true">Admin</a>
+                <div class="dropdown-content">
+                    <div class="nav-header">Blog posts</div>
+                    <a class="dropdown-item item" href="create">Create new</a>
+                    <a class="dropdown-item item" href="draft">Show drafts</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item disabled item" href="#">Version 1.2</a>
+                </div>
+            </div>
+        </li>
+        <li><a href="logout">Log out</a></li>
     </Authorized>
     <NotAuthorized>
-        <a href="login?redirectUri=/">Log in</a>
+        <li><a href="login?redirectUri=/">Log in</a></li>
     </NotAuthorized>
 </AuthorizeView>

LinkDotNet.Blog.Web/Shared/AccessControl.razor.css

@@ -0,0 +1,33 @@
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    min-width: 160px;
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 12px 16px;
+    text-decoration: none;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.dropdown .dropdown-content .item {
+    color: black;
+    text-decoration: none;
+}
+
+.dropdown .dropdown-content .item:active {
+    background-color: white;
+}
+
+.dropdown .dropdown-content .item:hover {
+    background-color: white;
+    color: #66C3CC;
+}

LinkDotNet.Blog.Web/Shared/NavMenu.razor

@@ -17,7 +17,7 @@
                     {
                         <li><a target="_blank" href="@_configuration.GithubAccountUrl"><i class="fab fa-github"></i> Github</a></li>
                     }
-                    <li><AccessControl></AccessControl></li>
+                    <AccessControl></AccessControl>
                 </ul>
             </div>
             <span class="navTrigger">