Hi,

I am trying to create a nav menu using the kendo Menu Component. My requirement is to make this nav menu similar to the dashkit nav menu. There are two major problems that I am currently facing

1. Show Active navs [showing the active url]
2. Make this NavMenu work in both web and mobile versions.

Problem with Making Responsive: In the web version, if we hover on a nav item that has children in the nav menu, it opens a submenu on the right side of that nav item. In the Mobile version, if we click on a nav item that has children, it opens a submenu on the right side same as the web version, but the submenu is outside of the viewable frame.

Showing Active navs: I looked for this in the forum, but unfortunately, I didn't find any proper solution for making the kendo menu nav items active.

DashKit Theme Reference: https://dashkit.goodthemes.co/index.html

Customize Setting:

• Color Scheme: Light Mode
• Navigation Position: SideNav
• SideNav Sizing: Icons
• Navigation Color: Default

Sample Vue Project: https://github.com/iamAdarshh/Kendo-Menu-Responsive

Hello,

I've an error regarding Kendo style when I import it into an SCSS file. Let's assume I want to customize Kendo theme, I have 4 scss files :

• _tokens.scss which contains color palette definition
• the kendo scss theme (kendo-theme-bootstrap in this case, but same issue with the default theme)
• _overrides.scss which may contains overrides (typhography, margin/padding on some components, etc)
• and a base.scss file containing basically the import of the 3 preceding files :
  

@import 'tokens';
@import '@progress/kendo-theme-bootstrap/dist/all';
@import 'overrides';

However, when I import my base.scss file into the Vue App (whether in the main.js or the App.vue), I've this error :

Plugin: vite:css
  File: /src/node_modules/@progress/kendo-theme-bootstrap/dist/all.scss:37542:173
  Error: expected ";".
        ╷
  37542 │             background-image: url('../../node_modules/@progress/kendo-theme-bootstrap/dist/k-map-get($_kendo-data-uris, $kendo-spreadsheet-insert-image-dialog-preview-img'));
        │                                                                                                                                                                             ^
        ╵
    node_modules/@progress/kendo-theme-bootstrap/dist/all.scss 37542:173  @import
    src/assets/kendo.scss 2:9                                             @import
    src/assets/base.scss 1:9                                              root stylesheet

If I import directly the kendo-theme-bootstrap scss file in the main.js or the App.vue, there is no error. Here is the StackBlitz reproducing the error:

https://stackblitz.com/edit/vitejs-vite-f63fqh

How can I resolve this ?

Best Regards,

Fabien / SYSCO