Am making a archive.org like website but the sidebar is a sidebar on desktop but going to localhost on my phone is under everything else am using node.js and EJS the header is just a title and mainifest. It sussposed to be you click on actions to unhide/show the sidebar but it places it under the other stuff
torrent.ejs
<head>
<%- include('partials/head') %>
<script type="module" src="https://md-block.verou.me/md-block.js"></script>
<script src="/js/md2ab.js"></script>
<script src="/js/vote.js"></script>
</head>
<body class="text-gray-100">
<%- include('partials/navbar', { session: session }) %>
<!-- Sidebar toggle button for mobile -->
<button id="sidebar-toggle" class="lg:hidden bg-purple-600 text-white p-3 rounded fixed bottom-4 right-4 z-50 transition transform hover:scale-105">
Actions
</button>
<div class="flex flex-col min-h-screen lg:flex-row">
<!-- Sidebar -->
<aside id="sidebar" class="w-full bg-gray-800 p-6 lg:w-64 lg:block lg:relative lg:h-auto fixed bottom-0 lg:bottom-auto lg:left-0 lg:top-0 transform -translate-x-full lg:translate-x-0 opacity-0 lg:opacity-100 transition-transform transition-opacity duration-500 ease-out">
<h2 class="text-xl font-bold mb-4 text-purple-300">Actions</h2>
<div class="mt-2 mb-4">
<p class="text-gray-400">Rating: <span class="text-purple-400"><%= torrent.votes || 0 %></span></p>
<p class="text-gray-400">Views: <span class="text-purple-400"><%= torrent.views || 0 %></span></p>
</div>
<% if (torrent.magnet) { %>
<div class="space-y-4">
<a href="/uploads/<%= torrent.torrent %>" download class="block text-purple-500 hover:underline">Download Torrent</a>
<a href="<%= torrent.magnet %>" target="_blank" class="block text-purple-500 hover:underline">Open Magnet</a>
<% if (torrent.directDownload) { %>
<a href="<%= torrent.directDownload %>" target="_blank" class="block text-purple-500 hover:underline transition transform hover:scale-105" onclick="window.open('<%= torrent.directDownload %>', '_blank', 'width=800,height=600'); return false;">Direct download</a>
<% } %>
<% if (torrent.sourceURL) { %>
<a href="<%= torrent.sourceURL %>" target="_blank" class="block text-purple-500 hover:underline transition transform hover:scale-105">Source</a>
<% } %>
<% if (torrent.normalSource) { %>
<a href="<%= torrent.normalSource %>" target="_blank" class="block text-purple-500 hover:underline transition transform hover:scale-105">Normal Source</a>
<% } %>
<% if (torrent.streamURL) { %>
<a href="<%= torrent.streamURL %>" target="_blank" class="block text-purple-500 hover:underline transition transform hover:scale-105" onclick="window.open('<%= torrent.streamURL %>', '_blank', 'width=800,height=600'); return false;">Stream</a>
<% } %>
<button onclick="downloadTorrentAsJSON()" class="block text-purple-500 hover:underline transition transform hover:scale-105">Download as JSON</button>
</div>
<% } %>
<div class="mt-6">
<% if (session.userId) { %>
<% if (torrent.userVotes && torrent.userVotes[session.userId]) { %>
<p class="text-gray-400">You have already <%= torrent.userVotes[session.userId] %>d on this torrent.</p>
<% } else { %>
<form action="/torrent/<%= torrent.id %>/vote" method="post">
<input type="hidden" name="vote" id="voteType" value="">
<div class="flex space-x-2">
<button type="button" onclick="submitVote('upvote')" class="text-green-500 hover:underline transition transform hover:scale-105">Upvote</button>
<button type="button" onclick="submitVote('downvote')" class="text-red-500 hover:underline transition transform hover:scale-105">Downvote</button>
</div>
</form>
<% } %>
<% } %>
</div>
<% if (session.userId && session.userId !== torrent.uploadedBy) { %>
<div class="flex justify-center mt-6">
<form action="/torrent/<%= torrent.id %>/report" method="post">
<button type="submit" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded w-full transition transform hover:scale-105">
Report
</button>
</form>
</div>
<% } %>
<% if (session.userId && session.userId === torrent.uploadedBy) { %>
<div class="flex justify-center mt-6">
<a href="/torrent/<%= torrent.id %>/edit" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition transform hover:scale-105">
Edit
</a>
</div>
<% } %>
</aside>
<!-- Main Content -->
<main class="flex-1 bg-gray-900 p-6">
<div class="main-content flex flex-col lg:flex-row gap-8 opacity-0 transform scale-95 transition-opacity transition-transform duration-600 ease-out">
<div class="torrent-details bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl w-full">
<header class="mb-6">
<h1 class="text-xl font-semibold text-purple-400"><%= torrent.name %></h1>
</header>
<div class="space-y-4">
<% if (torrent.icon) { %>
<img src="/uploads/<%= torrent.icon %>" alt="<%= torrent.name %>" class="w-full h-auto mb-4 rounded-lg">
<% } %>
<% if (torrent.seedsersAtTime) { %>
<p class="text-gray-300"><strong>Seeders At Time: <%= torrent.seedsersAtTime %></strong></p>
<% } %>
<p class="text-gray-300"><strong>Description:</strong>
<md-block> <%= torrent.description %></md-block>
</p>
<p class="text-gray-300">
<strong>Added By:</strong>
<a href="/profile/<%= torrent.uploadedBy %>" class="text-purple-500 hover:underline">
<%= torrent.username || 'Unknown' %>
</a>
</p>
<p class="text-gray-300"><strong>Added On:</strong> <%= new Date(torrent.uploadedAt).toLocaleDateString() %></p>
<!-- Tags section -->
<% if (torrent.tags && torrent.tags.length > 0) { %>
<p class="text-gray-300"><strong>Tags:</strong>
<span class="flex flex-wrap space-x-2 mt-2">
<% torrent.tags.forEach(tag => { %>
<a href="/tags/<%= tag %>" class="bg-purple-500 text-white py-1 px-3 rounded-full mb-2 hover:bg-purple-400 transition"><%= tag %></a>
<% }) %>
</span>
</p>
<% } %>
</div>
</div>
<div class="comments-section flex-1 bg-gray-900 p-6">
<section>
<h2 class="text-lg font-semibold text-purple-400 mb-4">Comments</h2>
<div class="comments-list mt-4 space-y-4 bg-gray-800 p-6 rounded-lg shadow-lg">
<% if (comments.length > 0) { %>
<% comments.forEach(comment => { %>
<div class="comment-item bg-gray-700 p-4 rounded-lg shadow-md">
<p class="comment-text text-gray-300 break-words whitespace-pre-wrap">
<strong class="text-purple-400"><%= comment.username %>:</strong> <%= comment.text %>
</p>
</div>
<% }) %>
<% } else { %>
<p class="text-gray-400">No comments yet.</p>
<% } %>
</div>
<% if (session.userId) { %>
<form action="/torrent/<%= torrent.id %>/comment" method="post" class="comment-form mt-6">
<textarea name="comment" rows="3" class="w-full p-3 bg-gray-700 text-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Add your comment..."></textarea>
<button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg mt-2 transition transform hover:scale-105">
Post Comment
</button>
</form>
<% } %>
</section>
</div>
</div>
</main>
</div>
<script>
function downloadTorrentAsJSON() {
const torrentData = <%- JSON.stringify(torrent) %>;
const blob = new Blob([JSON.stringify(torrentData, null, 2)], {
type: 'application/json'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '<%= torrent.name %>.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Trigger the loaded state for animations
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.add("loaded");
const aside = document.querySelector("aside");
if (aside) {
aside.classList.remove("transform", "-translate-x-full", "opacity-0");
}
const mainContent = document.querySelector(".main-content");
if (mainContent) {
mainContent.classList.remove("opacity-0", "scale-95");
}
});
// Sidebar toggle for mobile
const sidebarToggle = document.getElementById('sidebar-toggle');
const sidebar = document.getElementById('sidebar');
sidebarToggle.addEventListener('click', function() {
sidebar.classList.toggle('-translate-x-full');
sidebar.classList.toggle('opacity-100');
});
</script>
</body>
I have tried moveing the sidebar and asking a AI what’s worng with it but nothing seems to work.
New contributor
HttpAnimations is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.