initial

apps/client/components/navigation/item.vue

@@ -0,0 +1,79 @@
+<template>
+  <NuxtLink
+    class="nav-item"
+    :class="{
+      'nav-item--active': isActive,
+    }"
+    :to="to"
+  >
+    <slot name="icon">
+      <Component
+        :is="resolveComponent(`ui-icon-${icon}`)"
+        class="nav-item__icon"
+      />
+    </slot>
+    <span class="nav-item__title">
+      {{ title }}
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { UiIcon } from '#build/types/ui/icons'
+
+interface Props {
+  to: string
+  icon: UiIcon
+  title: string
+  matcher?: () => boolean
+}
+
+const props = defineProps<Props>()
+
+const isActive = computed(() => (props.matcher ? props.matcher() : false))
+</script>
+
+<style lang="scss">
+.nav-item {
+  --link-color: #{$clr-white};
+
+  @include txt-i-sb;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  color: var(--link-color);
+
+  transition: color 0.2s ease-out;
+
+  &:hover {
+    --link-color: #{$clr-grey-500};
+  }
+
+  &--active,
+  &:active {
+    --link-color: #{$clr-cyan-300} !important;
+  }
+
+  &__icon {
+    margin-bottom: 5px;
+    position: relative;
+  }
+
+  &__notification-icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 20px;
+    width: 20px;
+    height: 20px;
+    top: -8px;
+    right: -24px;
+    background: $clr-white;
+    color: $clr-white;
+  }
+}
+</style>

apps/client/components/navigation/logo.vue

@@ -0,0 +1,10 @@
+<template>
+  <NuxtLink to="/projects">
+    <img
+      class="app-logo__img"
+      src="/logo-with-text.svg"
+      alt="logo"
+      draggable="false"
+    >
+  </NuxtLink>
+</template>

apps/client/components/navigation/sidebar.vue

@@ -0,0 +1,46 @@
+<template>
+  <nav class="nav-sidebar">
+    <div
+      v-if="$slots.logo"
+      class="nav-sidebar__logo"
+    >
+      <slot name="logo" />
+    </div>
+    <div class="nav-sidebar__content">
+      <slot />
+    </div>
+    <div class="nav-sidebar__bottom">
+      <slot name="bottom" />
+    </div>
+  </nav>
+</template>
+
+<style lang="scss">
+.nav-sidebar {
+  display: flex;
+  flex-direction: column;
+
+  background: #{$clr-black};
+  color: #{$clr-white};
+  padding: 32px 27px 32px 27px;
+
+  width: 120px;
+  height: 100%;
+  text-align: center;
+
+  overflow: hidden;
+
+  &__logo {
+    margin-bottom: 60px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    gap: 20px;
+    margin-inline: -27px;
+    flex: 1;
+  }
+}
+</style>