Refactored code

src/resources/js/features/bottom-navigation/navigation-link/NavigationLink.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+
+type Props = {
+    url: string;
+    text: string;
+};
+
+defineProps<Props>();
+</script>
+
+<template>
+    <Link
+        :href="url"
+        class="inline-flex flex-col items-center justify-center px-5 border-gray-400 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600"
+    >
+        <slot />
+
+        <span
+            class="text-sm text-gray-500 dark:text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-red-500"
+        >
+            {{ text }}
+        </span>
+    </Link>
+</template>
+
+<style scoped></style>

src/resources/js/features/bottom-navigation/navigation-link/index.ts

@@ -0,0 +1 @@
+export { default as NavigationLink } from './NavigationLink.vue';

src/resources/js/features/dashboard/anime-carousel/AnimeCarousel.vue

@@ -2,7 +2,7 @@
 import Carousel from 'primevue/carousel';
 import { Link } from '@inertiajs/vue3';
 import { reactive, ref } from 'vue';
-import LeftBorderedHeader from '@/shared/ui/header/LeftBorderedHeader.vue';
+import { SectionTitle } from '@/shared/ui/section-title';
 import { Models } from '@/types';
 
 type Props = {
@@ -47,7 +47,7 @@ const responsiveOptions = ref([
 
 <template>
     <div>
-        <LeftBorderedHeader title="Recently added anime" />
+        <SectionTitle title="Recently added anime" />
 
         <Carousel
             :value="data"

src/resources/js/features/navigation/navigation-link/index.ts

@@ -1,2 +1 @@
-export * from './regular';
-export * from './responsive';
+export { default as NavigationLink } from './NavigationLink.vue';

src/resources/js/features/navigation/search/index.ts

@@ -1 +1 @@
-export * from './ui';
+export { default as SearchInput } from './SearchInput.vue';

src/resources/js/features/profile/logout/Logout.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+</script>
+
+<template>
+    <Link
+        class="inline-flex items-center border font-semibold px-4 py-2 text-xs uppercase tracking-widest bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 disabled:opacity-25 focus:outline-none focus:ring-2 focus:ring-offset-2 transition ease-in-out duration-150"
+        :href="route('logout')"
+        method="post"
+        as="button"
+    >
+        Logout
+    </Link>
+</template>
+
+<style scoped></style>

src/resources/js/features/profile/logout/index.ts

@@ -0,0 +1 @@
+export { default as Logout } from './Logout.vue';

src/resources/js/features/telegram/login-widget/ui/TelegramLoginWidget.test.ts → src/resources/js/features/telegram/login-widget/TelegramLoginWidget.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it, vitest } from 'vitest';
 import TelegramLoginWidget from './TelegramLoginWidget.vue';
-import { RequestAccess, WidgetSize } from '@/features/telegram/login-widget/types';
+import { RequestAccess, WidgetSize } from './types';
 
 describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {
     it('Renders correctly', async () => {

src/resources/js/features/telegram/login-widget/index.ts

@@ -1 +1 @@
-export * from './ui';
+export { default as TelegramLoginWidget } from './TelegramLoginWidget.vue';

src/resources/js/features/theme-switcher/index.ts

@@ -1 +1 @@
-export * from './ui';
+export { default as ThemeSwitcher } from './ThemeSwitcher.vue';

src/resources/js/pages/Profile/Edit.vue

@@ -7,6 +7,7 @@ import {
 } from '@/features/profile/update-profile';
 import { IntegrationList } from '@/features/profile/integration-list';
 import { DeleteUserForm } from '@/features/profile/delete-user';
+import { Logout } from '@/features/profile/logout';
 
 defineProps<{
     mustVerifyEmail?: boolean;
@@ -47,6 +48,10 @@ defineProps<{
                 <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                     <DeleteUserForm class="max-w-xl" />
                 </div>
+
+                <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                    <Logout />
+                </div>
             </div>
         </div>
     </AuthenticatedLayout>

src/resources/js/shared/ui/section-title/index.ts

@@ -0,0 +1 @@
+export { default as SectionTitle } from './SectionTitle.vue';

src/resources/js/widgets/bottom-navigation/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/resources/js/widgets/bottom-navigation/ui/BottomNavigation.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { NavigationLink } from '@/features/bottom-navigation/navigation-link';
+</script>
+
+<template>
+    <nav
+        class="fixed sm:hidden bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-300 dark:bg-gray-800 dark:border-gray-600"
+    >
+        <div class="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">
+            <NavigationLink text="Home" :url="route('dashboard')">
+                <svg
+                    class="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-red-500"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                >
+                    <path
+                        d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+                    />
+                </svg>
+            </NavigationLink>
+
+            <NavigationLink text="Anime" :url="route('anime.index')">
+                <svg
+                    class="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-red-500"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                >
+                    <path
+                        d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"
+                    />
+                </svg>
+            </NavigationLink>
+
+            <NavigationLink
+                v-if="hasRole('owner')"
+                text="Invitation"
+                :url="route('invitation.create')"
+            >
+                <svg
+                    class="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-red-500"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                >
+                    <path
+                        d="M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3.546l3.2 3.659a1 1 0 0 0 1.506 0L13.454 14H18a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-8 10H5a1 1 0 0 1 0-2h5a1 1 0 1 1 0 2Zm5-4H5a1 1 0 0 1 0-2h10a1 1 0 1 1 0 2Z"
+                    />
+                </svg>
+            </NavigationLink>
+
+            <NavigationLink text="Profile" :url="route('profile.edit')">
+                <svg
+                    class="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-red-500"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                >
+                    <path
+                        d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
+                    />
+                </svg>
+            </NavigationLink>
+        </div>
+    </nav>
+</template>
+
+<style scoped></style>

src/resources/js/widgets/bottom-navigation/ui/index.ts

@@ -0,0 +1 @@
+export { default as BottomNavigation } from './BottomNavigation.vue';

src/resources/js/widgets/dashboard/charts/Charts.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import ParsedMonthly from '@/features/dashboard/charts/parsed-monthly-anime/ParsedMonthlyAnime.vue';
-import LeftBorderedHeader from '@/shared/ui/header/LeftBorderedHeader.vue';
-import CountPerDomain from '@/features/dashboard/charts/count-anime-per-domain/CountAnimePerDomain.vue';
+import { CountAnimePerDomain, ParsedMonthlyAnime } from '@/features/dashboard/charts';
+import { SectionTitle } from '@/shared/ui/section-title';
 </script>
 
 <template>
     <div class="mb-10 md:h-96">
-        <LeftBorderedHeader title="Charts" />
+        <SectionTitle title="Charts" />
 
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-5">
-            <ParsedMonthly />
+            <ParsedMonthlyAnime />
 
-            <CountPerDomain />
+            <CountAnimePerDomain />
         </div>
     </div>
 </template>

src/resources/js/widgets/footer/ui/Footer.vue

@@ -10,7 +10,7 @@ const year = computed(() => {
 
 <template>
     <footer
-        class="mt-auto border-t-2 border-gray-300 dark:border-red-500 bg-white shadow dark:bg-gray-800"
+        class="hidden sm:block mt-auto border-t-2 border-gray-300 dark:border-red-500 bg-white shadow dark:bg-gray-800"
     >
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between"

src/resources/js/widgets/layouts/authenticated/AuthenticatedLayout.test.ts

@@ -4,7 +4,7 @@ import AuthenticatedLayout from './AuthenticatedLayout.vue';
 import { ZiggyVue } from 'ziggy-js/dist/vue.m';
 import { HasRolePlugin } from '@/plugins/user/authorize';
 import { usePage } from '@inertiajs/vue3';
-import { NavLink } from '@/features/navigation/navigation-link';
+import { NavigationLink } from '@/features/navigation/navigation-link';
 import { ZiggyMockConfig } from '@/mocks/ziggy-js';
 
 vi.mock('@inertiajs/vue3', async () => {
@@ -51,7 +51,7 @@ describe('AuthenticatedLayout test (AuthenticatedLayout.vue)', () => {
             },
         });
 
-        const links = layoutWrapper.findAllComponents(NavLink);
+        const links = layoutWrapper.findAllComponents(NavigationLink);
         expect(links.length).toBe(2);
     });
 
@@ -67,7 +67,7 @@ describe('AuthenticatedLayout test (AuthenticatedLayout.vue)', () => {
             },
         });
 
-        const links = layoutWrapper.findAllComponents(NavLink);
+        const links = layoutWrapper.findAllComponents(NavigationLink);
         const invitationLink = links.filter((link) => link.text().match('Invite')).at(0);
 
         expect(links.length).toBe(3);

src/resources/js/widgets/layouts/authenticated/AuthenticatedLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Footer } from '../../footer';
+import { Footer } from '@/widgets/footer';
 import { Navigation } from '@/widgets/navigation';
+import { BottomNavigation } from '@/widgets/bottom-navigation';
 </script>
 
 <template>
@@ -23,6 +24,9 @@ import { Navigation } from '@/widgets/navigation';
 
             <!-- Page Footer -->
             <Footer />
+
+            <!-- Mobile Bottom Navigation -->
+            <BottomNavigation />
         </div>
     </div>
 </template>