Feature/refactor shared util layout

components/Cms/Element/CmsElementImageSlider.vue

@@ -8,7 +8,7 @@ const sliderItems = config.getConfigValue('sliderItems');
 </script>
 
 <template>
-    <LayoutSlider
+    <SharedSlider
         :navigation-arrows="config.getConfigValue('navigationArrows')"
         :navigation-dots="config.getConfigValue('navigationDots')"
         :autoplay="config.getConfigValue('autoSlide') ? config.getConfigValue('autoplayTimeout') : false"
@@ -18,7 +18,7 @@ const sliderItems = config.getConfigValue('sliderItems');
             v-for="(sliderItem, index) in sliderItems"
             :key="index"
         >
-            <LayoutSliderSlide>
+            <SharedSliderSlide>
                 <template v-if="sliderItem.url">
                     <NuxtLink
                         :to="sliderItem.url"
@@ -47,7 +47,7 @@ const sliderItems = config.getConfigValue('sliderItems');
                     "
                     loading="lazy"
                 />
-            </LayoutSliderSlide>
+            </SharedSliderSlide>
         </template>
-    </LayoutSlider>
+    </SharedSlider>
 </template>

components/Cms/Element/CmsElementProductListing.vue

@@ -66,7 +66,7 @@ const changePage = async (page: number) => {
         </template>
     </div>
 
-    <LayoutPagination
+    <UtilityPagination
         :total="getTotal"
         :items-per-page="getLimit"
         :default-page="getCurrentPage"

components/Footer/Footer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const { navigationElements, loadNavigationElements } = useNavigation({ type: 'footer-navigation' });
+const { navigationElements: serviceNavigationElements, loadNavigationElements: loadServiceElements } = useNavigation({
+    type: 'service-navigation',
+});
+
+onMounted(async () => {
+    await loadNavigationElements({ depth: 1 });
+    await loadServiceElements({ depth: 1 });
+});
+</script>
+
+<template>
+    <div class="mt-auto">
+        <footer class="mt-4 bg-gray-light md:mt-10">
+            <div class="container py-5 md:pb-5 md:pt-10">
+                <FooterNavigation :navigation-elements="navigationElements" />
+
+                <LanguageSwitch />
+
+                <!-- footer service navigation -->
+                <FooterServiceNavigation :navigation-elements="serviceNavigationElements" />
+            </div>
+        </footer>
+    </div>
+</template>

components/Footer/FooterNavigation.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+
+defineProps<{
+    navigationElements: Schemas['Category'];
+}>();
+</script>
+
+<template>
+    <div class="grid gap-5 md:flex md:justify-between lg:justify-normal lg:gap-28">
+        <ul
+            v-for="navigationElement in navigationElements"
+            :key="navigationElement.id"
+            class="list-none"
+        >
+            <li class="mb-1 max-w-max">
+                <NavigationLink
+                    :navigation-element="navigationElement"
+                    classes="font-bold"
+                />
+            </li>
+            <li
+                v-for="navigationChild in navigationElement.children"
+                :key="navigationChild.id"
+            >
+                <NavigationLink :navigation-element="navigationChild" />
+            </li>
+        </ul>
+    </div>
+</template>

components/Footer/FooterServiceNavigation.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+
+defineProps<{
+    navigationElements: Schemas['Category'];
+}>();
+</script>
+
+<template>
+    <div class="mt-4 grid gap-1 border-t-2 border-white pt-4 md:flex md:gap-6">
+        <NavigationLink
+            v-for="navigationElement in navigationElements"
+            :key="navigationElement.id"
+            :navigation-element="navigationElement"
+        />
+    </div>
+</template>

components/Layout/Header/LayoutHeader.vue → components/Header/Header.vue

@@ -14,10 +14,10 @@ const { loading } = storeToRefs(customerStore);
                     <!-- mobile menu -->
                     <NavigationSidebar />
 
-                    <LayoutLogo logo-classes="w-36 md:w-40" />
+                    <UtilityLogo logo-classes="w-36 md:w-40" />
                 </div>
 
-                <LayoutHeaderActions />
+                <HeaderActions />
             </div>
         </div>
 

components/Header/HeaderActions.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="flex items-center gap-3.5">
+        <HeaderSearch />
+
+        <HeaderWishlist />
+
+        <HeaderAccount />
+
+        <HeaderCart />
+    </div>
+</template>

components/Layout/Header/LayoutHeaderCart.vue → components/Header/HeaderCart.vue

@@ -21,7 +21,7 @@ const cartItemCount = computed(() => getCartItemsCount(cartItems.value));
         />
     </button>
 
-    <LazyLayoutSidebar
+    <LazySharedSidebar
         v-if="offcanvasCartController.isOpen"
         :controller="offcanvasCartController"
         side="right"
@@ -48,5 +48,5 @@ const cartItemCount = computed(() => getCartItemsCount(cartItems.value));
                 to the cart
             </NuxtLink>
         </template>
-    </LazyLayoutSidebar>
+    </LazySharedSidebar>
 </template>

components/Layout/Header/Search/LayoutHeaderSearch.vue → components/Header/Search/HeaderSearch.vue

@@ -23,7 +23,7 @@ onClickOutside(searchComponent, event => {
 
     <ClientOnly>
         <teleport to="#flyouts">
-            <LayoutHeaderSearchBar
+            <HeaderSearchBar
                 v-if="searchVisible"
                 ref="searchComponent"
                 @close-search="searchVisible = false"

components/Layout/Header/Search/LayoutHeaderSearchBar.vue → components/Header/Search/HeaderSearchBar.vue

@@ -88,7 +88,7 @@ onMounted(() => {
                 :to="getProductRoute(product)"
                 @click="$emit('closeSearch')"
             >
-                <LayoutHeaderSearchSuggestions :product="product" />
+                <HeaderSearchSuggestions :product="product" />
             </NuxtLink>
 
             <div class="bg-gray-light text-center text-sm hover:bg-gray-medium">

components/LanguageSwitch.vue

@@ -19,17 +19,19 @@ const languageOptions = computed(() => entityArrayToOptions<Schemas['language']>
 </script>
 
 <template>
-    <div
-        v-if="languages"
-        class="py-4 md:w-1/5"
-    >
-        <FormKit
-            v-model="languageIdChain"
-            type="select"
-            name="language"
-            prefix-icon="globe"
-            :options="languageOptions"
-            @change="onLanguageChange"
-        />
-    </div>
+    <ClientOnly>
+        <div
+            v-if="languages"
+            class="py-4 md:w-1/5"
+        >
+            <FormKit
+                v-model="languageIdChain"
+                type="select"
+                name="language"
+                prefix-icon="globe"
+                :options="languageOptions"
+                @change="onLanguageChange"
+            />
+        </div>
+    </ClientOnly>
 </template>

components/Navigation/NavigationFlyout.vue

@@ -29,7 +29,6 @@ const selfNotHovered = refDebounced(isOutsideFlyout, 200);
                         :navigation-element="child"
                         classes="text-lg font-bold py-2"
                         active-classes="text-brand-primary"
-                        :as-link="child.type !== 'folder'"
                     />
                     <div class="flex flex-col gap-2">
                         <template v-if="child.childCount > 0">
@@ -39,7 +38,6 @@ const selfNotHovered = refDebounced(isOutsideFlyout, 200);
                                 :navigation-element="subChild"
                                 classes="py-2"
                                 active-classes="text-brand-primary"
-                                :as-link="subChild.type !== 'folder'"
                             />
                         </template>
                     </div>

components/Navigation/NavigationLink.vue

@@ -34,11 +34,13 @@ const isActive = (path: Schemas['SeoUrl'][] | undefined, onlyExactMatch: boolean
 
     return onlyExactMatch ? formattedPath === currentPath : currentPath.includes(formattedPath);
 };
+
+const isFolder = computed(() => props.navigationElement.type !== 'folder');
 </script>
 
 <template>
     <NuxtLink
-        v-if="asLink"
+        v-if="isFolder && asLink"
         :target="isExternalLink || linkNewTab ? '_blank' : ''"
         :rel="isExternalLink || linkNewTab ? 'noopener noreferrer nofollow' : ''"
         :aria-label="getTranslatedProperty(navigationElement, 'name')"

components/Navigation/NavigationMainItem.vue

@@ -23,11 +23,10 @@ const debounced = refDebounced(isOutsideNavItem, 300);
             :class="{
                 'text-brand-primary': !debounced,
             }"
-            :as-link="navigationElement.type !== 'folder'"
         />
     </div>
 
-    <NavigationFlyout
+    <LazyNavigationFlyout
         v-if="navigationElement?.childCount > 0"
         :navigation-element="navigationElement"
         :parent-hovered="!debounced"

components/Navigation/NavigationSidebar.vue

@@ -47,7 +47,7 @@ const lastPreviousItem = computed(() =>
         class="w-4 cursor-pointer md:hidden"
         @click="sideMenuController.open()"
     />
-    <LazyLayoutSidebar
+    <LazySharedSidebar
         v-if="sideMenuController.isOpen"
         :controller="sideMenuController"
     >
@@ -88,5 +88,5 @@ const lastPreviousItem = computed(() =>
                 />
             </div>
         </template>
-    </LazyLayoutSidebar>
+    </LazySharedSidebar>
 </template>

components/Utility/UtilityToastNotifications.vue → components/Notification/NotificationContainer.vue

@@ -4,7 +4,7 @@ const { notifications } = useNotifications();
 
 <template>
     <div class="fixed bottom-10 right-5 z-[2147483647] flex max-h-fit w-96 max-w-[calc(100vw-2.5rem)] flex-col gap-2.5">
-        <UtilityToastNotification
+        <NotificationToast
             v-for="notification in notifications"
             :key="notification.id"
             :notification="notification"

components/Utility/UtilityStaticNotification.vue → components/Notification/NotificationStatic.vue

@@ -16,5 +16,5 @@ const staticNotification: Notification = {
 </script>
 
 <template>
-    <UtilityToastNotification :notification="staticNotification" />
+    <NotificationToast :notification="staticNotification" />
 </template>

components/Product/ProductAvailability.vue

@@ -7,8 +7,8 @@ const props = defineProps<{
 
 const availableStock = props.product.availableStock ?? props.product.deliveryInformation.stock ?? 0;
 const minPurchase = props.product.minPurchase ?? props.product.quantityInformation.minPurchase ?? 0;
-const deliveryTime = props.product.deliveryTime ?? props.product.deliveryInformation.deliveryTime;
-const restockTime = props.product.restockTime ?? props.product.deliveryInformation.restockTime;
+const deliveryTime = props.product?.deliveryTime ?? props.product.deliveryInformation?.deliveryTime;
+const restockTime = props.product?.restockTime ?? props.product.deliveryInformation?.restockTime;
 </script>
 
 <template>

error.vue

@@ -17,9 +17,9 @@ refreshCart();
     <NuxtLoadingIndicator />
     <UtilityLoadingSpinner v-if="loading" />
 
-    <LayoutHeader v-show="!loading" />
+    <Header v-show="!loading" />
 
-    <UtilityToastNotifications />
+    <NotificationContainer />
 
     <main
         v-show="!loading"
@@ -37,5 +37,5 @@ refreshCart();
         </div>
     </main>
 
-    <LayoutFooter v-show="!loading" />
+    <Footer v-show="!loading" />
 </template>