Merge branch 'feature/sidebar-transition' into 'main'
Added transition to the sidebar See merge request neshura-websites/readyornot!5
This commit is contained in:
commit
086fa54a02
2 changed files with 28 additions and 12 deletions
|
@ -17,9 +17,9 @@ const Sidebar = () => {
|
|||
const isMobile = useWindowSize();
|
||||
const router = useRouter();
|
||||
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);
|
||||
}
|
||||
|
||||
|
@ -47,13 +47,15 @@ const Sidebar = () => {
|
|||
return (
|
||||
<>
|
||||
<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) => (
|
||||
<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>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className={styles.sidebarArrow}>
|
||||
<Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
|
||||
</div>
|
||||
|
|
|
@ -174,15 +174,16 @@
|
|||
|
||||
.sidebarList {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background-color: var(--background_grey_opaque);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
|
@ -190,15 +191,28 @@
|
|||
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 {
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
width: 97%;
|
||||
transition-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.sl_inactive {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
transition-delay: 0s, 0.3s;
|
||||
}
|
||||
|
||||
.navElem {
|
||||
white-space:nowrap;
|
||||
font-size: 14pt;
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
|
|
Reference in a new issue