diff --git a/pages/posts/post_004.md b/pages/posts/post_004.md index b7d2860..3cef8a3 100644 --- a/pages/posts/post_004.md +++ b/pages/posts/post_004.md @@ -144,5 +144,5 @@ function onPan({ offset, isFirst, isFinal }) { diff --git a/pages/posts/post_005.md b/pages/posts/post_005.md index 4344e37..50c69ec 100644 --- a/pages/posts/post_005.md +++ b/pages/posts/post_005.md @@ -81,5 +81,5 @@ Use a `div` with `class="row no-wrap items-center"` and inside it place two QSep diff --git a/pages/posts/post_006.md b/pages/posts/post_006.md new file mode 100644 index 0000000..c472635 --- /dev/null +++ b/pages/posts/post_006.md @@ -0,0 +1,125 @@ +--- +title: Mini drawer in Quasar that expands when focused and on mouse over +description: Create slim drawers that expand on focus and on mouse over and stays open while you navigate its menus. +date: 2023-11-24 +tags: [quasar] +outline: deep +--- + + + + + +## Problem description + +You want to free screen estate and use amini/slim drawer, but you want it to expand when it is focused and on mouse over. + +## Solution + +Nothing very complex, you just need: + +- a flag variable for the mini state of the drawer +- a flag variable for when a menu from the drawer is opened. +- only display the mini menu when it should be mini and there is no menu open + +::: code-group +```vue [MyLayout.vue] + + + +``` +::: + +## Demo + +