Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


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



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
}



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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(