UI header move similar item as dropdown

springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue

@@ -4,38 +4,45 @@
       <nav>
         <router-link to="/">Home</router-link> |
         <router-link to="/profile">User Profile</router-link> |
-        <router-link to="/album">Get Album (Id)</router-link> |
-        <router-link to="/search_album">Get Albums</router-link> |
-        <router-link to="/search_artist">Get Artists</router-link> |
+
+        <!-- Dropdown for Search options -->
+        <div class="dropdown">
+          <span>Search</span>
+          <div class="dropdown-content">
+            <router-link to="/search_album">Get Albums</router-link>
+            <router-link to="/search_artist">Get Artists</router-link>
+            <router-link to="/album">Get Album (Id)</router-link>
+          </div>
+        </div> |
+
         <router-link to="/playlist">Create Playlist</router-link> |
-        <router-link to="/recommendation">Recommendation</router-link> |
-        <router-link to="/recommendationWithPlayList">RecommendationWithPlayList</router-link>
+
+        <!-- Dropdown for Recommendations options -->
+        <div class="dropdown">
+          <span>Recommendation</span>
+          <div class="dropdown-content">
+            <router-link to="/recommendation">Recommendation</router-link>
+            <router-link to="/recommendationWithPlayList">Recommendation With Playlist</router-link>
+          </div>
+        </div>
       </nav>
     </header>
+
     <div class="auth-button">
       <button @click="authorize" class="btn btn-outline-light">
         Authorize with Spotify
       </button>
     </div>
-    <!-- 
-      https://youtu.be/VZ1NV7EHGJw?si=FtsSuMndmHLiBwsc&t=710 
 
-      delcare global variable via router view
-      -> so baseURL, categories are visible to ALL views
-      -->
-    <router-view :baseURL="baseURL"> </router-view>
+    <router-view :baseURL="baseURL"></router-view>
   </div>
 </template>
 
 <script>
-console.log(">>> process.env.VUE_APP_BASE_URL = " + process.env.VUE_APP_BASE_URL)
-
 export default {
   data() {
     return {
-      //baseURL: "http://localhost:8888/",
-      // NOTE : In Vue.js, environment variables need to be prefixed with VUE_APP_ to be accessible in your application
-      baseURL: process.env.VUE_APP_BASE_URL || "http://localhost:8888/", // Fallback to default
+      baseURL: process.env.VUE_APP_BASE_URL || "http://localhost:8888/",
     };
   },
   methods: {
@@ -104,4 +111,41 @@ nav a.router-link-exact-active {
   font-size: 1.2rem;
   padding: 10px 20px;
 }
+
+/* Dropdown Styling */
+.dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.dropdown span {
+  cursor: pointer;
+  color: #fff;
+  text-decoration: none;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  min-width: 150px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-content a {
+  color: #000;
+  padding: 10px 15px;
+  display: block;
+  text-decoration: none;
+  transition: background-color 0.3s ease;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
 </style>