Light
Dark
System
Ask  Question

Re-creating Aside on Demo 7 HTML in Demo7 Vue

Hi. may i know how to make secondary automatically open whenever i click primary pane? i need to click arrow at bottom to active secondary pane. please fix it.
user
Hassan Basri 4 months ago
Vue
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author4 months ago
Hi Hassan,

We will check this and we will try to include a fix in the next release. If you want to enable the secondary panel when you click on the primary panel you can use the functions below for that.

const enableSecondarySidebar = () => {
 document.body.setAttribute("data-kt-aside-minimize", "on");
};

const disableSecondarySidebar = () => {
 document.body.removeAttribute("data-kt-aside-minimize");
};



Then in src/layouts/main-layout/aside/AsidePrimary.vue add click event listener on the root element.

<div
 @click="enableSecondarySidebar()"
 class="aside-primary d-flex flex-column align-items-lg-center flex-row-auto"
>
...
</div>



Regards,
Lauris Stepanovs,
Keenthemes Support Team
user
Hassan Basri 4 months ago
temporary i make like this on script. just small bug at arrow to make it rotate left to right
const sidebarOpen = ref(true)


const enableSecondarySidebar = () => {
 document.body.removeAttribute("data-kt-aside-minimize");
 }

 const disableSecondarySidebar = () => {
 document.body.setAttribute("data-kt-aside-minimize", "on");
 }

 const toggleSecondarySidebar = () => {
 if (sidebarOpen.value) {
 disableSecondarySidebar();
 } else {
 enableSecondarySidebar();
 }
 sidebarOpen.value = !sidebarOpen.value
 }

user
Lauris Stepanovs Author4 months ago
Hi,

You can toggle the arrow state by adding and removing active class to this button.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle