docs: update theme

Author: mrholek

docs/.vuepress/config.ts

@@ -242,6 +242,15 @@ export default defineUserConfig<DefaultThemeOptions>({
             text: 'Pagination',
             link: `/${pkg.config.version_short}/components/pagination.html`,
           },
+          {
+            text: 'Placeholders',
+            link: `/${pkg.config.version_short}/components/placeholders.html`,
+            disabled: true,
+            badge: {
+              color: 'warning',
+              text: 'WIP v4.1',
+            }
+          },
           {
             text: 'Popover',
             link: `/${pkg.config.version_short}/components/popover.html`,

docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts

@@ -4,7 +4,7 @@ import { RouterLink, useRoute } from 'vue-router'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import type { ResolvedSidebarItem } from '../../shared'
 
-import { CNavGroup, CNavItem, CSidebarNav } from './../../../../../../src'
+import { CBadge, CNavGroup, CNavItem, CSidebarNav } from './../../../../../../src'
 import { CIcon } from '@coreui/icons-vue'
 
 const normalizePath = (path: string): string =>
@@ -76,20 +76,28 @@ const renderItem = (item: ResolvedSidebarItem): VNode => {
           CNavItem,
           {
             active: props.isActive,
+            disabled: item.disabled,
             href: item.link,
           },
           {
-            default: () => item.text,
+            default: () => [
+              item.text,
+              item.badge &&
+                h(
+                  CBadge,
+                  {
+                    class: 'ms-auto',
+                    color: item.badge.color,
+                  },
+                  item.badge.text,
+                ),
+            ],
           },
         ),
     },
   )
 }
 
-// export default defineComponent({
-
-// })
-
 export const SidebarNav = ({ items }) => {
   return h(
     CSidebarNav,

docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue

@@ -96,18 +96,6 @@ export default defineComponent({
       frontmatter.value.pageClass,
     ])
 
-    // close sidebar after navigation
-    let unregisterRouterHook
-    onMounted(() => {
-      const router = useRouter()
-      unregisterRouterHook = router.afterEach(() => {
-        toggleSidebar(false)
-      })
-    })
-    onUnmounted(() => {
-      unregisterRouterHook()
-    })
-
     // handle scrollBehavior with transition
     const scrollPromise = useScrollPromise()
     const onBeforeEnter = scrollPromise.resolve

docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss

@@ -1,10 +1,11 @@
 .docs-sidebar {
   --cui-sidebar-bg: #f0f4f7;
   --cui-sidebar-brand-bg: transparent;
-  --cui-sidebar-brand-color: rgba(44, 56, 74, 0.95);
-  --cui-sidebar-nav-link-color: rgba(44, 56, 74, 0.95);
+  --cui-sidebar-brand-color: rgba(44,56,74,0.87);
+  --cui-sidebar-nav-link-color: rgba(44,56,74,0.87);
   --cui-sidebar-nav-link-active-color: #321fdb;
   --cui-sidebar-nav-link-hover-color: #321fdb;
   --cui-sidebar-nav-group-bg: transparent;
   --cui-sidebar-nav-group-toggle-show-color: #321fdb;
+  --cui-sidebar-nav-link-disabled-color: #{$text-disabled};
 }

docs/.vuepress/theme-coreui/src/shared/nav.ts

@@ -1,7 +1,15 @@
 /**
  * Base nav item, displayed as text
  */
+
+type Badge = {
+  color: string,
+  text: string
+}
 export interface NavItem {
+  badge?: Badge
+  disabled?: boolean
+  icon?: string
   text: string
   ariaLabel?: string
 }