mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-17 22:01:45 +00:00
sidebar blur flxed
This commit is contained in:
Tejas Panchal
@@ -1,33 +1,171 @@
|
||||
.sidebar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
||||
.sidebar-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
pointer-events: auto;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 60;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.sidebar-main {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background-color: #0a0a0a;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
pointer-events: auto;
|
||||
z-index: 70;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.sidebar-main {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-main.sidebar-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.sidebar-content::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
.sidebar-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
.sidebar-content::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
body.sidebar-open {
|
||||
overflow: hidden;
|
||||
padding-right: 5px; /* Prevent layout shift when scrollbar disappears */
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
.sidebar-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Wrapper to maintain scroll position when sidebar is opened */
|
||||
.sidebar-scroll-wrapper {
|
||||
position: absolute;
|
||||
.close-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem 1rem;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.quick-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quick-action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-action-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.language-switcher {
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.lang-button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.lang-button:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.lang-button.active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
color: white;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
@@ -23,19 +23,34 @@ const Sidebar = ({ isOpen, onClose }) => {
|
||||
const location = useLocation();
|
||||
const scrollPosition = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (!isOpen) {
|
||||
scrollPosition.current = window.scrollY;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
scrollPosition.current = window.pageYOffset;
|
||||
document.body.classList.add('sidebar-open');
|
||||
scrollPosition.current = window.scrollY;
|
||||
document.body.style.position = 'fixed';
|
||||
document.body.style.top = `-${scrollPosition.current}px`;
|
||||
document.body.style.width = '100%';
|
||||
} else {
|
||||
document.body.classList.remove('sidebar-open');
|
||||
document.body.style.position = '';
|
||||
document.body.style.top = '';
|
||||
document.body.style.width = '';
|
||||
window.scrollTo(0, scrollPosition.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.classList.remove('sidebar-open');
|
||||
document.body.style.position = '';
|
||||
document.body.style.top = '';
|
||||
document.body.style.width = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
@@ -44,29 +59,25 @@ const Sidebar = ({ isOpen, onClose }) => {
|
||||
}, [location]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sidebar-container" aria-hidden={!isOpen}>
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 transform transition-all duration-400 ease-in-out backdrop-blur-lg bg-black/50"
|
||||
className="sidebar-overlay"
|
||||
onClick={onClose}
|
||||
style={{ zIndex: 1000000 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`fixed h-[100dvh] w-[280px] max-[575px]:w-[260px] top-0 left-0 transform transition-transform duration-300 ease-in-out ${
|
||||
isOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
style={{ zIndex: 1000200 }}
|
||||
<aside
|
||||
className={`sidebar-main ${isOpen ? 'sidebar-open' : ''}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
className="bg-[#0a0a0a] w-full h-full flex flex-col items-start overflow-y-auto sidebar"
|
||||
>
|
||||
<div className="sidebar-content">
|
||||
{/* Header */}
|
||||
<div className="w-full p-6 border-b border-white/5">
|
||||
<div className="sidebar-header">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full flex items-center justify-center gap-2 py-2.5 px-4 bg-white/10 hover:bg-white/15 rounded-lg transition-colors"
|
||||
className="close-button"
|
||||
>
|
||||
<FaChevronLeft className="text-sm" />
|
||||
<span className="text-sm font-medium">Close Menu</span>
|
||||
@@ -74,33 +85,29 @@ const Sidebar = ({ isOpen, onClose }) => {
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="w-full p-4 border-b border-white/5 lg:hidden">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="quick-actions">
|
||||
<div className="quick-actions-grid">
|
||||
<Link
|
||||
to="/random"
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
|
||||
className="quick-action-item"
|
||||
>
|
||||
<FontAwesomeIcon icon={faRandom} className="text-lg" />
|
||||
<span className="text-xs font-medium">Random</span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/movie"
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
|
||||
className="quick-action-item"
|
||||
>
|
||||
<FontAwesomeIcon icon={faFilm} className="text-lg" />
|
||||
<span className="text-xs font-medium">Movie</span>
|
||||
</Link>
|
||||
<div className="flex flex-col items-center gap-2 p-3 rounded-lg bg-white/5">
|
||||
<div className="flex bg-white/10 rounded">
|
||||
{["EN", "JP"].map((lang, index) => (
|
||||
<div className="quick-action-item">
|
||||
<div className="language-switcher">
|
||||
{["EN", "JP"].map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => toggleLanguage(lang)}
|
||||
className={`px-2 py-1 text-xs font-medium transition-colors ${
|
||||
language === lang
|
||||
? "bg-white/15 text-white"
|
||||
: "text-white/60 hover:text-white"
|
||||
}`}
|
||||
className={`lang-button ${language === lang ? 'active' : ''}`}
|
||||
>
|
||||
{lang}
|
||||
</button>
|
||||
@@ -112,21 +119,21 @@ const Sidebar = ({ isOpen, onClose }) => {
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="w-full p-2">
|
||||
<nav className="menu-items">
|
||||
{MENU_ITEMS.map((item, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
to={item.path}
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors"
|
||||
className="menu-item"
|
||||
>
|
||||
<FontAwesomeIcon icon={item.icon} className="text-lg w-5" />
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ function Contact() {
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<a
|
||||
href="https://t.me/zenime_discussion"
|
||||
href="#"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 px-4 py-3 bg-white/5 hover:bg-white/10 rounded-lg transition-colors group"
|
||||
|
||||
Reference in New Issue
Block a user