UI optimize header dropdown, fix naming

yennanliu · Nov 2, 2024 · 59c7f5d · 59c7f5d
1 parent 092a897
commit 59c7f5d
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue
@@ -3,23 +3,23 @@
     <header>
       <nav>
         <router-link to="/">Home</router-link> |
-        <router-link to="/profile">User Profile</router-link> |
+        <router-link to="/profile">User PlaytList</router-link> |
 
-        <!-- Dropdown for Search options -->
+        <!-- Dropdown for Search options with arrow indicator -->
         <div class="dropdown">
-          <span>Search</span>
+          <span class="dropdown-label">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>
+            <router-link to="/search_album">Search Album</router-link>
+            <router-link to="/search_artist">Search Artist</router-link>
+            <router-link to="/album">Search Album (by ID)</router-link>
           </div>
         </div> |
 
         <router-link to="/playlist">Create Playlist</router-link> |
 
-        <!-- Dropdown for Recommendations options -->
+        <!-- Dropdown for Recommendations options with arrow indicator -->
         <div class="dropdown">
-          <span>Recommendation</span>
+          <span class="dropdown-label">Recommendation ▼</span>
           <div class="dropdown-content">
             <router-link to="/recommendation">Recommendation</router-link>
             <router-link to="/recommendationWithPlayList">Recommendation With Playlist</router-link>
@@ -118,10 +118,16 @@ nav a.router-link-exact-active {
   position: relative;
 }
 
-.dropdown span {
+.dropdown-label {
   cursor: pointer;
   color: #fff;
   text-decoration: none;
+  padding: 0 15px;
+  display: inline-block;
+}
+
+.dropdown-label:hover {
+  color: #ffeb3b; /* Highlighted color for hover */
 }
 
 .dropdown-content {
@@ -131,6 +137,7 @@ nav a.router-link-exact-active {
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   z-index: 1;
   min-width: 150px;
+  border-radius: 5px;
 }
 
 .dropdown:hover .dropdown-content {