📦 NEW: Upgrade packages

.npmrc

@@ -1 +1,2 @@
-strict-peer-dependencies = false
+strict-peer-dependencies=false
+hoist=false 

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "files.eol": "\n",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -12,11 +12,11 @@
     "pnpm": ">=7.1.0"
   },
   "devDependencies": {
-    "eslint": "8.17.0",
+    "eslint": "8.23.1",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-prettier": "4.0.0",
-    "prettier": "2.6.2",
-    "typescript": "4.7.3"
+    "eslint-plugin-prettier": "4.2.1",
+    "prettier": "2.7.1",
+    "typescript": "4.8.3"
   },
   "keywords": []
 }

packages/frontend/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false

packages/frontend/README.md

@@ -1,34 +1,42 @@
-# Lexalizer frontend
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
 
 ## Setup
 
 Make sure to install the dependencies:
 
 ```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
 # pnpm
-pnpm install
+pnpm install --shamefully-hoist
 ```
 
 ## Development Server
 
 Start the development server on http://localhost:3000
 
 ```bash
-pnpm run dev
+npm run dev
 ```
 
 ## Production
 
 Build the application for production:
 
 ```bash
-pnpm run build
+npm run build
 ```
 
 Locally preview production build:
 
 ```bash
-pnpm run preview
+npm run preview
 ```
 
 Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

packages/frontend/assets/fonts/notosans.css

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'noto-sans';
+  src: url('notosans-regular.woff2') format('woff2'),
+    url('notosans-regular.woff') format('woff'),
+    url('notosans-regular.ttf') format('truetype'),
+    url('notosans-regular.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

packages/frontend/assets/styles/variables.scss

@@ -0,0 +1,37 @@
+$background-primary: #edf2f7;
+$background-elevated: #ffffff;
+$background-click: #eaeaea;
+
+$background-header-1: #243046;
+$background-header-2: #2b253a;
+$background-header: linear-gradient(
+  to right,
+  $background-header-1,
+  $background-header-2
+);
+
+$text-dark: #2b2b2b;
+$text-light: #ffffff;
+$text-semi-light: #707070;
+
+$sidebar-shadow: 2.5px 2.5px 2.8px -11px rgba(0, 0, 0, 0.014),
+  6.1px 6.1px 6.7px -11px rgba(0, 0, 0, 0.02),
+  11.5px 11.5px 12.5px -11px rgba(0, 0, 0, 0.025),
+  20.5px 20.5px 22.3px -11px rgba(0, 0, 0, 0.03),
+  38.4px 38.4px 41.8px -11px rgba(0, 0, 0, 0.036),
+  92px 92px 100px -11px rgba(0, 0, 0, 0.05);
+
+$header-shadow: 4.5px 1.4px 1.6px -6px rgba(0, 0, 0, 0.014),
+  12.5px 3.9px 4.4px -6px rgba(0, 0, 0, 0.02),
+  30.1px 9.3px 10.6px -6px rgba(0, 0, 0, 0.026),
+  100px 31px 35px -6px rgba(0, 0, 0, 0.04);
+
+$floating-btn-shadow: 0px 0.8px 1.6px -6px rgba(0, 0, 0, 0.100),
+  0px 2.3px 4.4px -6px rgba(0, 0, 0, 0.150),
+  0px 5.4px 10.6px -6px rgba(0, 0, 0, 0.200),
+  0px 18px 35px -6px rgba(0, 0, 0, 0.315);
+
+$floating-btn-shadow-elevated: 0px 0.8px 1.6px -6px rgba(0, 0, 0, 0.180),
+  0px 2.3px 4.4px -6px rgba(0, 0, 0, 0.210),
+  0px 5.4px 10.6px -6px rgba(0, 0, 0, 0.280),
+  0px 18px 35px -6px rgba(0, 0, 0, 0.400);

packages/frontend/components/MainHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="main-header">
+    <div class="top-right-edge" />
+    <div class="title-container">
+      <h1 class="main-title">Lexalizer</h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.main-header {
+  background: $background-header;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  box-shadow: $header-shadow;
+  position: relative;
+
+  .top-right-edge {
+    position: absolute;
+    bottom: -40px;
+    background: $background-header-1;
+    height: 40px;
+    width: 40px;
+    clip-path: polygon(0 0, 100% 0, 0 100%);
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: 40px;
+      width: 40px;
+      background: $background-primary;
+      border-radius: 25px 0 0 0;
+    }
+  }
+
+  .title-container {
+    height: 100%;
+    display: flex;
+
+    .main-title {
+      margin: auto 0;
+      font-size: 1.5rem;
+      color: $text-light;
+      padding: 0 20px;
+    }
+  }
+}
+</style>

packages/frontend/components/sidebar/Sidebar.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const sidebarConfig = {
+  title: 'Your Documents',
+  route: '/',
+  items: [
+    {
+      title: 'New',
+      iconName: 'estate',
+      route: '/'
+    }
+  ]
+};
+</script>
+
+<template>
+  <div class="sidebar">
+    <div class="sidebar-inner">
+      <SidebarBtnClose class="sidebar-btn-control" />
+      <SidebarSection
+        :title="sidebarConfig.title"
+        :route="sidebarConfig.route"
+        :items="sidebarConfig.items"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar {
+  background-color: $background-primary;
+  height: 100%;
+  width: 300px;
+
+  .sidebar-btn-control {
+    opacity: 0;
+    transform: scale(0.5);
+    transition: opacity 200ms 500ms, transform 300ms 500ms;
+  }
+
+  &:hover {
+    .sidebar-btn-control {
+      transform: scale(1);
+      opacity: 1;
+      transition: opacity 200ms, transform 300ms;
+    }
+  }
+
+  .sidebar-inner {
+    background-color: $background-elevated;
+    width: calc(100% - 40px);
+    height: calc(100% - 40px);
+    margin: 20px;
+    border-radius: 15px;
+    position: relative;
+    box-shadow: $sidebar-shadow;
+    padding: 15px 0 0 0;
+  }
+}
+</style>

packages/frontend/components/sidebar/SidebarBtnClose.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="sidebar-btn-close">
+    <unicon name="angle-left" />
+  </div>
+</template>
+
+<style lang="scss">
+.sidebar-btn-close {
+  position: absolute;
+  right: -16px;
+  top: 40px;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  background-color: $background-elevated;
+  border-radius: 25px;
+  box-shadow: $floating-btn-shadow;
+  transition: box-shadow 200ms, background-color 100ms;
+
+  &:hover {
+    box-shadow: $floating-btn-shadow-elevated;
+  }
+
+  &:active {
+    background-color: $background-click;
+  }
+}
+</style>

packages/frontend/components/sidebar/SidebarSection.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface SidebarSectionProps {
+  title: string;
+  route?: string;
+  items?: {
+    title: string;
+    iconName: string;
+    route?: string;
+  }[];
+}
+
+defineProps<SidebarSectionProps>();
+</script>
+
+<template>
+  <div class="sidebar-section">
+    <div class="sidebar-section-title">
+      <p class="title">{{ title }}</p>
+    </div>
+    <div class="sidebar-section-items">
+      <SidebarSectionItem
+        v-for="item in items"
+        :key="item.title"
+        :title="item.title"
+        :iconName="item.iconName"
+        :route="item.route"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-section {
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px;
+
+  .sidebar-section-title {
+    display: flex;
+    flex-direction: row;
+    font-size: 0.7rem;
+    color: $text-semi-light;
+
+    .title {
+    }
+  }
+}
+</style>

packages/frontend/components/sidebar/SidebarSectionItem.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface SidebarSectionProps {
+  title: string;
+  iconName: string;
+  route?: string;
+}
+
+defineProps<SidebarSectionProps>();
+</script>
+
+<template>
+  <div class="sidebar-section-item">
+    <div class="sidebar-section-title">
+      <unicon :name="iconName" />
+      <p class="title">{{ title }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .sidebar-section-item {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-section-title {
+      display: flex;
+      flex-direction: row;
+
+      .title {
+      }
+    }
+  }
+  </style>
+