From 60f0ec23fc274352f49e3974e58ecc466a9fd3bc Mon Sep 17 00:00:00 2001 From: Florian BOUILLON Date: Mon, 29 Mar 2021 14:01:25 +0200 Subject: [PATCH] Updated Navbar Component Signed-off-by: Florian BOUILLON --- src/dzeio/Navbar/Navbar.module.styl | 155 +++++++++++++++++++++------- src/dzeio/Navbar/NavbarSpace.tsx | 11 -- src/dzeio/Navbar/index.tsx | 150 ++++++++++++++++++++------- src/index.ts | 2 - 4 files changed, 230 insertions(+), 88 deletions(-) delete mode 100644 src/dzeio/Navbar/NavbarSpace.tsx diff --git a/src/dzeio/Navbar/Navbar.module.styl b/src/dzeio/Navbar/Navbar.module.styl index e4c01a6..f76143a 100644 --- a/src/dzeio/Navbar/Navbar.module.styl +++ b/src/dzeio/Navbar/Navbar.module.styl @@ -1,49 +1,124 @@ -@import "../config" +@import '../config' -.navbar - width 100% - height 70px - padding 16px - position absolute - top 0 +.body + margin-left 300px + transition margin-left $transition + + &.short + margin-left 56px + +.sidebar + background $foregroundLight + @media (prefers-color-scheme dark) + background $foregroundDark + position fixed left 0 - border-bottom 1px solid white + top 0 + height 100vh + width 300px + z-index 100 + display flex + flex-direction column + & + transition width $transition + .header + .userSpace + .header .imgContainer + > ul span + // transition all $transition + transition-property width, padding, margin, max-width + transition-duration $transitionTime + transition-timing-function $transitionFunction + overflow hidden + > ul span + width calc(100% - 40px) + max-width 100% - &.small - padding-left 216px + .userSpaceParent + background $backgroundLight + @media (prefers-color-scheme dark) + background $backgroundDark -.alignRight - text-align right + .userSpace + cursor pointer + user-select none + padding 16px + width 100% + max-width 100% + min-height 56px + p + overflow hidden + p:last-child:not(:first-child) + margin-top 8px + font-style italic + font-size rem(14) -.favicon img - height 38px - border-radius 8px - border 2px solid white - padding 2px - background white - width 38px + p:first-child + font-weight 500 + svg + vertical-align top + transition transform $transition + &.menuActive + transform rotateX(180deg) -.userIcon img - padding 0 - cursor pointer + .userMenu + max-height 0px + transition all $transition -.text - display inline-block - margin 0 - height 38px - line-height 1 - font-weight bold - font-size rem(20) - padding 7px 0 11px 16px - text-decoration none - color white - cursor pointer + ul + padding-bottom 16px + a + padding 16px 0 -.spacer - height 70px + &.menuActive + // TODO find better way to animate this shit + max-height 100% -.icon - padding 7px 16px - color white - box-sizing content-box - cursor pointer + &.short + width 56px + .header > div + padding 0 + .header .imgContainer + .userSpace + > ul span + width 0 + padding 0 + margin 0 + max-width 0 + + .header + min-height 70px + > div + padding 0 + &:first-child + padding 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 + &:hover + &.active + background-image $mainGradient + color white + svg + margin-left 16px + span + padding-left 16px + height inherit diff --git a/src/dzeio/Navbar/NavbarSpace.tsx b/src/dzeio/Navbar/NavbarSpace.tsx deleted file mode 100644 index 44f8787..0000000 --- a/src/dzeio/Navbar/NavbarSpace.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -import css from './Navbar.module.styl' - -export default class NavbarSpace extends React.Component { - - public render = () => ( -
- ) - -} diff --git a/src/dzeio/Navbar/index.tsx b/src/dzeio/Navbar/index.tsx index 450c203..469dfd9 100644 --- a/src/dzeio/Navbar/index.tsx +++ b/src/dzeio/Navbar/index.tsx @@ -1,48 +1,128 @@ -import React from 'react' -import Link from 'next/link' -import Row from '../Row' +import Router from 'next/router' + +import Image, { ImageProps } from 'next/image' +import React, { FC } from 'react' +import { ChevronDown, ChevronsRight, X } from 'react-feather' +import Text from '../Text' import Col from '../Col' -import Image from '../Image' +import Row from '../Row' +import Link from '../Link' +import { buildClassName } from '../Util' + import css from './Navbar.module.styl' - interface Props { - logo?: { - link?: string - label?: string - src: string - alt?: string + type: 'navbar' | 'sidebar' + logo: ImageProps + user?: { + name: string + description?: string + settings?: string + menu?: { + links: Array<{ + path: string + name: string + }> + informations?: JSX.Element + } } + items: Array<{ + path: string + icon: FC + name: string + }> } -export default class Navbar extends React.Component { +interface State { + path?: string + short: boolean + menuActive: boolean +} + +export default class Navbar extends React.Component { + + public state: State = { + short: false, + menuActive: false + } + + public componentDidMount() { + this.setState({path: Router.asPath}) + Router.events.on('routeChangeComplete', () => { + this.setState({path: Router.asPath}) + }) + document.body.classList.add(css.body) + if (this.state.short) { + document.body.classList.add(css.short) + } + } + + public componentDidUpdate() { + if (this.state.short) { + document.body.classList.add(css.short) + } else { + document.body.classList.remove(css.short) + + } + } + + public componentWillUnmount() { + document.body.classList.remove(css.body, css.short) + } public render = () => ( -