Main page views added, Couple of base components added.

AccordionComp is still a WIP.

fe/src/components/base/AccordionComp.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="accordion">
+    <header>
+      <slot name="title" />
+    </header>
+    <section :class="`accordion__content ${open ? 'open' : ''}`">
+      <div>
+        <slot name="content" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  open: Boolean,
+})
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+
+.accordion {
+  @apply grid;
+
+  .accordion__content {
+    @apply grid
+    grid-rows-[0fr]
+    overflow-hidden
+    duration-300
+    ease-in-out;
+
+    div {
+      @apply grid
+      grid-rows-[0fr];
+    }
+  }
+}
+</style>

fe/src/components/base/ButtonComp.vue

@@ -0,0 +1,79 @@
+<template>
+  <template v-if="href">
+    <a :href="href" :class="`button ${classString}`">
+      <slot />
+    </a>
+  </template>
+  <template v-else>
+    <button :class="`button ${classString}`">
+      <slot />
+    </button>
+  </template>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+
+const props = defineProps({
+  href: String,
+  variant: String,
+  size: String,
+})
+
+const classString = computed(() => {
+  const classes = {
+    'bg-sky-500/80 hover:bg-sky-400 text-white border-sky-400': props.variant === 'primary',
+    'bg-white/80 hover:bg-white text-slate-900 border-white': props.variant === 'secondary',
+    'bg-red-700/80 hover:bg-red-700 text-white border-red-800': props.variant === 'danger',
+    'bg-lime-500/80 hover:bg-lime-500 text-white border-lime-600': props.variant === 'success',
+    'button__subtle bg-transparent hover:bg-white/10 text-white border-transparent':
+      props.variant === 'subtle',
+    'button__ghost bg-transparent text-white/80 border-transparent hover:text-white':
+      props.variant === 'ghost',
+    'button__lg px-5 py-3 text-lg gap-4': props.size === 'lg',
+    'button__sm px-3 py-1.5 text-sm gap-2': props.size === 'sm',
+    'px-4 py-2 gap-3': props.size !== 'sm' && props.size !== 'lg',
+  }
+  return Object.keys(classes)
+    .filter((key) => classes[key])
+    .join(' ')
+})
+
+onMounted(() => {
+  console.log(classString)
+})
+</script>
+
+<style>
+@reference "@/assets/main.css";
+
+button,
+.button {
+  @apply flex 
+  items-center 
+  h-fit 
+  border
+  rounded-lg
+  font-semibold
+  shadow-md
+  shadow-transparent
+  transition
+  cursor-pointer;
+
+  &:not(.button__subtle, .button__ghost):hover {
+    @apply shadow-black;
+  }
+
+  svg {
+    @apply size-5 stroke-1;
+  }
+
+  &.button__sm svg {
+    @apply size-4;
+  }
+
+  &.button__lg svg {
+    @apply size-6;
+  }
+}
+</style>

fe/src/components/base/MainMenu.vue

@@ -0,0 +1,128 @@
+<template>
+  <nav id="main-menu">
+    <button id="menu-toggle" :class="menuOpen ? 'open' : ''" @click="menuOpen = !menuOpen">
+      <IconMenu2 />
+      <IconX />
+    </button>
+    <ul :class="menuOpen ? 'open' : ''">
+      <li>
+        <RouterLink @click="menuOpen = false" to="/"> <IconHome />Dashboard </RouterLink>
+      </li>
+      <li>
+        <RouterLink @click="menuOpen = false" to="/panels"> <IconLayoutGrid />Panels </RouterLink>
+      </li>
+      <li>
+        <RouterLink @click="menuOpen = false" to="/macros"> <IconKeyboard />Macros </RouterLink>
+      </li>
+      <li>
+        <RouterLink @click="menuOpen = false" to="/settings"> <IconSettings />Settings </RouterLink>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router'
+import {
+  IconHome,
+  IconKeyboard,
+  IconLayoutGrid,
+  IconMenu2,
+  IconSettings,
+  IconX,
+} from '@tabler/icons-vue'
+import { ref } from 'vue'
+
+const menuOpen = ref(false)
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+nav {
+  @apply relative flex z-50;
+
+  button {
+    @apply absolute
+    top-4 left-4
+    size-12
+    rounded-full
+    aspect-square
+    bg-white/20 hover:bg-white/40
+    cursor-pointer
+    transition-colors
+    backdrop-blur-md;
+
+    svg {
+      @apply absolute
+      inset-1/2
+      -translate-1/2
+      transition-opacity
+      duration-400
+      ease-in-out;
+    }
+
+    svg:last-of-type {
+      @apply opacity-0;
+    }
+
+    &.open {
+      svg:first-of-type {
+        @apply opacity-0;
+      }
+
+      svg:last-of-type {
+        @apply opacity-100;
+      }
+    }
+  }
+
+  ul {
+    @apply absolute
+    top-20 left-0
+    -translate-x-full
+    grid
+    list-none
+    rounded-xl
+    overflow-hidden
+    bg-white/10
+    backdrop-blur-md
+    divide-y
+    divide-slate-600
+    transition-transform
+    duration-300
+    ease-in-out;
+
+    &.open {
+      @apply left-4 translate-x-0;
+    }
+
+    li {
+      a {
+        @apply flex
+        items-center
+        gap-2
+        px-4 py-2
+        border-transparent
+        transition-colors;
+
+        svg {
+          @apply text-white/40 transition-colors;
+        }
+
+        &:hover {
+          @apply bg-white/20;
+
+          svg {
+            @apply text-white;
+          }
+        }
+
+        &.router-link-active {
+          @apply text-sky-300
+          bg-sky-200/20;
+        }
+      }
+    }
+  }
+}
+</style>

fe/src/router/index.js

@@ -9,6 +9,21 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    {
+      path: '/panels',
+      name: 'panels',
+      component: () => import('../views/PanelsView.vue'),
+    },
+    {
+      path: '/macros',
+      name: 'macros',
+      component: () => import('../views/MacrosView.vue'),
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import('../views/SettingsView.vue'),
+    },
     // {
     //   path: '/about',
     //   name: 'about',

fe/src/views/HomeView.vue

@@ -1,8 +1,5 @@
 <template>
-  <div>
-    <img src="../assets/logo.svg" alt="" />
-    <h1>Home</h1>
-  </div>
+  <div id="dashboard"></div>
 </template>
 
 <script setup></script>

fe/src/views/MacrosView.vue

@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+@reference "@/assets/main.css";
+</style>

fe/src/views/PanelsView.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

fe/src/views/SettingsView.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>