feat(ui): implement sidebar toggle and improve styling
- Add toggle functionality for sidebar with smooth animation - Update color scheme and scrollbar styling - Center search results and improve avatar icon display - Remove duplicate video entry from data
This commit is contained in:
32
js/script.js
32
js/script.js
@@ -275,28 +275,6 @@ let videos = [
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"title": "Commodore 128 Alternate Universe",
|
||||
"channel": "The 8-Bit Guy",
|
||||
"views": "17,498",
|
||||
"uploadDate": "4 months ago",
|
||||
"duration": "8:35",
|
||||
"thumbnail": "img/cover/tech-25.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"title": "Commodore 128 Alternate Universe",
|
||||
"channel": "The 8-Bit Guy",
|
||||
"views": "17,498",
|
||||
"uploadDate": "4 months ago",
|
||||
"duration": "8:35",
|
||||
"thumbnail": "img/cover/tech-25.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 26,
|
||||
"title": "\"The Roller Coaster\" - Behind the Scenes - Time Lapse & Commentary",
|
||||
@@ -576,7 +554,7 @@ function createVideoCard(video) {
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="video-channel-avatar">
|
||||
<i class="fas fa-user"></i>
|
||||
<i class="fas fa-user avatar-img"></i>
|
||||
</div>
|
||||
<div class="video-details">
|
||||
<h3 class="video-title">${video.title}</h3>
|
||||
@@ -745,6 +723,14 @@ function renderSearchResults(results, query) {
|
||||
|
||||
// Bind events to the DOM elements
|
||||
function bindEvents() { // Bind events to the DOM elements
|
||||
// Menu button event - toggle sidebar
|
||||
const menuBtn = document.querySelector('.menu-btn');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
|
||||
menuBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('collapsed');
|
||||
});
|
||||
|
||||
// Search event
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
performSearch(e.target.value);
|
||||
|
||||
Reference in New Issue
Block a user