Parcourir la source

Make TopBar optional in some layouts

The existence of the TopBar widget depends on some props related to it.
master
TheoryOfNekomata il y a 3 ans
Parent
révision
642192f4ac
6 fichiers modifiés avec 79 ajouts et 31 suppressions
  1. +15
    -6
      src/layouts/Basic/index.tsx
  2. +16
    -6
      src/layouts/BasicNarrow/index.tsx
  3. +1
    -1
      src/layouts/LeftSidebar/index.tsx
  4. +18
    -8
      src/layouts/LeftSidebarWithMenu/index.tsx
  5. +16
    -7
      src/layouts/RightSidebarStatic/index.tsx
  6. +13
    -3
      src/widgets/TopBar/index.tsx

+ 15
- 6
src/layouts/Basic/index.tsx Voir le fichier

@@ -34,12 +34,21 @@ export const Layout: React.FC<Props> = ({
return (
<>
<Config />
<TopBar
brand={brand}
userLink={userLink}
>
{topBarCenter}
</TopBar>
{
(
brand
|| userLink
|| topBarCenter
)
&& (
<TopBar
brand={brand}
userLink={userLink}
>
{topBarCenter}
</TopBar>
)
}
<ContentBase>
{children}
</ContentBase>


+ 16
- 6
src/layouts/BasicNarrow/index.tsx Voir le fichier

@@ -34,12 +34,22 @@ export const Layout: React.FC<Props> = ({
return (
<>
<Config />
<TopBar
brand={brand}
userLink={userLink}
>
{topBarCenter}
</TopBar>
{
(
brand
|| userLink
|| topBarCenter
)
&& (
<TopBar
span="narrow"
brand={brand}
userLink={userLink}
>
{topBarCenter}
</TopBar>
)
}
<ContentBase>
{children}
</ContentBase>


+ 1
- 1
src/layouts/LeftSidebar/index.tsx Voir le fichier

@@ -108,7 +108,7 @@ export const Layout: React.FC<Props> = ({
)
}
<TopBar
wide
span="wide"
brand={brand}
menuLink={menuLink}
userLink={userLink}


+ 18
- 8
src/layouts/LeftSidebarWithMenu/index.tsx Voir le fichier

@@ -350,14 +350,24 @@ export const Layout: React.FC<Props> = ({
)
}
<>
<TopBar
wide
brand={brand}
menuLink={sidebarMain ? menuLink : undefined}
userLink={userLink}
>
{topBarCenter}
</TopBar>
{
(
brand
|| userLink
|| topBarCenter
|| sidebarMain
)
&& (
<TopBar
span="wide"
brand={brand}
menuLink={sidebarMain ? menuLink : undefined}
userLink={userLink}
>
{topBarCenter}
</TopBar>
)
}
<SidebarBase>
<SidebarMenu>
<SidebarMenuSize>


+ 16
- 7
src/layouts/RightSidebarStatic/index.tsx Voir le fichier

@@ -75,13 +75,22 @@ export const Layout: React.FC<Props> = ({
return (
<>
<Config />
<TopBar
wide
brand={brand}
userLink={userLink}
>
{topBarCenter}
</TopBar>
{
(
brand
|| userLink
|| topBarCenter
)
&& (
<TopBar
span="wide"
brand={brand}
userLink={userLink}
>
{topBarCenter}
</TopBar>
)
}
<ContentBase>
{children}
</ContentBase>


+ 13
- 3
src/widgets/TopBar/index.tsx Voir le fichier

@@ -35,6 +35,10 @@ const Container = styled('div')({
alignItems: 'center',
})

const NarrowContainer = styled(Container)({
maxWidth: configVar('base-width'),
})

const WideContainer = styled(Container)({
...minWidthFactor(3)({
maxWidth: `calc(${configVar('base-width')} * 3)`,
@@ -82,21 +86,27 @@ const MenuLinkContainer = styled(LinkContainer)({
}),
})

const CONTAINER_COMPONENTS = {
narrow: NarrowContainer,
normal: Container,
wide: WideContainer,
}

type Props = {
wide?: boolean,
span?: keyof typeof CONTAINER_COMPONENTS,
brand?: React.ReactNode,
menuLink?: React.ReactNode,
userLink?: React.ReactNode,
}

const TopBar: React.FC<Props> = ({
wide,
span = 'normal',
brand,
menuLink,
userLink,
children,
}) => {
const ContainerComponent = wide ? WideContainer : Container
const { [span as keyof typeof CONTAINER_COMPONENTS]: ContainerComponent = Container } = CONTAINER_COMPONENTS
return (
<Base>
<ContainerComponent>


Chargement…
Annuler
Enregistrer