From d7a09a4dcddcc36d2180131231f94fdc1c93d52d Mon Sep 17 00:00:00 2001 From: Avior Date: Mon, 29 Mar 2021 18:49:23 +0200 Subject: [PATCH] Finished Work On Navbar Signed-off-by: Avior --- src/dzeio/Loader/Loader.module.styl | 1 + src/dzeio/Navbar/Navbar.module.styl | 152 +++++++++++++++++--- src/dzeio/Navbar/index.tsx | 216 ++++++++++++++++++++-------- 3 files changed, 288 insertions(+), 81 deletions(-) diff --git a/src/dzeio/Loader/Loader.module.styl b/src/dzeio/Loader/Loader.module.styl index 9247aad..04f2252 100644 --- a/src/dzeio/Loader/Loader.module.styl +++ b/src/dzeio/Loader/Loader.module.styl @@ -6,6 +6,7 @@ width 100% height 7px pointer-events none + z-index 200 top 0 &.hide diff --git a/src/dzeio/Navbar/Navbar.module.styl b/src/dzeio/Navbar/Navbar.module.styl index f76143a..b89d3ae 100644 --- a/src/dzeio/Navbar/Navbar.module.styl +++ b/src/dzeio/Navbar/Navbar.module.styl @@ -1,11 +1,68 @@ @import '../config' -.body - margin-left 300px - transition margin-left $transition +// $transition = 10s linear +// $transitionTime = 10s +// $transitionFunction = linear +.body-sidebar + margin-left 300px + transition margin-left $transition + &.short + margin-left 56px + +.body-navbar + margin-top 70px + +.navbar + background $foregroundLight + @media (prefers-color-scheme dark) + background $foregroundDark + position fixed + left 0 + top 0 + height 70px + width 100% + z-index 100 + display flex + padding 16px + + > ul, .userSpaceParent ul + display flex + + li:first-child p + margin-left 0 + + > ul p, .userSpaceParent > ul p + padding 8px + + margin-left 16px + border-radius 4px + + &.active + background $mainGradient + + .userSpace + + height 100% + display flex + align-items center + cursor pointer + user-select none + svg + margin-left 16px + vertical-align top + + .userMenu + position fixed + top 70px + right 0 + padding 16px + border-bottom-left-radius 4px + transform translateX(100%) + background inherit + transition transform $transition + &.menuActive + transform translateX(0%) - &.short - margin-left 56px .sidebar background $foregroundLight @@ -19,6 +76,11 @@ z-index 100 display flex flex-direction column + + &.mobile + width 100% + z-index 101 + & transition width $transition .header @@ -33,21 +95,41 @@ > ul span width calc(100% - 40px) max-width 100% + .header p + cursor pointer .userSpaceParent background $backgroundLight @media (prefers-color-scheme dark) background $backgroundDark + > ul, .userSpaceParent ul + display flex + padding 16px + justify-content center + + li:first-child p + margin-left 0 + + > ul p, .userSpaceParent > ul p + padding 8px + + margin-left 16px + border-radius 4px + + &.active + background $mainGradient + .userSpace cursor pointer user-select none padding 16px width 100% max-width 100% - min-height 56px + min-height 86px p overflow hidden + white-space nowrap p:last-child:not(:first-child) margin-top 8px font-style italic @@ -65,11 +147,6 @@ max-height 0px transition all $transition - ul - padding-bottom 16px - a - padding 16px 0 - &.menuActive // TODO find better way to animate this shit max-height 100% @@ -82,43 +159,72 @@ .userSpace > ul span width 0 - padding 0 + padding-left 0 + padding-right 0 margin 0 max-width 0 + .header min-height 70px > div padding 0 &:first-child - padding 16px + padding-left 16px p > div padding 16px hr margin 0 - ul - list-style none - margin 0 - padding 0 - > ul li width 100% p padding 16px 0 display flex align-items center - // TODO Currently Gradient aren't supported by Transition - // transition-property background-image, color - // transition-duration $transitionTime - // transition-timing-function $transitionFunction + z-index 111 + position relative + + // Temporary fix the transition for linear-gradient + &::before + transition opacity $transition + opacity 0 + width 100% + height 100% + content " " + position absolute + z-index -1 + background-image $mainGradient &:hover &.active - background-image $mainGradient color white + &::before + opacity 1 svg margin-left 16px span padding-left 16px height inherit + +.navbar, .sidebar + ul + list-style none + margin 0 + padding 0 + +.userMenu + padding-bottom 16px + a + padding 16px 0 + + +.mobileMenu + opacity 0 + transition opacity $transition + &.shown + opacity 1 + +.mainGradient + //WIP + fill $mainGradient diff --git a/src/dzeio/Navbar/index.tsx b/src/dzeio/Navbar/index.tsx index 469dfd9..dfd79bf 100644 --- a/src/dzeio/Navbar/index.tsx +++ b/src/dzeio/Navbar/index.tsx @@ -2,7 +2,7 @@ import Router from 'next/router' import Image, { ImageProps } from 'next/image' import React, { FC } from 'react' -import { ChevronDown, ChevronsRight, X } from 'react-feather' +import { ChevronDown, ChevronsRight, Menu, X } from 'react-feather' import Text from '../Text' import Col from '../Col' import Row from '../Row' @@ -13,7 +13,9 @@ import css from './Navbar.module.styl' interface Props { type: 'navbar' | 'sidebar' - logo: ImageProps + logo: ImageProps & {height: number, width: number} + loginUrl?: string + registerUrl?: string user?: { name: string description?: string @@ -31,11 +33,13 @@ interface Props { icon: FC name: string }> + mobileMenu?: () => void } interface State { path?: string short: boolean + isMobile: boolean menuActive: boolean } @@ -43,86 +47,182 @@ export default class Navbar extends React.Component { public state: State = { short: false, + isMobile: false, menuActive: false } public componentDidMount() { - this.setState({path: Router.asPath}) - Router.events.on('routeChangeComplete', () => { - this.setState({path: Router.asPath}) + this.setState({ + path: Router.asPath, + menuActive: !!this.props.mobileMenu }) - document.body.classList.add(css.body) - if (this.state.short) { - document.body.classList.add(css.short) + Router.events.on('routeChangeComplete', () => { + this.setState({path: Router.asPath, menuActive: false}) + }) + Router.events.on('routeChangeError', () => { + this.setState({path: Router.asPath, menuActive: false}) + }) + if (!this.props.mobileMenu) { + window.addEventListener('resize', this.onResize) + this.onResize() + } + } + + public onResize = () => { + const isMobile = window.innerWidth <= 768 + if (this.state.isMobile !== isMobile) { + this.setState({isMobile}) } } public componentDidUpdate() { - if (this.state.short) { - document.body.classList.add(css.short) - } else { - document.body.classList.remove(css.short) - + if (!this.props.mobileMenu) { + if (this.state.short) { + document.body.classList.add(css.short) + } else { + document.body.classList.remove(css.short) + } + if (this.getType() === 'sidebar') { + document.body.classList.add(css['body-sidebar']) + document.body.classList.remove(css['body-navbar']) + } else { + document.body.classList.remove(css['body-sidebar']) + document.body.classList.add(css['body-navbar']) + } } + } public componentWillUnmount() { - document.body.classList.remove(css.body, css.short) + if (!this.props.mobileMenu) { + document.body.classList.remove(css.short, css[`body-${this.getType()}`]) + window.removeEventListener('resize', this.onResize) + } + } + + public onSidebarButton = () => { + if (!this.props.mobileMenu) { + this.setState({short: !this.state.short, menuActive: false}) + } else { + this.props.mobileMenu() + } + } + + public menuCloseCallback = () => { + this.setState({menuActive: false}) + } + + public getType(): 'sidebar' | 'navbar' { + if (this.props.mobileMenu) { + return 'sidebar' + } + return this.state.isMobile ? 'navbar' : this.props.type } public render = () => ( - + + {!this.props.mobileMenu && this.state.isMobile && ( +
+ +
)} - + ) }