Sidebar links not activating properly

[oti215]

Hello everyone!

After freshly unzipping the project, npm install at root failed, because it complains about the package.json not being valid, although I see nothing wrong with its syntax.

I did, however, pass its dependencies to the package.json in the project im working on (laravel) and was able to install all of them normally. Not sure why yours didn't work.

However, the more inconvenient issue is that im receiving an error in /components/UIComponents/SidebarPlugin/Sidebar.vue :

Complaining about an unexpected token, not sure whats going on since the code is fine.

Any ideas what may be causing it ?

[cristijora]

Hello @oti215

Thanks for using our products and for reporting here. First I'd like to ask which version are you using? (1 or 2) A common issue along with zip archives is that people on MAC OS don't have show hidden files enabled by default and therefore when unzipping, don't copy the .babelrc and .eslintrc files which are quite important. Please make sure you have these files in your project.

If that is not the problem, then most likely it's because of a different setup (laravel). Make sure your setup supports dynamic imports import() syntax. Depending on laravel-mix setup or what you have there the configuration might vary.

[oti215]

Hello. I am using version 2. And yes, I'm on a mac. So I set hidden files to show to show and then it allowed me to npm install, thanks!

However, Im not sure how I'm supposed to integrate the theme's dependencies into my own project.

My vue project has subdomains, 2 for now, but it will have 5 in total. So the structure is a little different for the set up of each SPA since they are completely different apps (clients/admin). I ended copying most dependencies into my package.json in my laravel project, except for @vue/cli-service since laravel comes with core-env for building the proyect, I also passed your .babelrc and eslintrc into my root folder. I created a structure which allows me to share UIComponents across both apps and keep their custom components separated and easy to access.

When attempting to build using your .babelrc (which I put into my laravel project) I rand into some errors with the "components" plugin declared in there, I ended up removing the content of .babelrc and added my own preset, and a single plugin which solved the import() error.

So I did solve the initial issue which was the dynamic import not working.

But I ran into another problem (let me know if i should create a new issue with this). Whenever I click on a SideBar menu item with a drop down, I get the following error:

As Im not sure if its an issue with my dependencies, so here's a picture of my package.json:

And my .babelrc:

Maybe that has something to do with the plugins I removed from .babelrc ?

Excuse me if something is not clear! Just ask and i'll be glad to clear it up.

[cristijora]

The problem is that @vue/cli-service comes up with some stuff integrated including babel plugins and all that stuff. If you're starting from scratch now, I'd recommend this for laravel https://github.com/yyx990803/laravel-vue-cli-3 Or you could take a look at this file, https://github.com/yyx990803/laravel-vue-cli-3/blob/master/frontend/vue.config.js and simply copy paste the whole dashboard inside the a frontend folder for example and add the additional changes from here https://github.com/yyx990803/laravel-vue-cli-3/blob/master/frontend/vue.config.js to vue.config.js

Otherwise, you'll have to maintain laravel mix configs and babel plugins. Regarding the sidebar error, I'm almost sure it's not really related to the dashboard because the Sidebar has not jquery dependency whatsoever. The only place where jquery is used, is the full calendar and the vector maps which are isolated in vue components. Must be something else there that is causing the problem.

Let me know if that helps.

[oti215]

I managed to set up my multi page app with vue-cli 3 for building and deploying my apps and assets, straying away from laravel's default way, just to try this out.

as from the /node_modules/jquery package and since I'm not using it I just removed it and it solved that issue.

Im still getting awkward behavior with my sidebar though:

It wont deactivate menu items once i click a different one. Let me know if theres some code you'd like to see.

[cristijora]

Hey @oti215 can you share the code for declaring those sidebar items and also the routes from routes.js for these 2 routes. From, what I see the problem is that both routes are considered as active because they are children. You can try changing linkActiveClass: 'active' to linkExactActiveClass: 'active' in main.js and see if that works for you

[oti215]

Hello, I tried setting linkExactActiveClass: 'active' to no avail.

The menu items are in fact children of the same dropdown item.

sidebarLinks.js: ![image](https://user-images.githubusercontent.com/10524374/44553172-a9774180-a6fa-11e8-8722-64a3323e2876.png

[oti215]

@cristijora @timcreative please assist ?

[oti215]

Problem was in sidebarlinks.js the path must be the full path you want to active :T 🤦‍♂️