Neshweb-Sites/readyornot
Neshweb-Sites/readyornot
Archived
1
0
Fork 0
Code Issues 6 Pull requests Releases 1 Packages Activity Actions

Added transition to the sidebar

Browse source
This commit is contained in:
Neshura 2022-12-09 21:38:23 +01:00
parent 989b9e5ae9
commit e767db6017
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
2 changed files with 28 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/sidebar.tsx
View file

@ -17,9 +17,9 @@ const Sidebar = () => {
const isMobile = useWindowSize(); const isMobile = useWindowSize();
const router = useRouter(); const router = useRouter();
const [active, setActive] = useState(isMobile); const [active, setActive] = useState(isMobile);
const { maps, isLoading, isError }:{ maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean} = useNavbar(); const { maps, isLoading, isError }: { maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean } = useNavbar();
if(typeof(isMobile) === "boolean" && typeof(active) === "undefined") { if (typeof (isMobile) === "boolean" && typeof (active) === "undefined") {
setActive(!isMobile); setActive(!isMobile);
} }
@ -47,13 +47,15 @@ const Sidebar = () => {
return ( return (
<> <>
<div className={styles.sidebar} onClick={() => setActive(!active)}> <div className={styles.sidebar} onClick={() => setActive(!active)}>
<nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}> <div className={[styles.sl_wrapper, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
<nav className={styles.sidebarList}>
{maps.map((item) => ( {maps.map((item) => (
<Link key={item.name} href={item.href}> <Link key={item.name} href={item.href}>
<a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a> <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
</Link> </Link>
))} ))}
</nav> </nav>
</div>
<div className={styles.sidebarArrow}> <div className={styles.sidebarArrow}>
<Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} /> <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
</div> </div>

20
styles/ReadyOrNot.module.css
View file

@ -174,15 +174,16 @@
.sidebarList { .sidebarList {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none; scrollbar-width: none;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 2rem;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
background-color: var(--background_grey_opaque); background-color: var(--background_grey_opaque);
padding: 2rem;
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
@ -190,15 +191,28 @@
background: transparent; background: transparent;
} }
.sl_wrapper {
height: 100%;
overflow: hidden;
transition-property: width, visibility;
transition-timing-function: ease-in-out, linear;
transition-duration: 0.3s, 0s;
}
.sl_active { .sl_active {
display: flex; visibility: visible;
width: 97%;
transition-delay: 0s, 0s;
} }
.sl_inactive { .sl_inactive {
display: none; visibility: hidden;
width: 0;
transition-delay: 0s, 0.3s;
} }
.navElem { .navElem {
white-space:nowrap;
font-size: 14pt; font-size: 14pt;
width: auto; width: auto;
border-radius: 5px; border-radius: 5px;