initial commit

src/App.vue

@@ -0,0 +1,29 @@
+<script setup>
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+// import HelloWorld from './components/HelloWorld.vue'
+import Sidebar from './components/Sidebar.vue';
+import Content from './components/Content.vue';
+</script>
+
+<template>
+  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
+  <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
+  <div class="flex">
+    <Sidebar class="flex-none" />
+    <div class="flex-1">
+      <Content />
+    </div>
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

src/components/Card.vue

@@ -0,0 +1,27 @@
+<script setup>
+
+const props = defineProps({
+  title: String,
+  description: String
+})
+
+</script>
+
+
+<template>
+  <div class="rounded-xl bg-white mx-auto max-w-md shadow-xl">
+    <div class="md:flex">
+      <div class="md:shrink-0">
+      </div>
+      <div class="p-8">
+        <a class="font-medium text-black hover:underline tracking-wide">
+          {{title}}
+        </a>
+        <p class="mt-2 text-slate-500">
+          {{description}}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+

src/components/Content.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Card from './Card.vue';
+
+</script>
+
+<template>
+  <Card title="My Product" description="My description" />
+</template>

src/components/Sidebar.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { ref } from 'vue'
+import SidebarIcon from "./SidebarIcon.vue";
+const icon = ref('fire');
+const icon2 = ref('plus');
+const icon3 = ref('poo');
+const text = ref('Fire');
+const text2 = ref('Plus');
+const text3 = ref('Poo');
+</script>
+
+<template>
+  <div class="fixed top-0 left-0
+  m-0 h-screen bg-slate-900 
+  text-white shadow-lg w-16 flex flex-col">
+    <SidebarIcon :icon="icon" :text="text"></SidebarIcon>
+    <SidebarIcon :icon="icon2" :text="text2"></SidebarIcon>
+    <SidebarIcon :icon="icon3" :text="text3"></SidebarIcon>
+  </div>
+</template>

src/components/SidebarIcon.vue

@@ -0,0 +1,15 @@
+<script setup>
+const props = defineProps({
+  icon: String,
+  text: String
+})
+</script>
+
+<template>
+  <i class="sidebar-icon group">
+    <font-awesome-icon :icon="['fas', icon]" />
+    <span class="sidebar-tooltip group-hover:scale-100">
+      {{ text }}
+    </span>
+  </i>
+</template>

src/index.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .sidebar-icon {
+      @apply relative flex items-center
+      justify-center h-12 w-12 mt-2 mb-2 mx-auto
+      text-green-500 hover:bg-green-600 bg-gray-800
+      rounded-3xl hover:rounded-xl transition-all duration-300
+      ease-linear cursor-pointer;
+  }
+
+  .sidebar-tooltip {
+    @apply absolute w-auto p-2 m-2 min-w-max left-14
+    rounded-md shadow-md
+    text-white bg-gray-900 
+    text-xs font-bold
+    transition-all duration-100 scale-0 origin-left;
+  }
+
+}

src/main.js

@@ -0,0 +1,23 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { fas } from '@fortawesome/free-solid-svg-icons'
+library.add(fas);
+import { fab } from '@fortawesome/free-brands-svg-icons';
+library.add(fab);
+import { far } from '@fortawesome/free-regular-svg-icons';
+library.add(far);
+import { dom } from "@fortawesome/fontawesome-svg-core";
+dom.watch();
+import { faFire, faPlus, faPoo } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faFire);
+library.add(faPlus);
+library.add(faPoo);
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+
+createApp(App)
+  .component("font-awesome-icon", FontAwesomeIcon)
+  .mount('#app');