feat: Add dropdown elements to top menu

coreui · Feb 27, 2020 · c441ab1 · c441ab1
1 parent fdde0ca
commit c441ab1
Showing 1 changed file with 27 additions and 18 deletions.
diff --git a/coreui/src/containers/TheHeader.vue b/coreui/src/containers/TheHeader.vue
@@ -14,25 +14,34 @@
       <CIcon name="logo" height="48" alt="Logo"/>
     </CHeaderBrand>
     <CHeaderNav class="d-md-down-none mr-auto">
-      <CHeaderNavItem class="px-3">
-        <CHeaderNavLink to="/media">
-          Media
-        </CHeaderNavLink>
-      </CHeaderNavItem>
-      <CHeaderNavItem class="px-3">
-        <CHeaderNavLink to="/notes">
-          Notes
-        </CHeaderNavLink>
+      <CHeaderNavItem>
+        <CDropdown
+          color="link"
+          :caret="false"
+        >
+          <template #toggler-content>
+            <a class="c-header-nav-link">
+              Pages
+            </a>
+          </template>
+          <CDropdownItem href="#/notes">Notes</CDropdownItem>
+          <CDropdownItem href="#/users">Users</CDropdownItem>
+        </CDropdown>
       </CHeaderNavItem>
-      <CHeaderNavItem class="px-3">
-        <CHeaderNavLink to="/users">
-          Users
-        </CHeaderNavLink>
-      </CHeaderNavItem>
-      <CHeaderNavItem class="px-3">
-        <CHeaderNavLink to="/menu">
-          Menu
-        </CHeaderNavLink>
+      <CHeaderNavItem>
+        <CDropdown
+          color="link"
+          :caret="false"
+        >
+          <template #toggler-content>
+            <a class="c-header-nav-link">
+              Settings
+            </a>
+          </template>
+          <CDropdownItem href="#/media">Media</CDropdownItem>
+          <CDropdownItem href="#/menu">Menu</CDropdownItem>
+          <CDropdownItem href="#/bread">Bread</CDropdownItem>
+        </CDropdown>
       </CHeaderNavItem>
     </CHeaderNav>
     <CHeaderNav class="mr-4">