feat(settings): create wrapper component

Author: dvcol

src/components/AppComponent.vue

@@ -137,6 +137,7 @@ header {
 
 main {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: calc(100% - #{layout.$header-navbar-height});

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -6,7 +6,6 @@ import { computed, defineProps, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import type { DropdownProps } from 'naive-ui';
-
 import type { Component } from 'vue';
 
 import type { ArrayElement } from '~/utils/typescript.utils';
@@ -15,7 +14,7 @@ import IconAccount from '~/components/icons/IconAccount.vue';
 import IconAccountAdd from '~/components/icons/IconAccountAdd.vue';
 import IconCog from '~/components/icons/IconCog.vue';
 import IconExternalLink from '~/components/icons/IconExternalLink.vue';
-import IconLightbulb from '~/components/icons/IconLightbulb.vue';
+import IconLightBulb from '~/components/icons/IconLightBulb.vue';
 import IconLogOut from '~/components/icons/IconLogOut.vue';
 
 import { Route } from '~/router';
@@ -80,7 +79,7 @@ const toOption = (
 const options = computed<DropdownProps['options']>(() => {
   const baseOptions: DropdownProps['options'] = [
     toOption('settings', IconCog),
-    toOption('about', IconLightbulb),
+    toOption('about', IconLightBulb),
     { type: 'divider', key: 'external-links' },
     toOption('trakt', IconExternalLink),
     { type: 'divider', key: 'session-divider' },

src/components/container/ContainerComponent.ce.vue

@@ -202,4 +202,14 @@ const root = ref<HTMLElement>();
     color: var(--black);
   }
 }
+
+.n-layout-sider {
+  .n-layout-toggle-bar {
+    right: -15px;
+  }
+
+  .n-anchor .n-anchor-link .n-anchor-link__title {
+    padding-right: 0;
+  }
+}
 </style>

src/components/icons/IconLightbulb.vue src/components/icons/IconLightBulb.vue

@@ -12,8 +12,8 @@
     >
       <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="46;0" />
     </path>
-    <rect width="6" height="0" x="9" y="20"
-fill="currentColor" rx="1">
+    <rect width="6" height="0" x="9" y="20" fill="currentColor"
+rx="1">
       <animate
         fill="freeze"
         attributeName="height"

src/components/views/settings/SettingsComponent.vue

@@ -1,11 +1,126 @@
 <script lang="ts" setup>
-// TODO
+import { NAnchor, NAnchorLink, NCard, NLayout, NLayoutSider } from 'naive-ui';
+
+import { onDeactivated, type Ref, ref } from 'vue';
+
+import { useI18n } from '~/utils';
+
+const i18n = useI18n('settings');
+
+type Section = {
+  title: string;
+  reference: Ref<[InstanceType<typeof NCard>] | undefined>;
+};
+
+const sections: Section[] = [
+  { title: 'menu__account', reference: ref() },
+  { title: 'menu__cache', reference: ref() },
+  { title: 'menu__tabs', reference: ref() },
+  { title: 'menu__logs', reference: ref() },
+  { title: 'menu__links', reference: ref() },
+];
+
+const focus = ref(false);
+const target = ref();
+
+const scrollTo = (section: Section) => {
+  target.value = section;
+  focus.value = true;
+  section.reference?.value?.[0]?.$el?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+  });
+};
+
+onDeactivated(() => {
+  target.value = undefined;
+  focus.value = false;
+});
 </script>
 
 <template>
-  <span>This is a settings component</span>
+  <NLayout class="container" has-sider>
+    <NLayoutSider
+      class="menu"
+      bordered
+      collapse-mode="width"
+      width="5.125rem"
+      :collapsed-width="0"
+      :native-scrollbar="false"
+      show-trigger="bar"
+      inverted
+    >
+      <NAnchor :show-rail="false" type="block">
+        <NAnchorLink
+          v-for="section in sections"
+          :key="section.title"
+          :title="i18n(section.title)"
+          :class="{ 'n-anchor-link--active': target?.title === section.title }"
+          @click="scrollTo(section)"
+        />
+      </NAnchor>
+    </NLayoutSider>
+    <NLayout
+      class="content"
+      :native-scrollbar="false"
+      :content-style="{
+        padding: '1rem 1rem',
+      }"
+    >
+      <NCard
+        v-for="section in sections"
+        :id="section.title"
+        :ref="section.reference"
+        :key="section.title"
+        class="card"
+        :class="{ target: focus && target?.title === section.title }"
+        :title="i18n(section.title)"
+        @mouseenter="target = section"
+        @mouseleave="focus = false"
+      >
+        card Content
+      </NCard>
+    </NLayout>
+  </NLayout>
 </template>
 
 <style lang="scss" scoped>
-// TODO
+@use '~/styles/mixin' as mixin;
+@use '~/styles/layout' as layout;
+
+.container {
+  width: 100%;
+  height: 100dvh;
+  margin-top: -#{layout.$header-navbar-height};
+  background: transparent;
+
+  .card {
+    @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
+
+    min-height: 20rem;
+
+    &:not(:last-child) {
+      margin-bottom: 1rem;
+    }
+
+    &.target {
+      border-color: var(--n-color-target);
+    }
+  }
+
+  .menu {
+    @include mixin.hover-background;
+
+    padding: 0.5rem;
+  }
+
+  .content {
+    background: transparent;
+  }
+
+  .menu,
+  .content .card:first-child {
+    margin-top: layout.$header-navbar-height;
+  }
+}
 </style>

src/i18n/en/settings/settings-menu.json

@@ -0,0 +1,22 @@
+{
+  "settings__menu__account": {
+    "message": "Account",
+    "description": "Account menu item"
+  },
+  "settings__menu__cache": {
+    "message": "Cache",
+    "description": "Cache menu item"
+  },
+  "settings__menu__tabs": {
+    "message": "Tabs",
+    "description": "Tabs menu item"
+  },
+  "settings__menu__logs": {
+    "message": "Logs",
+    "description": "Logs menu item"
+  },
+  "settings__menu__links": {
+    "message": "Links",
+    "description": "Links menu item"
+  }
+}

src/styles/base.scss

@@ -24,6 +24,7 @@
   --bg-black: rgba(0 0 0);
   --bg-black-20: rgba(0 0 0 / 20%);
   --bg-black-30: rgba(0 0 0 / 30%);
+  --bg-black-50: rgba(0 0 0 / 50%);
   --bg-black-60: rgba(0 0 0 / 60%);
   --bg-black-70: rgba(0 0 0 / 70%);
   --bg-black-80: rgba(0 0 0 / 80%);
@@ -100,6 +101,7 @@
   /* ui color variables */
   --bg-color-20: var(--bg-black-20);
   --bg-color-30: var(--bg-black-30);
+  --bg-color-50: var(--bg-black-50);
   --bg-color-60: var(--bg-black-60);
   --bg-color-70: var(--bg-black-70);
   --bg-color-80: var(--bg-black-80);
@@ -120,6 +122,7 @@
     /* Dark theme override for ui color variables */
     --bg-color-20: var(--bg-black-20);
     --bg-color-30: var(--bg-black-30);
+    --bg-color-50: var(--bg-black-50);
     --bg-color-60: var(--bg-black-60);
     --bg-color-70: var(--bg-black-70);
     --bg-color-80: var(--bg-black-80);