[#134] add logo to sidebar

Author: Kreezag

src/shared/ui/icon-svg/icon-svg-originals/logo-short.svg

@@ -176,6 +176,28 @@ defineProps<Props>();
         d="M17.8 10.5a.6.6 0 0 1 .8.8L16.8 13l2 2a.6.6 0 1 1-.9.7l-1.9-2-2 2a.6.6 0 1 1-.7-.8l1.9-2-1.8-1.7a.6.6 0 0 1 .8-.8l1.8 1.8 1.8-1.8Z"
       />
     </svg>
+    <svg
+      v-else-if="name === 'logo-short'"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 42 29"
+    >
+      <path
+        d="m8.46 0 .58 1.68c-1.18.37-2 1.02-2.44 1.97-.45.93-.67 2-.67 3.22v3.06c0 .98-.2 1.88-.61 2.69-.4.8-1.03 1.43-1.9 1.9-.87.47-2.01.71-3.42.71v-1.8c1.12 0 1.93-.32 2.41-.95.5-.63.75-1.48.75-2.55V6.87c0-1.03.16-2 .47-2.9.33-.9.88-1.7 1.64-2.37A7.9 7.9 0 0 1 8.47 0Zm.58 27.3L8.46 29a8.16 8.16 0 0 1-3.19-1.6 5.78 5.78 0 0 1-1.64-2.37 8.6 8.6 0 0 1-.47-2.9v-3.04c0-.72-.11-1.34-.33-1.86A2.52 2.52 0 0 0 1.8 16a3.27 3.27 0 0 0-1.8-.44v-1.8a7.1 7.1 0 0 1 3.41.7 4.36 4.36 0 0 1 1.9 1.93c.42.8.62 1.7.62 2.69v3.04c0 .8.1 1.56.28 2.25a4.06 4.06 0 0 0 2.83 2.93ZM32.39 1.68 32.97 0c1.36.37 2.42.9 3.19 1.6a5.6 5.6 0 0 1 1.63 2.37c.32.9.48 1.87.48 2.9v3.06c0 .7.11 1.33.33 1.86.22.52.55.92 1.01 1.21.47.29 1.07.43 1.82.43v1.67c-1.4 0-2.54-.22-3.41-.67a4.35 4.35 0 0 1-1.92-1.84c-.4-.8-.6-1.68-.6-2.66V6.87c0-.8-.1-1.56-.28-2.25a4.3 4.3 0 0 0-.97-1.8 3.95 3.95 0 0 0-1.86-1.14ZM32.97 29l-.58-1.7c.78-.25 1.4-.62 1.84-1.14.46-.5.78-1.1.97-1.78.2-.7.3-1.44.3-2.25v-3.04c0-1 .2-1.88.6-2.66a4.27 4.27 0 0 1 1.92-1.83 7.41 7.41 0 0 1 3.4-.68v1.65c-1.1 0-1.9.32-2.4.96-.5.63-.75 1.48-.75 2.56v3.04c0 1.03-.16 2-.48 2.9a5.6 5.6 0 0 1-1.63 2.37 8.02 8.02 0 0 1-3.2 1.6Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.58 8.6a6.11 6.11 0 0 1 12.22 0v.36l.05.02 2.02-2.28a.74.74 0 0 1 1.11.99l-1.93 2.18c.54.63.87 1.46.84 2.36l-.05 1.81c-.01.35-.03.7-.07 1.05h2.69a.74.74 0 1 1 0 1.48h-2.91a14.8 14.8 0 0 1-1.27 3.67l-.6 1.2-.14.27 2.67 2.72a.74.74 0 1 1-1.05 1.03l-2.5-2.53a6.83 6.83 0 0 1-10.5-.39l-2.68 2.64a.74.74 0 0 1-1.04-1.05l2.94-2.89a7.23 7.23 0 0 1-.03-.07l-.79-1.76a14.8 14.8 0 0 1-.94-2.84H9.74a.74.74 0 1 1 0-1.48h2.63l-.08-.85-.11-1.9c-.05-.9.25-1.75.77-2.4l-2.04-2.18A.74.74 0 1 1 12 6.75l2.12 2.27c.15-.07.3-.13.46-.18V8.6Zm10.02 0v.08h-7.82V8.6a3.9 3.9 0 0 1 7.82 0Zm.84 2.28h-9.81c-.72 0-1.29.6-1.25 1.32l.12 1.91c.09 1.52.45 3 1.08 4.4l.79 1.76a4.62 4.62 0 0 0 8.34.18l.6-1.2a12.6 12.6 0 0 0 1.32-5.27l.05-1.81c.02-.7-.54-1.29-1.24-1.29Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M23.17 12.65c.31-.3.83-.3 1.14 0a.7.7 0 0 1 0 1.05l-2.56 2.37 2.76 2.54a.7.7 0 0 1 0 1.06c-.32.29-.83.29-1.15 0l-2.76-2.55-2.76 2.55c-.32.29-.83.29-1.15 0a.7.7 0 0 1 0-1.06l2.76-2.54-2.56-2.37a.7.7 0 0 1 0-1.05c.31-.3.83-.3 1.14 0L20.6 15l2.57-2.36Z"
+        fill="currentColor"
+      />
+    </svg>
 
     <svg
       v-else-if="name === 'logout'"

src/shared/ui/icon-svg/icon-svg.vue

@@ -60,6 +60,14 @@ const logout = () => {
 <template>
   <aside class="layout-sidebar">
     <nav class="layout-sidebar__nav">
+      <NuxtLink
+        to="/"
+        title="Events"
+        class="layout-sidebar__link layout-sidebar__link--logo"
+      >
+        <IconSvg class="layout-sidebar__link-icon" name="logo-short" />
+      </NuxtLink>
+
       <NuxtLink to="/" title="Events" class="layout-sidebar__link">
         <IconSvg class="layout-sidebar__link-icon" name="events" />
       </NuxtLink>
@@ -164,16 +172,21 @@ const logout = () => {
 
 .layout-sidebar__link {
   @apply block relative;
-  @apply text-blue-500 hover:text-white;
-  @apply hover:bg-gray-700;
   @apply flex items-center justify-center;
   @apply md:mx-1 lg:mx-1.5 md:mt-1 lg:mt-1.5 md:rounded-lg;
+  @apply text-blue-500 hover:text-white hover:bg-gray-700 hover:opacity-100;
 
   &.router-link-active {
     @apply bg-blue-700 text-blue-200;
   }
 }
 
+.layout-sidebar__link--logo,
+.layout-sidebar__link--logo.router-link-active {
+  @apply text-blue-600 bg-transparent hover:text-blue-600  hover:bg-transparent;
+  @apply dark:text-blue-500 dark:bg-transparent hover:dark:text-blue-500  hover:dark:bg-transparent;
+}
+
 .layout-sidebar__link-icon {
   @apply flex items-center justify-center;
   @apply fill-current;