comand-component-library 3.3.1 → 3.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.95",
+    "comand-frontend-framework": "^3.2.97",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "sass": "^1.54.9",

package/src/App.vue

@@ -793,18 +793,21 @@
             <a id="section-boxes"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Boxes</h2>
-                <h3>Boxes in BoxWrapper with Flexbox</h3>
-                <CmdBoxWrapper :useFlexbox="true">
-                    <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 5}" />
+                <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}" >
+                    <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}" />
                 </CmdBoxWrapper>
-                <h3>Content boxes</h3>
-                <div class="grid-container-create-columns">
-                    <div class="grid-small-item">
+                <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
+                        <CmdBox
+                            :stretch-vertically="false"
+                            :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
+                            textBody="This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines'"
+                            :cutoff-text-lines="3"
+                        />
                         <CmdBox :useSlots="['header', 'body', 'footer']">
                             <template v-slot:header>
-                                <h3>
-                                    Headline for box
-                                </h3>
+                                <h4>
+                                    Texts given by slots
+                                </h4>
                             </template>
                             <template v-slot:body>
                                 <div class="padding">
@@ -812,7 +815,7 @@
                                         This content with paragraphs inside is placed inside the box-body.
                                     </p>
                                     <p>
-                                        <strong>Header, Content and Footer of this box are given by slots.</strong>
+                                        <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
                                     </p>
                                 </div>
                             </template>
@@ -822,13 +825,11 @@
                                 </p>
                             </template>
                         </CmdBox>
-                    </div>
-                    <div class="grid-small-item">
-                        <CmdBox>
+                        <CmdBox :useSlots="['header', 'body']">
                             <template v-slot:header>
-                                <h3>
+                                <h4>
                                     Box with links
-                                </h3>
+                                </h4>
                             </template>
                             <template v-slot:body>
                                 <ul class="navigation">
@@ -838,31 +839,28 @@
                                     <li><a href="#" @click.prevent="">Link name 4</a></li>
                                 </ul>
                             </template>
+                            <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
                             <template v-slot:footer>
                                 <p>
                                     footer content
                                 </p>
                             </template>
                         </CmdBox>
-                    </div>
-                    <div class="grid-small-item">
-                        <CmdBox :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
+                        <CmdBox :useSlots="['header', 'body']" :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
                             <template v-slot:header>
-                                <h3>
+                                <h4>
                                     Collapsible box with image
-                                </h3>
+                                </h4>
                             </template>
                             <template v-slot:body>
-                                <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
+                                <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text" />
                             </template>
                         </CmdBox>
-                    </div>
-                    <div class="grid-small-item">
-                        <CmdBox>
+                        <CmdBox :useSlots="['header', 'body', 'footer']">
                             <template v-slot:header>
-                                <h3>
+                                <h4>
                                     Box with image and content
-                                </h3>
+                                </h4>
                             </template>
                             <template v-slot:body>
                                 <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
@@ -877,8 +875,7 @@
                                 </p>
                             </template>
                         </CmdBox>
-                    </div>
-                </div>
+                </CmdBoxWrapper>
                 <h3>Product boxes</h3>
                 <div class="grid-container-create-columns">
                     <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">

package/src/components/CmdAddressData.vue

@@ -10,7 +10,10 @@
             <dl v-if="showLabels">
                 <!-- begin company -->
                 <dt v-if="addressData.company?.value">
-                    <span v-if="addressData.company.iconClass && showLabelIcons" :class="addressData.company.iconClass" :title="getMessage('cmdaddressdata.labeltext.company')"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="addressData.company.iconClass && showLabelIcons" :iconClass="addressData.company.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.company')" />
+                    <!-- end CmdIcon -->
+
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.company')}}</span>
                 </dt>
                 <dd  v-if="addressData.company?.value" class="org">{{ addressData.company.value }}</dd>
@@ -19,7 +22,10 @@
                 <!-- begin address -->
                 <template v-if="addressData.address && addressData.address !== undefined">
                     <dt class="address">
-                        <span v-if="addressData.address.iconClass && showLabelIcons" :class="addressData.address.iconClass" :title="getMessage('cmdaddressdata.labeltext.address')"></span>
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="addressData.address.iconClass && showLabelIcons" :iconClass="addressData.address.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.address')" />
+                        <!-- end CmdIcon -->
+
                         <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
                     </dt>
                     <dd v-if="addressData.address">
@@ -43,7 +49,10 @@
 
                 <!-- begin telephone -->
                 <dt v-if="addressData.telephone?.value">
-                    <span v-if="addressData.telephone.iconClass && showLabelIcons" :class="addressData.telephone.iconClass" :title="getMessage('cmdaddressdata.labeltext.telephone')"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="addressData.telephone.iconClass && showLabelIcons" :iconClass="addressData.telephone.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.telephone')" />
+                    <!-- end CmdIcon -->
+
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.telephone')}}</span>
                 </dt>
                 <dd v-if="addressData.telephone?.value">
@@ -53,7 +62,10 @@
 
                 <!-- begin mobile phone -->
                 <dt v-if="addressData.mobilephone?.value">
-                    <span v-if="addressData.mobilephone.iconClass && showLabelIcons" :class="addressData.mobilephone.iconClass" :title="getMessage('cmdaddressdata.labeltext.mobile_phone')"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="addressData.mobilephone.iconClass && showLabelIcons" :iconClass="addressData.mobilephone.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.mobile_phone')" />
+                    <!-- end CmdIcon -->
+
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.mobile_phone')}}</span>
                 </dt>
                 <dd v-if="addressData.mobilephone?.value">
@@ -63,7 +75,10 @@
 
                 <!-- begin fax -->
                 <dt v-if="addressData.fax?.value">
-                    <span v-if="addressData.fax.iconClass && showLabelIcons" :class="addressData.fax.iconClass" :title="getMessage('cmdaddressdata.labeltext.fax')"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="addressData.fax.iconClass && showLabelIcons" :iconClass="addressData.fax.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.fax')" />
+                    <!-- end CmdIcon -->
+
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.fax')}}</span>
                 </dt>
                 <dd v-if="addressData.fax?.value" class="fax">{{ addressData.fax.value  }}</dd>
@@ -71,7 +86,10 @@
 
                 <!-- begin email -->
                 <dt v-if="addressData.email?.value">
-                    <span v-if="addressData.email.iconClass && showLabelIcons" :class="addressData.email.iconClass" :title="getMessage('cmdaddressdata.labeltext.email')"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="addressData.email.iconClass && showLabelIcons" :iconClass="addressData.email.iconClass" :tooltip="getMessage('cmdaddressdata.labeltext.email')" />
+                    <!-- end CmdIcon -->
+
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.email')}}</span>
                 </dt>
                 <dd class="email" v-if="addressData.email?.value">
@@ -125,12 +143,14 @@ import DefaultMessageProperties from "../mixins/CmdAddressData/DefaultMessagePro
 
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdAddressData",
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdHeadline
+        CmdHeadline,
+        CmdIcon
     },
     props: {
         /**

package/src/components/CmdBackToTopButton.vue

@@ -1,14 +1,24 @@
 <template>
     <!-- begin cmd-back-to-top-button -->
     <transition name="fade">
-        <a v-if="show" :class="iconBackToTop.iconClass" class="cmd-back-to-top-button" href="#" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop"></a>
+        <a v-if="show" class="cmd-back-to-top-button" href="#" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
+            <!-- begin CmdIcon -->
+            <CmdIcon :iconClass="iconBackToTop.iconClass" />
+            <!-- end CmdIcon -->
+        </a>
     </transition>
     <!-- end cmd-back-to-top-button -->
 </template>
 
 <script>
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdBackToTopButton",
+    components: {
+        CmdIcon
+    },
     data() {
         return {
             windowInnerHeight: window.innerHeight,

package/src/components/CmdBankAccountData.vue

@@ -11,7 +11,9 @@
                 <dd v-if="allowCopyByClick && entry.allowCopy">
                     <span>{{ entry.value }}</span>
                     <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
-                        <span :class="iconCopy.iconClass"></span>
+                        <!-- begin CmdIcon -->
+                        <CmdIcon :iconClass="iconCopy.iconClass" />
+                        <!-- end CmdIcon -->
                     </a>
                 </dd>
                 <dd v-else :key="index">{{ entry.value }}</dd>
@@ -28,10 +30,14 @@
 <script>
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdBankAccountData",
-    components: {CmdHeadline},
+    components: {
+        CmdHeadline,
+        CmdIcon
+    },
     props: {
         /**
          * bank account data

package/src/components/CmdBox.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'"
-         :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically && open, 'stretch-horizontally': stretchHorizontally}]">
+         :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically && !collapsible, 'stretch-horizontally': stretchHorizontally}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
             <div v-if="collapsible" class="box-header">
@@ -10,7 +10,9 @@
                 <!-- end slot 'header' -->
 
                 <a href="#" @click.prevent="toggleContentVisibility" :title="open ? iconOpen.tooltip : iconClosed.tooltip" class="toggle-icon">
-                    <span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]"></CmdIcon>
+                    <!-- end CmdIcon -->
                 </a>
             </div>
             <!-- end collapsible header with slot -->
@@ -32,7 +34,10 @@
                     v-bind="cmdHeadline"
                 />
                 <!-- end CmdHeadline -->
-                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+
+                <!-- begin CmdIcon -->
+                <CmdIcon class="toggle-icon" :iconClass="[open ? iconOpen.iconClass : iconClosed.iconClass]"></CmdIcon>
+                <!-- end CmdIcon -->
             </a>
             <!-- end header for collapsible -->
 
@@ -50,7 +55,9 @@
             <!-- begin slot 'body' -->
             <slot name="body">
                 <transition :name="toggleTransition">
-                    <p class="padding">{{ textBody }}</p>
+                    <div class="padding">
+                        <p :class="{'cutoff-text': cutoffTextLines > 0, 'fade-last-line': fadeLastLine }">{{ textBody }}</p>
+                    </div>
                 </transition>
             </slot>
             <!-- end slot 'body' -->
@@ -125,12 +132,14 @@ import GlobalCurrency from "../mixins/GlobalCurrency"
 
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 import CmdListOfLinks from "./CmdListOfLinks"
 
 export default {
     name: "CmdBox",
     components: {
         CmdHeadline,
+        CmdIcon,
         CmdListOfLinks,
     },
     mixins: [
@@ -167,6 +176,22 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * number of lines to show if text should be cutoff
+         */
+        cutoffTextLines: {
+            type: Number,
+            default: 0
+        },
+        /**
+         * show fade-effect on last line
+         *
+         * cutoffTextLines-property must be large 0
+         */
+        fadeLastLine: {
+            type: Boolean,
+            default: true
+        },
         /**
          * use transition to expand and collapse box-body
          *
@@ -307,6 +332,7 @@ export default {
     display: inline-flex;
     flex-direction: column;
     padding: 0;
+    align-self: start;
 
     &.stretch-horizontally {
         display: flex;
@@ -343,7 +369,7 @@ export default {
     // boyType === 'content'
     &.content {
         > * {
-            > *:last-child {
+            *:last-child {
                 margin-bottom: 0;
             }
         }
@@ -376,6 +402,21 @@ export default {
             flex-grow: 1;
             padding: 0;
 
+            p.cutoff-text {
+                overflow: hidden;
+                height: calc(var(--line-of-text-height) * v-bind(cutoffTextLines));
+
+                &.fade-last-line::after {
+                    content: "";
+                    width: 100%;
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    height: var(--line-of-text-height);
+                    background: linear-gradient(to bottom, transparent 0%, var(--default-background-color) 90%);
+                }
+            }
+
             .padding {
                 padding: var(--default-padding);
                 margin: 0;

package/src/components/CmdBoxWrapper.vue

@@ -1,22 +1,36 @@
 <template>
     <div class="cmd-box-wrapper">
-        <div v-if="allowUserToToggleView || allowTogglingCollapsingBoxes" class="flex-container no-flex toggle-view">
-            <a v-if="allowTogglingCollapsingBoxes" href="#" @click.prevent="toggleCollapsingBoxes" :title="collapsingBoxesOpen ? collapseBoxesIcon.tooltip : expandBoxesIcon.tooltip">
-                <span :class="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass"></span>
-            </a>
-            <a v-if="allowUserToToggleView" href="#" @click.prevent="oneBoxPerRow = !oneBoxPerRow" :title="oneBoxPerRow ? iconRowView.tooltip : iconGridView.tooltip">
-                <span :class="oneBoxPerRow ? iconGridView.iconClass : iconRowView.iconClass"></span>
-            </a>
+        <div class="flex-container no-flex headline-wrapper">
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
+            <!-- end CmdHeadline -->
+
+            <div v-if="allowUserToToggleOrientation || allowTogglingCollapsingBoxes" class="options-wrapper">
+                <a v-if="allowTogglingCollapsingBoxes" href="#" @click.prevent="toggleCollapsingBoxes" :title="collapsingBoxesOpen ? collapseBoxesIcon.tooltip : expandBoxesIcon.tooltip">
+                    <CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass"/>
+                </a>
+                <a v-if="allowUserToToggleOrientation" href="#" @click.prevent="oneBoxPerRow = !oneBoxPerRow" :title="oneBoxPerRow ? iconRowView.tooltip : iconGridView.tooltip">
+                    <CmdIcon :iconClass="oneBoxPerRow ? iconGridView.iconClass : iconRowView.iconClass"/>
+                </a>
+            </div>
         </div>
-        <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'one-box-per-row': oneBoxPerRow}]">
+        <div :class="[useFlexbox ? 'flex-container' : 'grid-container-create-columns', {'one-box-per-row': oneBoxPerRow, 'stretch-boxes-vertically': stretchBoxesVertically}]">
             <slot :collapsingBoxesOpen="collapsingBoxesOpen" :boxToggled="boxToggled" :currentOpenBox="currentOpenBox"></slot>
         </div>
     </div>
 </template>
 
 <script>
+// import components
+import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdBoxWrapper",
+    components: {
+        CmdHeadline,
+        CmdIcon
+    },
     data() {
         return {
             oneBoxPerRow: this.useRowViewAsDefault,
@@ -33,9 +47,18 @@ export default {
             default: false
         },
         /**
-         * activate if user can toggle grid- and row-view by himself
+         * stretch boxes inside vertically to same height
+         *
+         * will not take effect on collapsable boxes
+         */
+        stretchBoxesVertically: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * activate if user can toggle grid- and row-orientation by himself
          */
-        allowUserToToggleView: {
+        allowUserToToggleOrientation: {
             type: Boolean,
             default: true
         },
@@ -79,6 +102,9 @@ export default {
         },
         /**
          * define the number of boxes per row (if view is grid-view)
+         *
+         * useFlexbox-property must be set to true
+         * slot may not be used
          */
         boxesPerRow: {
             type: [Number, Array],
@@ -103,12 +129,24 @@ export default {
          */
         iconRowView: {
             type: Object,
-            default () {
+            default() {
                 return {
                     iconClass: 'icon-rows',
                     tooltip: 'Toggle to grid view'
                 }
             }
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            default() {
+                return {
+                    headlineText: "",
+                    headlineLevel: 4
+                }
+            }
         }
     },
     computed: {
@@ -167,19 +205,41 @@ export default {
 @import '../assets/styles/variables';
 
 .cmd-box-wrapper {
-    > .toggle-view {
-        justify-content: flex-end;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--default-gap) / 2);
+
+    &:not(:first-child) {
+        margin-top: calc(var(--default-margin) * 2);
+    }
+
+    > .headline-wrapper {
+        align-items: center;
+        justify-content: space-between;
     }
 
     > .flex-container {
         .cmd-headline {
-            > * {
-                white-space: nowrap;
-            }
+                margin: 0;
         }
 
         &.one-box-per-row {
             flex-direction: column;
+
+            p.cutoff-text {
+                height: auto;
+
+                &.fade-last-line::after {
+                    background: none;
+                }
+            }
+        }
+
+        &.stretch-boxes-vertically {
+            .stretch-vertically {
+                align-self: stretch;
+                height: auto; /* must be set to auto if inner boxes have als stretchVertically-property activated */
+            }
         }
     }
 
@@ -187,14 +247,6 @@ export default {
         grid-template-columns: repeat(v-bind(boxesPerRowLarge), minmax(0, 1fr));
     }
 
-    .cmd-box {
-        &.content {
-            &.collapsible {
-                align-self: flex-start;
-            }
-        }
-    }
-
     @media only screen and (max-width: $medium-max-width) {
         > .grid-container-create-columns {
             grid-template-columns: repeat(v-bind(boxesPerRowMedium), minmax(0, 1fr));

package/src/components/CmdHeadline.vue

@@ -1,21 +1,34 @@
 <template>
     <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
-        <span v-if="iconClass" :class="iconClass"></span>
+        <!-- begin CmdIcon -->
+        <CmdIcon v-if="iconClass" :iconClass="iconClass" />
+        <!-- end CmdIcon -->
+
         <div v-if="preHeadlineText">
             <span class="pre-headline-text">{{ preHeadlineText }}</span>
             <component :is="getHeadlineTag">
+                <!-- being slot -->
                 <slot>{{ headlineText }}</slot>
+                <!-- end slot -->
             </component>
         </div>
         <component v-else :is="getHeadlineTag">
+            <!-- being slot -->
             <slot>{{ headlineText }}</slot>
+            <!-- end slot -->
         </component>
     </div>
 </template>
 
 <script>
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdHeadline",
+    components: {
+        CmdIcon
+    },
     props: {
         /**
          * text for headline

package/src/components/CmdMainNavigation.vue

@@ -13,7 +13,7 @@
             <!-- begin main-level -->
             <ul :class="{'stretch-items' : stretchMainItems}">
                 <li class="close-nav" v-if="showOffcanvas">
-                    <a href="#" @click.prevent="showOffcanvas = false">
+                    <a href="#" id="close-offcanvas" role="button" @click.prevent="closeOffcanvasNavigation">
                         <span v-if="closeOffcanvas.iconClass" :class="closeOffcanvas.iconClass"></span>
                         <span :class="{'hidden': !closeOffcanvas.showText}">{{ closeOffcanvas.text }}</span>
                     </a>
@@ -125,8 +125,7 @@
         </nav>
 
         <!-- begin offCanvasButton -->
-        <a href="#" class="button" id="toggle-offcanvas" @click.prevent="showOffcanvas = !showOffcanvas"
-           v-if="persistOnMobile === false">
+        <a v-if="persistOnMobile === false" href="#" class="button" id="toggle-offcanvas" @click.prevent="toggleOffcanvasNavigation">
             <span :class="buttonOffcanvas.iconClass"></span>
             <span :class="{'hidden' : !buttonOffcanvas.showText}">{{ buttonOffcanvas.text }}</span>
         </a>
@@ -264,6 +263,19 @@ export default {
         },
         getRoute(navigationEntry) {
             return getRoute(navigationEntry)
+        },
+        closeOffcanvasNavigation() {
+            this.showOffcanvas = false
+            document.getElementById("toggle-offcanvas").focus()
+        },
+        toggleOffcanvasNavigation() {
+            if (this.showOffcanvas) {
+                this.closeOffcanvasNavigation()
+            } else {
+                // open offcanvas
+                this.showOffcanvas = true
+                this.$nextTick(() => document.getElementById("close-offcanvas").focus())
+            }
         }
     }
 }