mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-06-03 19:32:56 +00:00
first commit
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,12 @@
|
||||
'use strict';
|
||||
|
||||
const api_key = '054582e9ee66adcbe911e0008aa482a8';
|
||||
const imageBaseURL = 'https://image.tmdb.org/t/p/';
|
||||
|
||||
const fetchDataFromServer = function (url, callback, optionalParam) {
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => callback(data, optionalParam));
|
||||
}
|
||||
|
||||
export { imageBaseURL, api_key, fetchDataFromServer };
|
||||
@@ -0,0 +1,179 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, imageBaseURL, fetchDataFromServer } from "./api.js";
|
||||
import { sidebar } from "./sidebar.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
import { search } from "./search.js";
|
||||
|
||||
|
||||
const movieId = window.localStorage.getItem("movieId");
|
||||
const pageContent = document.querySelector("[page-content]");
|
||||
|
||||
|
||||
|
||||
sidebar();
|
||||
|
||||
|
||||
|
||||
const getGenres = function (genreList) {
|
||||
const newGenreList = [];
|
||||
|
||||
for (const { name } of genreList) newGenreList.push(name);
|
||||
|
||||
return newGenreList.join(", ");
|
||||
}
|
||||
|
||||
const getCasts = function (castList) {
|
||||
const newCastList = [];
|
||||
|
||||
for (let i = 0, len = castList.length; i < len && i < 10; i++) {
|
||||
const { name } = castList[i];
|
||||
newCastList.push(name);
|
||||
}
|
||||
|
||||
return newCastList.join(", ");
|
||||
}
|
||||
|
||||
const getDirectors = function (crewList) {
|
||||
const directors = crewList.filter(({ job }) => job === "Director");
|
||||
|
||||
const directorList = [];
|
||||
for (const { name } of directors) directorList.push(name);
|
||||
|
||||
return directorList.join(", ");
|
||||
}
|
||||
|
||||
const filterVideos = function (videoList) {
|
||||
return videoList.filter(({ type, site }) => (type === "Trailer" || type === "Teaser") && site === "YouTube");
|
||||
}
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${api_key}&append_to_response=casts,videos,images,releases`, function (movie) {
|
||||
|
||||
const {
|
||||
backdrop_path,
|
||||
poster_path,
|
||||
title,
|
||||
release_date,
|
||||
runtime,
|
||||
vote_average,
|
||||
releases: { countries: [{ certification } = { certification: "N/A" }] },
|
||||
genres,
|
||||
overview,
|
||||
casts: { cast, crew },
|
||||
videos: { results: videos }
|
||||
} = movie;
|
||||
|
||||
document.title = `${title} - TD`;
|
||||
|
||||
const movieDetail = document.createElement("div");
|
||||
movieDetail.classList.add("movie-detail");
|
||||
|
||||
movieDetail.innerHTML = `
|
||||
<div class="backdrop-image" style="background-image: url('${imageBaseURL}${"w1280" || "original"}${backdrop_path || poster_path}')"></div>
|
||||
|
||||
<figure class="poster-box movie-poster">
|
||||
<img src="${imageBaseURL}w342${poster_path}" alt="${title} poster" class="img-cover">
|
||||
</figure>
|
||||
|
||||
<div class="detail-box">
|
||||
|
||||
<div class="detail-content">
|
||||
<h1 class="heading">${title}</h1>
|
||||
|
||||
<div class="meta-list">
|
||||
|
||||
<div class="meta-item">
|
||||
<img src="./assets/images/star.png" width="20" height="20" alt="rating">
|
||||
|
||||
<span class="span">${vote_average.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="meta-item">${runtime}m</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="meta-item">${release_date?.split("-")[0] ?? "Not Released"}</div>
|
||||
|
||||
<div class="meta-item card-badge">${certification}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="genre">${getGenres(genres)}</p>
|
||||
|
||||
<p class="overview">${overview}</p>
|
||||
|
||||
<ul class="detail-list">
|
||||
|
||||
<div class="list-item">
|
||||
<p class="list-name">Starring</p>
|
||||
|
||||
<p>${getCasts(cast)}</p>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<p class="list-name">Directed By</p>
|
||||
|
||||
<p>${getDirectors(crew)}</p>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="title-wrapper">
|
||||
<h3 class="title-large">Trailers and Clips</h3>
|
||||
</div>
|
||||
|
||||
<div class="slider-list">
|
||||
<div class="slider-inner"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
for (const { key, name } of filterVideos(videos)) {
|
||||
const videoCard = document.createElement("div");
|
||||
videoCard.classList.add("video-card");
|
||||
|
||||
videoCard.innerHTML = `
|
||||
<iframe width="500" height="294" src="https://www.youtube.com/embed/${key}?&theme=dark&color=white&rel=0"
|
||||
frameborder="0" allowfullscreen="1" title="${name}" class="img-cover" loading="lazy"></iframe>
|
||||
`;
|
||||
|
||||
movieDetail.querySelector(".slider-inner").appendChild(videoCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieDetail);
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/${movieId}/recommendations?api_key=${api_key}&page=1`, addSuggestedMovies);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
const addSuggestedMovies = function ({ results: movieList }, title) {
|
||||
|
||||
const movieListElem = document.createElement("section");
|
||||
movieListElem.classList.add("movie-list");
|
||||
movieListElem.ariaLabel = "You May Also Like";
|
||||
|
||||
movieListElem.innerHTML = `
|
||||
|
||||
|
||||
`;
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
movieListElem.querySelector(".slider-inner").appendChild(movieCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieListElem);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
search();
|
||||
@@ -0,0 +1,29 @@
|
||||
'use strict';
|
||||
|
||||
|
||||
|
||||
const addEventOnElements = function (elements, eventType, callback) {
|
||||
for (const elem of elements) elem.addEventListener(eventType, callback);
|
||||
}
|
||||
|
||||
|
||||
const searchBox = document.querySelector("[search-box]");
|
||||
const searchTogglers = document.querySelectorAll("[search-toggler]");
|
||||
|
||||
addEventOnElements(searchTogglers, "click", function () {
|
||||
searchBox.classList.toggle("active");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const getMovieDetail = function (movieId) {
|
||||
window.localStorage.setItem("movieId", String(movieId));
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getMovieList = function (urlParam, genreName) {
|
||||
window.localStorage.setItem("urlParam", urlParam);
|
||||
window.localStorage.setItem("genreName", genreName);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
'use strict';
|
||||
|
||||
|
||||
import { sidebar } from "./sidebar.js";
|
||||
import { api_key, imageBaseURL, fetchDataFromServer } from "./api.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
import { search } from "./search.js";
|
||||
|
||||
const pageContent = document.querySelector("[page-content]");
|
||||
|
||||
|
||||
|
||||
sidebar();
|
||||
|
||||
|
||||
|
||||
|
||||
const homePageSections = [
|
||||
{
|
||||
title: "Upcoming Movies",
|
||||
path: "/movie/upcoming"
|
||||
},
|
||||
{
|
||||
title: "Weekly Trending Movies",
|
||||
path: "/trending/movie/week"
|
||||
},
|
||||
{
|
||||
title: "Top Rated Movies",
|
||||
path: "/movie/top_rated"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
const genreList = {
|
||||
|
||||
|
||||
asString(genreIdList) {
|
||||
let newGenreList = [];
|
||||
|
||||
for (const genreId of genreIdList) {
|
||||
this[genreId] && newGenreList.push(this[genreId]);
|
||||
}
|
||||
|
||||
return newGenreList.join(", ");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/genre/movie/list?api_key=${api_key}`, function ({ genres }) {
|
||||
for (const { id, name } of genres) {
|
||||
genreList[id] = name;
|
||||
}
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/popular?api_key=${api_key}&page=1`, heroBanner);
|
||||
});
|
||||
|
||||
|
||||
|
||||
const heroBanner = function ({ results: movieList }) {
|
||||
|
||||
const banner = document.createElement("section");
|
||||
banner.classList.add("banner");
|
||||
banner.ariaLabel = "Popular Movies";
|
||||
|
||||
banner.innerHTML = `
|
||||
<div class="banner-slider"></div>
|
||||
|
||||
<div class="slider-control">
|
||||
<div class="control-inner"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let controlItemIndex = 0;
|
||||
|
||||
for (const [index, movie] of movieList.entries()) {
|
||||
|
||||
const {
|
||||
backdrop_path,
|
||||
title,
|
||||
release_date,
|
||||
genre_ids,
|
||||
overview,
|
||||
poster_path,
|
||||
vote_average,
|
||||
id
|
||||
} = movie;
|
||||
|
||||
const sliderItem = document.createElement("div");
|
||||
sliderItem.classList.add("slider-item");
|
||||
sliderItem.setAttribute("slider-item", "");
|
||||
|
||||
sliderItem.innerHTML = `
|
||||
<img src="${imageBaseURL}w1280${backdrop_path}" alt="${title}" class="img-cover" loading=${index === 0 ? "eager" : "lazy"
|
||||
}>
|
||||
|
||||
<div class="banner-content">
|
||||
|
||||
<h2 class="heading">${title}</h2>
|
||||
|
||||
<div class="meta-list">
|
||||
<div class="meta-item">${release_date?.split("-")[0] ?? "Not Released"}</div>
|
||||
|
||||
<div class="meta-item card-badge">${vote_average.toFixed(1)}</div>
|
||||
</div>
|
||||
|
||||
<p class="genre">${genreList.asString(genre_ids)}</p>
|
||||
|
||||
<p class="banner-text">${overview}</p>
|
||||
|
||||
<a href="./detail.html" class="btn" onclick="getMovieDetail(${id})">
|
||||
<img src="./assets/images/play_circle.png" width="24" height="24" aria-hidden="true" alt="play circle">
|
||||
|
||||
<span class="span">Watch Now</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
`;
|
||||
banner.querySelector(".banner-slider").appendChild(sliderItem);
|
||||
|
||||
|
||||
const controlItem = document.createElement("button");
|
||||
controlItem.classList.add("poster-box", "slider-item");
|
||||
controlItem.setAttribute("slider-control", `${controlItemIndex}`);
|
||||
|
||||
controlItemIndex++;
|
||||
|
||||
controlItem.innerHTML = `
|
||||
<img src="${imageBaseURL}w154${poster_path}" alt="Slide to ${title}" loading="lazy" draggable="false" class="img-cover">
|
||||
`;
|
||||
banner.querySelector(".control-inner").appendChild(controlItem);
|
||||
|
||||
}
|
||||
|
||||
pageContent.appendChild(banner);
|
||||
|
||||
addHeroSlide();
|
||||
|
||||
|
||||
for (const { title, path } of homePageSections) {
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3${path}?api_key=${api_key}&page=1`, createMovieList, title);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const addHeroSlide = function () {
|
||||
|
||||
const sliderItems = document.querySelectorAll("[slider-item]");
|
||||
const sliderControls = document.querySelectorAll("[slider-control]");
|
||||
|
||||
let lastSliderItem = sliderItems[0];
|
||||
let lastSliderControl = sliderControls[0];
|
||||
|
||||
lastSliderItem.classList.add("active");
|
||||
lastSliderControl.classList.add("active");
|
||||
|
||||
const sliderStart = function () {
|
||||
lastSliderItem.classList.remove("active");
|
||||
lastSliderControl.classList.remove("active");
|
||||
|
||||
// `this` == slider-control
|
||||
sliderItems[Number(this.getAttribute("slider-control"))].classList.add("active");
|
||||
this.classList.add("active");
|
||||
|
||||
lastSliderItem = sliderItems[Number(this.getAttribute("slider-control"))];
|
||||
lastSliderControl = this;
|
||||
}
|
||||
|
||||
addEventOnElements(sliderControls, "click", sliderStart);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const createMovieList = function ({ results: movieList }, title) {
|
||||
|
||||
const movieListElem = document.createElement("section");
|
||||
movieListElem.classList.add("movie-list");
|
||||
movieListElem.ariaLabel = `${title}`;
|
||||
|
||||
movieListElem.innerHTML = `
|
||||
<div class="title-wrapper">
|
||||
<h3 class="title-large">${title}</h3>
|
||||
</div>
|
||||
|
||||
<div class="slider-list">
|
||||
<div class="slider-inner"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie); // called from movie_card.js
|
||||
|
||||
movieListElem.querySelector(".slider-inner").appendChild(movieCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieListElem);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
search();
|
||||
@@ -0,0 +1,44 @@
|
||||
'use strict';
|
||||
|
||||
import { imageBaseURL } from "./api.js";
|
||||
|
||||
|
||||
/**
|
||||
* movie card
|
||||
*/
|
||||
|
||||
export function createMovieCard(movie) {
|
||||
|
||||
const {
|
||||
poster_path,
|
||||
title,
|
||||
vote_average,
|
||||
release_date,
|
||||
id
|
||||
} = movie;
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.classList.add("movie-card");
|
||||
|
||||
card.innerHTML = `
|
||||
<figure class="poster-box card-banner">
|
||||
<img src="${imageBaseURL}w342${poster_path}" alt="${title}" class="img-cover" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h4 class="title">${title}</h4>
|
||||
|
||||
<div class="meta-list">
|
||||
<div class="meta-item">
|
||||
<img src="./assets/images/star.png" width="20" height="20" loading="lazy" alt="rating">
|
||||
|
||||
<span class="span">${vote_average.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-badge">${release_date.split("-")[0]}</div>
|
||||
</div>
|
||||
|
||||
<a href="./detail.html" class="card-btn" title="${title}" onclick="getMovieDetail(${id})"></a>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, fetchDataFromServer } from "./api.js";
|
||||
import { sidebar } from "./sidebar.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
import { search } from "./search.js";
|
||||
|
||||
// collectc genre name & url parameter from local storage
|
||||
const genreName = window.localStorage.getItem("genreName");
|
||||
const urlParam = window.localStorage.getItem("urlParam");
|
||||
|
||||
const pageContent = document.querySelector("[page-content]");
|
||||
|
||||
|
||||
|
||||
sidebar();
|
||||
|
||||
|
||||
|
||||
let currentPage = 1;
|
||||
let totalPages = 0;
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/discover/movie?api_key=${api_key}&sort_by=popularity.desc&include_adult=false&page=${currentPage}&${urlParam}`, function ({ results: movieList, total_pages }) {
|
||||
|
||||
totalPages = total_pages;
|
||||
|
||||
document.title = `${genreName} Movies - Tvflix`;
|
||||
|
||||
const movieListElem = document.createElement("section");
|
||||
movieListElem.classList.add("movie-list", "genre-list");
|
||||
movieListElem.ariaLabel = `${genreName} Movies`;
|
||||
|
||||
movieListElem.innerHTML = `
|
||||
<div class="title-wrapper">
|
||||
<h1 class="heading">All ${genreName} Movies</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid-list"></div>
|
||||
|
||||
<button class="btn load-more" load-more>Load More</button>
|
||||
`;
|
||||
|
||||
/**
|
||||
* add movie card based on fetched item
|
||||
*/
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
movieListElem.querySelector(".grid-list").appendChild(movieCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieListElem);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* load more button functionality
|
||||
*/
|
||||
document.querySelector("[load-more]").addEventListener("click", function () {
|
||||
|
||||
if (currentPage >= totalPages) {
|
||||
this.style.display = "none"; // this == loading-btn
|
||||
return;
|
||||
}
|
||||
|
||||
currentPage++;
|
||||
this.classList.add("loading"); // this == loading-btn
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/discover/movie?api_key=${api_key}&sort_by=popularity.desc&include_adult=false&page=${currentPage}&${urlParam}`, ({ results: movieList }) => {
|
||||
this.classList.remove("loading"); // this == loading-btn
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
movieListElem.querySelector(".grid-list").appendChild(movieCard);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
search();
|
||||
@@ -0,0 +1,60 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, fetchDataFromServer } from "./api.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
|
||||
|
||||
export function search() {
|
||||
|
||||
const searchWrapper = document.querySelector("[search-wrapper]");
|
||||
const searchField = document.querySelector("[search-field]");
|
||||
|
||||
const searchResultModal = document.createElement("div");
|
||||
searchResultModal.classList.add("search-modal");
|
||||
document.querySelector("main").appendChild(searchResultModal);
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
searchField.addEventListener("input", function () {
|
||||
|
||||
if (!searchField.value.trim()) {
|
||||
searchResultModal.classList.remove("active");
|
||||
searchWrapper.classList.remove("searching");
|
||||
clearTimeout(searchTimeout);
|
||||
return;
|
||||
}
|
||||
|
||||
searchWrapper.classList.add("searching");
|
||||
clearTimeout(searchTimeout);
|
||||
|
||||
searchTimeout = setTimeout(function () {
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/search/movie?api_key=${api_key}&query=${searchField.value}&page=1&include_adult=false`, function ({ results: movieList }) {
|
||||
|
||||
searchWrapper.classList.remove("searching");
|
||||
searchResultModal.classList.add("active");
|
||||
searchResultModal.innerHTML = ""; // remove old results
|
||||
|
||||
searchResultModal.innerHTML = `
|
||||
<p class="label">Results for</p>
|
||||
|
||||
<h1 class="heading">${searchField.value}</h1>
|
||||
|
||||
<div class="movie-list">
|
||||
<div class="grid-list"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
searchResultModal.querySelector(".grid-list").appendChild(movieCard);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}, 500);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, fetchDataFromServer } from "./api.js";
|
||||
|
||||
|
||||
export function sidebar() {
|
||||
|
||||
const excludedGenres = ["Drama", "Romance"];
|
||||
const genreList = {};
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/genre/movie/list?api_key=${api_key}`, function ({ genres }) {
|
||||
const filteredGenres = genres.filter(genre => !excludedGenres.includes(genre.name));
|
||||
|
||||
for (const { id, name } of filteredGenres) {
|
||||
genreList[id] = name;
|
||||
}
|
||||
|
||||
genreLink();
|
||||
});
|
||||
|
||||
const sidebarInner = document.createElement("div");
|
||||
sidebarInner.classList.add("sidebar-inner");
|
||||
|
||||
sidebarInner.innerHTML = `
|
||||
<div class="sidebar-list">
|
||||
<p class="title">Genre</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<p class="copyright">
|
||||
<h6>All Rights Reserved.</h6>
|
||||
Copyright 2024 <a href="https://tdvorak.site" target="_blank">Tomas Dvorak </a>
|
||||
</p>
|
||||
|
||||
<p>Powered by
|
||||
<img src="./assets/images/tmdb-logo.svg" width="130" height="17" alt="the movie database logo">
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
const genreLink = function () {
|
||||
|
||||
for (const [genreId, genreName] of Object.entries(genreList)) {
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.classList.add("sidebar-link");
|
||||
link.setAttribute("href", "./movie-list.html");
|
||||
link.setAttribute("menu-close", "");
|
||||
link.setAttribute("onclick", `getMovieList("with_genres=${genreId}", "${genreName}")`);
|
||||
link.textContent = genreName;
|
||||
|
||||
sidebarInner.querySelectorAll(".sidebar-list")[0].appendChild(link);
|
||||
|
||||
}
|
||||
|
||||
const sidebar = document.querySelector("[sidebar]");
|
||||
sidebar.appendChild(sidebarInner);
|
||||
toggleSidebar(sidebar);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const toggleSidebar = function (sidebar) {
|
||||
|
||||
|
||||
const sidebarBtn = document.querySelector("[menu-btn]");
|
||||
const sidebarTogglers = document.querySelectorAll("[menu-toggler]");
|
||||
const sidebarClose = document.querySelectorAll("[menu-close]");
|
||||
const overlay = document.querySelector("[overlay]");
|
||||
|
||||
addEventOnElements(sidebarTogglers, "click", function () {
|
||||
sidebar.classList.toggle("active");
|
||||
sidebarBtn.classList.toggle("active");
|
||||
overlay.classList.toggle("active");
|
||||
});
|
||||
|
||||
addEventOnElements(sidebarClose, "click", function () {
|
||||
sidebar.classList.remove("active");
|
||||
sidebarBtn.classList.remove("active");
|
||||
overlay.classList.remove("active");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user