chore: characters page

apps/website/app/app.vue

@@ -3,6 +3,7 @@
   <main>
     <nuxt-page />
   </main>
+  <MainFooter />
 </template>
 
 <script setup lang="ts"></script>

apps/website/app/components/MainFooter.vue

@@ -0,0 +1,103 @@
+<template>
+  <footer>
+    <ul>
+      <li v-for="link in links" :key="link.url">
+        <NuxtLink :to="link.url" :target="link.isOnNewTab && '_blank'">
+          {{ link.title }}
+        </NuxtLink>
+      </li>
+    </ul>
+
+    <p class="copyright">
+      Создается с ❤️ и трепетом. &copy; 2024 ChatGame
+    </p>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const links = [
+  {
+    title: 'Boosty',
+    url: 'https://boosty.to/hmbanan666',
+    isOnNewTab: true,
+  },
+  {
+    title: 'Discord',
+    url: 'https://discord.gg/B6etUajrGZ',
+    isOnNewTab: true,
+  },
+  {
+    title: 'Twitch',
+    url: 'https://www.twitch.tv/hmbanan666',
+    isOnNewTab: true,
+  },
+  {
+    title: 'Об игре',
+    url: '/about',
+  },
+  {
+    title: 'Купить Монеты',
+    url: '/shop',
+  },
+  {
+    title: 'Оферта',
+    url: '/docs/offer',
+  },
+]
+</script>
+
+<style>
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 1em;
+    margin-top: 4em;
+    margin-bottom: 2em;
+
+    @media (min-width: 480px) {
+      & {
+        padding: 0.5em 0;
+      }
+    }
+  }
+
+  a {
+    font-weight: 600;
+    color: inherit;
+    transition: 0.2s all;
+
+    &:hover {
+      color: var(--green-9);
+      text-decoration: none;
+    }
+  }
+
+  ul {
+    position: relative;
+    padding: 0;
+    margin: 0 0 0.8em;
+    display: flex;
+    gap: 0.75em;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+
+    @media screen and (min-width: 620px) {
+      flex-direction: row;
+      gap: 1.5em;
+    }
+  }
+
+  li {
+    position: relative;
+  }
+
+  .copyright {
+    color: var(--bronze-9);
+    text-align: center;
+    margin-top: 0.5em;
+  }
+</style>

apps/website/app/components/MenuDesktop.vue

@@ -6,11 +6,6 @@
           Главная
         </NuxtLink>
       </li>
-      <li :aria-current="$route.path === `/about` ? 'page' : undefined">
-        <NuxtLink to="/about">
-          About
-        </NuxtLink>
-      </li>
       <li :aria-current="$route.path === `/character` ? 'page' : undefined">
         <NuxtLink to="/character">
           Персонажи
@@ -31,12 +26,11 @@
           Купон
         </NuxtLink>
       </li>
-      <!--
-      {#if profile}
-        <li aria-current={$page.url.pathname === `/${locale}/p/${profile.userName}` ? 'page' : undefined}>
-          <a href='/{locale}/p/{profile.userName}'>{t.header.menu.profile}</a>
-        </li>
-      {/if} -->
+      <li v-if="loggedIn" :aria-current="$route.path === `/p/${user?.userName}` ? 'page' : undefined">
+        <NuxtLink :href="`/p/${user?.userName}`">
+          Мой профиль
+        </NuxtLink>
+      </li>
     </ul>
   </nav>
 
@@ -47,6 +41,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+const { loggedIn, user } = useUserSession()
+</script>
+
 <style scoped>
 .right {
   flex-grow: 1;

apps/website/app/components/MenuSmartphone.vue

@@ -27,12 +27,11 @@
             Купон
           </NuxtLink>
         </li>
-        <!--
-        {#if profile}
-          <li aria-current={$page.url.pathname === `/${locale}/p/${profile.userName}` ? 'page' : undefined}>
-            <a href='/{locale}/p/{profile.userName}' @click="closeSidebar">{t.header.menu.profile}</a>
-          </li>
-        {/if} -->
+        <li v-if="loggedIn" :aria-current="$route.path === `/p/${user?.userName}` ? 'page' : undefined">
+          <NuxtLink :href="`/p/${user?.userName}`">
+            Мой профиль
+          </NuxtLink>
+        </li>
       </ul>
     </nav>
   </aside>
@@ -46,6 +45,7 @@
 
 <script setup lang="ts">
 const { isMobileMenuOpened } = useApp()
+const { loggedIn, user } = useUserSession()
 </script>
 
 <style scoped>