feat(responsive): menubar responsive for small devices

devtobi · Jun 24, 2024 · 70b65bc · 70b65bc
1 parent 3ae1681
commit 70b65bc
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 19 deletions.
diff --git a/packages/cv-wrapper/src/components/CvLanguageSelectDropdown.vue b/packages/cv-wrapper/src/components/CvLanguageSelectDropdown.vue
@@ -15,7 +15,7 @@
         <span
           class="mr-2 fi"
           :class="`fi-${getFlag(slotProps.value)}`"
-        ></span>
+        />
         <div>{{ getDisplayName(slotProps.value) }}</div>
       </div>
       <span v-else>

diff --git a/packages/cv-wrapper/src/components/CvMenubar.vue b/packages/cv-wrapper/src/components/CvMenubar.vue
@@ -1,23 +1,23 @@
 <template>
   <menubar
     :model="menuLinksLocalized"
-    class="px-3"
+    class="pr-3 md:pr-0 md:px-3 flex flex-row justify-content-between align-items-center"
     role="navigation"
+    :pt="passThroughOptions"
+    :breakpoints="breakpointsPrimeFlex.lg"
   >
     <template #start>
-      <div class="flex flex-row justify-content-center mr-8">
-        <avatar
-          :image="profilePicture"
-          size="large"
-          shape="circle"
-          role="img"
-          :aria-label="t('CvMenubar.profilePictureAltText', { authorName })"
-          class="mr-3"
-        />
-        <p>
-          {{ t('CvMenubar.title', { authorName }) }}
-        </p>
-      </div>
+      <Avatar
+        :image="profilePicture"
+        size="large"
+        shape="circle"
+        role="img"
+        :aria-label="t('CvMenubar.profilePictureAltText', { authorName })"
+        class="mr-3"
+      />
+      <p>
+        {{ label }}
+      </p>
     </template>
     <template #item="{ item, props }">
       <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
@@ -37,14 +37,17 @@
     </template>
     <template #end>
       <cv-pdf-download-button class="mr-3" />
-      <cv-language-selector class="mr-3" />
+      <cv-language-selector class="hidden lg:flex mr-3" />
       <cv-appearance-toggle-button class="mr-3" />
       <cv-information-dialog-button />
     </template>
   </menubar>
 </template>
 
 <script lang="ts" setup>
+  import { breakpointsPrimeFlex, useBreakpoints } from '@vueuse/core';
+  import { MenubarPassThroughOptions } from 'primevue/menubar';
+  import { PassThrough } from 'primevue/ts-helpers';
   import { computed } from 'vue';
   import { useI18n } from 'vue-i18n';
 
@@ -56,6 +59,28 @@
   import { authorName } from '@/config/constants';
   import menuLinks from '@/helpers/menuLinks';
 
+  const breakpoints = useBreakpoints(breakpointsPrimeFlex);
+  const isMobile = breakpoints.smaller('sm');
+
+  const label = computed(() =>
+    isMobile.value
+      ? t('CvMenubar.titleShort')
+      : t('CvMenubar.title', { authorName }),
+  );
+
+  const passThroughOptions: PassThrough<MenubarPassThroughOptions> = {
+    start: {
+      class:
+        'flex flex-row justify-content-center align-items-center md:mr-8 flex-order-0',
+    },
+    end: {
+      class: 'flex-order mr-3 lg:mr-0',
+    },
+    button: {
+      class: 'flex-order-2',
+    },
+  };
+
   const { t } = useI18n();
 
   const menuLinksLocalized = computed<MenuItem[]>(() => {

diff --git a/packages/cv-wrapper/src/components/CvPdfDownloadButton.vue b/packages/cv-wrapper/src/components/CvPdfDownloadButton.vue
@@ -1,23 +1,37 @@
 <template>
   <Button
-    :label="t('CvPdfDownloadButton.label')"
+    :label="label"
+    :aria-label="ariaLabel"
+    v-tooltip.bottom="toolTip"
     :icon="PrimeIcons.FILE_PDF"
     severity="danger"
     @click="downloadPdf"
   />
 </template>
 
 <script setup lang="ts">
+  import { breakpointsPrimeFlex, useBreakpoints } from '@vueuse/core';
   import { PrimeIcons } from 'primevue/api';
   import { computed } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { useSelectedLanguage } from '@/composables/useSelectedLanguage';
+  import { useThemedTooltip } from '@/composables/useThemedTooltip';
   import { authorName, pdfFilename } from '@/config/constants';
 
   const { t } = useI18n();
   const { selectedLanguage } = useSelectedLanguage();
 
+  const breakpoints = useBreakpoints(breakpointsPrimeFlex);
+
+  const ariaLabel = computed(() => t('CvPdfDownloadButton.label'));
+  const tooltipObject = useThemedTooltip(ariaLabel, 'Bottom');
+
+  const isMobile = breakpoints.smaller('md');
+  const label = computed(() => (isMobile.value ? '' : ariaLabel.value));
+
+  const toolTip = computed(() => (isMobile.value ? tooltipObject.value : null));
+
   const downloadUrl = computed(
     () => `./${selectedLanguage.value}/${pdfFilename}`,
   );

diff --git a/packages/cv-wrapper/src/locales/de.json b/packages/cv-wrapper/src/locales/de.json
@@ -18,6 +18,7 @@
   "CvMenubar": {
     "profilePictureAltText": "Profilbild von {authorName}",
     "newFeaturesSoon": "Neue Funktionen werden bald hinzugefügt!",
+    "titleShort": "CV",
     "title": "{authorName} - Lebenslauf",
     "links": {
       "website": {
@@ -45,7 +46,8 @@
     "githubLink": "Auf GitHub ansehen",
     "footerText1": "Entwickelt mit",
     "footerText2": "und Vue.js",
-    "footerLoveAria": "Liebe"
+    "footerLoveAria": "Liebe",
+    "tooltip": "App-Informationen und Einstellungen"
   },
   "CvDependencyDataTable": {
     "columnNames": {

diff --git a/packages/cv-wrapper/src/locales/en.json b/packages/cv-wrapper/src/locales/en.json
@@ -18,6 +18,7 @@
   "CvMenubar": {
     "profilePictureAltText": "Profile picture of {authorName}",
     "newFeaturesSoon": "New features will be added soon!",
+    "titleShort": "CV",
     "title": "{authorName} - Curriculum Vitae",
     "links": {
       "website": {
@@ -45,7 +46,8 @@
     "githubLink": "View on GitHub",
     "footerText1": "Developed with",
     "footerText2": "using Vue.js",
-    "footerLoveAria": "love"
+    "footerLoveAria": "love",
+    "tooltip": "App information and settings"
   },
   "CvDependencyDataTable": {
     "columnNames": {