frontend: top bar added

rkshaon · Sep 2, 2024 · 50ebdc2 · 50ebdc2
1 parent 9435992
commit 50ebdc2
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 25 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,24 +1,20 @@
 <template>
   <div class="flex flex-col min-h-screen">
     <HeaderComponent />
-    <!-- Main Content -->
     <main class="flex-grow">
       <router-view />
     </main>
-    <!-- <HomePage /> -->
     <FooterComponent />
   </div>
 </template>
 
 <script>
-// import HomePage from '@/pages/HomePage'
 import HeaderComponent from './components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
 
 export default {
   name: 'App',
   components: {
-    // HomePage,
     HeaderComponent,
     FooterComponent
   }

diff --git a/frontend/src/components/HeaderComponent.vue b/frontend/src/components/HeaderComponent.vue
@@ -1,14 +1,16 @@
 <template>
-    <div>Header</div>
+    <TopBarComponent />
     <NavBarComponent />
 </template>
 
 <script>
+import TopBarComponent from '@/components/TopBarComponent'
 import NavBarComponent from './NavBarComponent.vue'
 
 export default {
   name: 'HeaderComponent',
   components: {
+    TopBarComponent,
     NavBarComponent
   }
 }

diff --git a/frontend/src/components/TopBarComponent.vue b/frontend/src/components/TopBarComponent.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="bg-gray-600 text-white py-2">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <!-- Left Part: Sliding Text Ad -->
+            <div class="overflow-hidden h-6">
+                <div class="flex flex-col animate-slide">
+                    <span v-for="(item, index) in adList" :key="index">
+                        <a :href="item.url" target="_blank" class="hover:text-gray-300">{{ item.title }}</a>
+                    </span>
+                </div>
+            </div>
+            <!-- Right Part: Buttons -->
+            <div class="flex space-x-4">
+                <a href="/signup" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">Sign Up</a>
+                <a href="/login" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">Sign In</a>
+                <button class="px-3 py-1 bg-gray-700 text-white rounded hover:bg-gray-600">Language</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'TopBarComponent',
+  data () {
+    return {
+      adList: [
+        {
+          id: 1,
+          title: 'Welcome to BookShelf!',
+          url: ''
+        },
+        {
+          id: 2,
+          title: 'Follow the developer',
+          url: 'https://rkshaon.info'
+        },
+        {
+          id: 3,
+          title: 'Join our community of book lovers!',
+          url: 'https://rkshaon.info'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Animation for sliding text */
+@keyframes slide {
+    0% {
+        transform: translateY(0);
+    }
+
+    33% {
+        transform: translateY(-100%);
+    }
+
+    66% {
+        transform: translateY(-200%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.animate-slide {
+    animation: slide 9s linear infinite;
+}
+</style>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
@@ -1,28 +1,17 @@
 <template>
-    <div class="min-h-screen bg-gray-100">
-        <!-- <HeaderComponent /> -->
-        <main class="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
-            <div class="bg-white shadow rounded-lg p-6">
-                <h1 class="text-2xl font-bold text-gray-800 mb-4">Welcome to BookShelf</h1>
-                <p class="text-gray-600">
-                    Explore a vast collection of books, share your reviews, and connect with other book lovers.
-                </p>
-            </div>
-        </main>
-        <!-- <FooterComponent /> -->
-    </div>
+    <main class="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
+        <div class="bg-white shadow rounded-lg p-6">
+            <h1 class="text-2xl font-bold text-gray-800 mb-4">Welcome to BookShelf</h1>
+            <p class="text-gray-600">
+                Explore a vast collection of books, share your reviews, and connect with other book lovers.
+            </p>
+        </div>
+    </main>
 </template>
 
 <script>
-// import HeaderComponent from '@/components/HeaderComponent.vue'
-// import FooterComponent from '@/components/FooterComponent.vue'
-
 export default {
-  name: 'HomePage',
-  components: {
-    // HeaderComponent
-    // FooterComponent
-  }
+  name: 'HomePage'
 }
 </script>