new sidebar

2026-01-27 02:19:42 +00:00 · 2025-06-30 14:20:54 +03:00
parent c03e77ee63
commit 9172e2055a
55 changed files with 600 additions and 510 deletions
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <html>
  <head>
    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -167,7 +167,7 @@ export const App: FC<TAppProps> = ({ isFederation, forcedTheme }) => {
              trackHoverBg: colors?.colorText,
            },
            Menu: {
-              itemBg: colors?.colorBgContainer,
+              itemBg: colors?.colorBgLayout,
              itemHoverBg: colors?.colorBgContainer,
              itemActiveBg: colors?.colorInfoBg,
              itemSelectedBg: colors?.colorInfoBg,
--- a/src/components/atoms/BackLink/BackLink.tsx
+++ b/src/components/atoms/BackLink/BackLink.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { To } from 'react-router-dom'
 import { ArrowLeftOutlined } from '@ant-design/icons'
-import { TitleWithNoTopMargin } from '../TitleWithNoTopMargin'
+import { TitleWithNoMargin } from '../TitleWithNoMargin'
 import { Styled } from './styled'

 type TBackLinkProps = {
@@ -14,11 +14,11 @@ export const BackLink: FC<TBackLinkProps> = ({ to, title }) => {
  return (
    <Styled.Container>
      <Styled.CustomLink to={to}>
-        <TitleWithNoTopMargin level={4}>
+        <TitleWithNoMargin level={5}>
          <ArrowLeftOutlined />
-        </TitleWithNoTopMargin>
+        </TitleWithNoMargin>
      </Styled.CustomLink>
-      <TitleWithNoTopMargin level={4}>{title}</TitleWithNoTopMargin>
+      <TitleWithNoMargin level={5}>{title}</TitleWithNoMargin>
    </Styled.Container>
  )
 }
--- a/src/components/atoms/BackLink/styled.ts
+++ b/src/components/atoms/BackLink/styled.ts
@@ -1,13 +1,16 @@
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
-import { BACKLINK_HEIGHT, BACKLINK_MARGIN_TOP } from 'constants/blocksSizes'
+import { BACKLINK_HEIGHT } from 'constants/blocksSizes'

 const Container = styled.div`
  display: flex;
  gap: 8px;
  align-items: baseline;
-  margin-top: ${BACKLINK_MARGIN_TOP}px;
  height: ${BACKLINK_HEIGHT}px;
+
+  * {
+    white-space: nowrap;
+  }
 `

 const CustomLink = styled(Link)`
--- a/src/components/atoms/DefaultLayout/DefaultLayout.ts
+++ b/src/components/atoms/DefaultLayout/DefaultLayout.ts
@@ -1,12 +1,5 @@
 import styled from 'styled-components'
-import {
-  HEAD_FIRST_ROW,
-  HEAD_SECOND_ROW,
-  HEAD_BORDER_BOTTOM,
-  FOOTER_HEIGHT,
-  MAIN_CONTENT_VERTICAL_PADDING,
-  MAIN_CONTENT_HORIZONTAL_PADDING,
-} from 'constants/blocksSizes'
+import { HEAD_FIRST_ROW, FOOTER_HEIGHT, MAIN_CONTENT_HORIZONTAL_PADDING } from 'constants/blocksSizes'

 type TLayoutProps = {
  $bgColor: string
@@ -28,9 +21,8 @@ type TContentPaddingProps = {
 }

 const ContentPadding = styled.div<TContentPaddingProps>`
-  padding: ${({ $isFederation }) =>
-    $isFederation ? 0 : `${MAIN_CONTENT_VERTICAL_PADDING}px ${MAIN_CONTENT_HORIZONTAL_PADDING}px`};
-  min-height: calc(100vh - ${HEAD_FIRST_ROW}px - ${HEAD_SECOND_ROW}px - ${HEAD_BORDER_BOTTOM}px - ${FOOTER_HEIGHT}px);
+  padding: ${({ $isFederation }) => ($isFederation ? 0 : `0 ${MAIN_CONTENT_HORIZONTAL_PADDING}px`)};
+  min-height: calc(100vh - ${HEAD_FIRST_ROW}px - ${FOOTER_HEIGHT}px);
  display: flex;
  flex-flow: column;
 `
--- a/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/EntrySelect.tsx
+++ b/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/EntrySelect.tsx
@@ -10,9 +10,10 @@ type TEntrySelectProps = {
  value?: string
  onChange: (val: string) => void
  disabled?: boolean
+  fullwidth?: boolean
 }

-export const EntrySelect: FC<TEntrySelectProps> = ({ placeholder, value, disabled, options, onChange }) => {
+export const EntrySelect: FC<TEntrySelectProps> = ({ placeholder, value, disabled, options, onChange, fullwidth }) => {
  return (
    <Select
      placeholder={placeholder}
@@ -20,7 +21,7 @@ export const EntrySelect: FC<TEntrySelectProps> = ({ placeholder, value, disable
      options={options.map(({ value, label }) => ({ label, value }))}
      onChange={(selectedValue: string) => onChange(selectedValue)}
      disabled={disabled}
-      style={{ width: '150px' }}
+      style={{ width: fullwidth ? '100%' : '200px' }}
    />
  )
 }
--- a/src/components/organisms/Header/organisms/Selector/molecules/EntrySelect/index.ts
+++ b/src/components/organisms/Header/organisms/Selector/molecules/EntrySelect/index.ts
--- a/src/components/atoms/NavigationContainer/NavigationContainer.ts
+++ b/src/components/atoms/NavigationContainer/NavigationContainer.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+import { NAV_HEIGHT } from 'constants/blocksSizes'
+
+export const NavigationContainer = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 18px;
+  height: ${NAV_HEIGHT}px;
+  min-height: ${NAV_HEIGHT}px;
+`
--- a/src/components/atoms/NavigationContainer/index.ts
+++ b/src/components/atoms/NavigationContainer/index.ts
@@ -0,0 +1 @@
+export * from './NavigationContainer'
--- a/src/components/atoms/TitleWithNoMargin/TitleWithNoMargin.tsx
+++ b/src/components/atoms/TitleWithNoMargin/TitleWithNoMargin.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+import { Typography } from 'antd'
+
+export const TitleWithNoMargin = styled(Typography.Title)`
+  margin-top: 0;
+  margin-bottom: 0 !important;
+`
--- a/src/components/atoms/TitleWithNoMargin/index.tsx
+++ b/src/components/atoms/TitleWithNoMargin/index.tsx
@@ -0,0 +1 @@
+export * from './TitleWithNoMargin'
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -1,6 +1,7 @@
 export * from './DefaultColorProvider'
 export * from './DefaultLayout'
 export * from './TitleWithNoTopMargin'
+export * from './TitleWithNoMargin'
 export * from './ThemeSelector'
 export * from './FlexEnd'
 export * from './BackLink'
@@ -8,3 +9,5 @@ export * from './FlexGrow'
 export * from './RedirectProjectInfo'
 export * from './RowFlexGrow'
 export * from './FlexCol'
+export * from './NavigationContainer'
+export * from './EntrySelect'
--- a/src/components/molecules/BlackholeForm/BlackholeForm.tsx
+++ b/src/components/molecules/BlackholeForm/BlackholeForm.tsx
@@ -15,14 +15,8 @@ import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGrou
 import {
  HEAD_FIRST_ROW,
  HEAD_SECOND_ROW,
-  HEAD_BORDER_BOTTOM,
  FOOTER_HEIGHT,
-  MAIN_CONTENT_VERTICAL_PADDING,
-  BREADCRUMBS_HEIGHT,
-  AFTER_BREADCRUMBS_SPACE,
-  BACKLINK_HEIGHT,
-  BACKLINK_MARGIN_TOP,
-  AFTER_BACKLINK_SPACE,
+  NAV_HEIGHT,
  CONTENT_CARD_PADDING,
  BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT,
  BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT,
@@ -65,17 +59,12 @@ export const BlackholeForm: FC<TBlackholeFormProps> = ({ data, isCreate, backlin
      window.innerHeight -
      HEAD_FIRST_ROW -
      HEAD_SECOND_ROW -
-      HEAD_BORDER_BOTTOM -
-      MAIN_CONTENT_VERTICAL_PADDING * 2 -
-      BREADCRUMBS_HEIGHT -
-      AFTER_BREADCRUMBS_SPACE -
-      BACKLINK_HEIGHT -
-      BACKLINK_MARGIN_TOP -
-      AFTER_BACKLINK_SPACE -
+      NAV_HEIGHT -
      CONTENT_CARD_PADDING * 2 -
      FOOTER_HEIGHT -
      BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT -
-      BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT
+      BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT -
+      1
    setHeight(height)

    const handleResize = () => {
--- a/src/components/molecules/ManageableSidebar/ManageableSidebar.tsx
+++ b/src/components/molecules/ManageableSidebar/ManageableSidebar.tsx
@@ -4,19 +4,7 @@ import { useLocation, useParams } from 'react-router-dom'
 import { ManageableSidebarWithDataProvider } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import {
-  HEAD_FIRST_ROW,
-  HEAD_SECOND_ROW,
-  HEAD_BORDER_BOTTOM,
-  FOOTER_HEIGHT,
-  MAIN_CONTENT_VERTICAL_PADDING,
-  BREADCRUMBS_HEIGHT,
-  AFTER_BREADCRUMBS_SPACE,
-  BACKLINK_HEIGHT,
-  BACKLINK_MARGIN_TOP,
-  AFTER_BACKLINK_SPACE,
-  CONTENT_CARD_PADDING,
-} from 'constants/blocksSizes'
+import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
 import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
 import { Styled } from './styled'

@@ -44,19 +32,7 @@ export const ManageableSidebar: FC<TManageableSidebarProps> = ({
  const [height, setHeight] = useState(0)

  useEffect(() => {
-    const height =
-      window.innerHeight -
-      HEAD_FIRST_ROW -
-      HEAD_SECOND_ROW -
-      HEAD_BORDER_BOTTOM -
-      MAIN_CONTENT_VERTICAL_PADDING * 2 -
-      BREADCRUMBS_HEIGHT -
-      AFTER_BREADCRUMBS_SPACE -
-      BACKLINK_HEIGHT -
-      BACKLINK_MARGIN_TOP -
-      AFTER_BACKLINK_SPACE -
-      CONTENT_CARD_PADDING * 2 -
-      FOOTER_HEIGHT
+    const height = window.innerHeight - HEAD_FIRST_ROW - SIDEBAR_CLUSTER_HEIGHT - 2
    setHeight(height)

    const handleResize = () => {
@@ -74,6 +50,7 @@ export const ManageableSidebar: FC<TManageableSidebarProps> = ({
    <Styled.Container
      $isDark={theme === 'dark'}
      $colorInfoBg={token.colorInfoBg}
+      $colorBgContainer={token.colorBgContainer}
      $colorFillQuaternary={token.colorFillQuaternary}
      $colorPrimaryHover={token.colorPrimaryHover}
      $colorBorder={token.colorBorder}
--- a/src/components/molecules/ManageableSidebar/styled.ts
+++ b/src/components/molecules/ManageableSidebar/styled.ts
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 type TContainerProps = {
  $isDark?: boolean
  $colorInfoBg?: string
+  $colorBgContainer?: string
  $colorFillQuaternary?: string
  $colorPrimaryHover?: string
  $colorBorder?: string
@@ -11,11 +12,12 @@ type TContainerProps = {

 const Container = styled.div<TContainerProps>`
  width: 250px;
-  padding-right: 20px;
+  padding-right: 1px;
  overflow-y: auto;
  scrollbar-width: thin;
  direction: rtl;
  max-height: ${({ $maxHeight }) => $maxHeight || 'initial'};
+  user-select: none;

  & ul {
    direction: ltr;
@@ -54,20 +56,25 @@ const Container = styled.div<TContainerProps>`

  /* selected header bgcolor */

-  /* && .ant-menu-submenu-selected div {
-    background-color: ${({ $colorInfoBg }) => $colorInfoBg || 'initial'};
+  && .ant-menu-submenu-selected div {
+    background-color: ${({ $colorBgContainer }) => $colorBgContainer || 'initial'};
  }

  && .ant-menu-submenu-selected div:hover {
-    background-color: ${({ $colorInfoBg }) => $colorInfoBg || 'initial'};
-  } */
+    background-color: ${({ $colorBgContainer }) => $colorBgContainer || 'initial'};
+  }

  /* selected shift to right */

+  && .ant-menu-sub .ant-menu-item {
+    transition: padding 0s;
+  }
+
  && .ant-menu-sub .ant-menu-item.ant-menu-item-selected {
-    width: 205px;
+    width: 225px;
    margin-left: 25px !important;
-    padding-left: 20px !important;
+    padding-left: 23px !important;
+    transition: padding 0s;
  }

  /* line before */
--- a/src/components/organisms/Footer/styled.ts
+++ b/src/components/organisms/Footer/styled.ts
@@ -1,7 +1,8 @@
 import styled from 'styled-components'
+import { FOOTER_HEIGHT } from 'constants/blocksSizes'

 const Container = styled.div`
-  height: 50px;
+  height: ${FOOTER_HEIGHT}px;
  display: flex;
  justify-content: center;
  align-items: center;
--- a/src/components/organisms/Header/Header.tsx
+++ b/src/components/organisms/Header/Header.tsx
@@ -1,55 +1,24 @@
 import React, { FC } from 'react'
-import { Flex, theme } from 'antd'
-import { useParams } from 'react-router-dom'
-import { HEAD_FIRST_ROW, HEAD_SECOND_ROW, HEAD_BORDER_BOTTOM } from 'constants/blocksSizes'
-import { Logo, Documentation, ThemeSelector, User, Selector, SelectorInside } from './organisms'
+import { Flex } from 'antd'
+import { HEAD_FIRST_ROW } from 'constants/blocksSizes'
+import { Logo, Documentation, ThemeSelector, User } from './organisms'
 import { Styled } from './styled'

-type THeaderProps = {
-  inside?: boolean
-}
-
-export const Header: FC<THeaderProps> = ({ inside }) => {
-  // const { projectName, instanceName, clusterName, entryType, namespace, syntheticProject } = useParams()
-  const { projectName, instanceName, clusterName, namespace, syntheticProject } = useParams()
-  const { token } = theme.useToken()
-
-  const possibleProject = syntheticProject && namespace ? syntheticProject : namespace
-  const possibleInstance = syntheticProject && namespace ? namespace : undefined
-
+export const Header: FC = () => {
  return (
-    <>
-      <Styled.PaddingContainer $height={HEAD_FIRST_ROW}>
-        <Flex justify="space-between">
-          <div>
-            <Logo />
-          </div>
-          <div>
-            <Flex gap={10}>
-              <Documentation key="SidebarDocumentation" />
-              <ThemeSelector />
-              <User key="SidebarUser" />
-            </Flex>
-          </div>
-        </Flex>
-      </Styled.PaddingContainer>
-      <Styled.BackgroundContainer
-        $bgColor={token.colorFillSecondary}
-        $borderColor={token.colorBorder}
-        $borderSize={HEAD_BORDER_BOTTOM}
-      >
-        <Styled.PaddingContainer $height={HEAD_SECOND_ROW}>
-          {inside ? (
-            <SelectorInside clusterName={clusterName} namespace={namespace} />
-          ) : (
-            <Selector
-              clusterName={clusterName}
-              projectName={projectName || possibleProject}
-              instanceName={instanceName || possibleInstance}
-            />
-          )}
-        </Styled.PaddingContainer>
-      </Styled.BackgroundContainer>
-    </>
+    <Styled.PaddingContainer $height={HEAD_FIRST_ROW}>
+      <Flex justify="space-between">
+        <div>
+          <Logo />
+        </div>
+        <div>
+          <Flex gap={10}>
+            <Documentation key="SidebarDocumentation" />
+            <ThemeSelector />
+            <User key="SidebarUser" />
+          </Flex>
+        </div>
+      </Flex>
+    </Styled.PaddingContainer>
  )
 }
--- a/src/components/organisms/Header/organisms/Selector/molecules/EntrySelect/EntrySelect.tsx
+++ b/src/components/organisms/Header/organisms/Selector/molecules/EntrySelect/EntrySelect.tsx
@@ -1,26 +0,0 @@
-import React, { FC } from 'react'
-import { Select } from 'antd'
-
-type TEntrySelectProps = {
-  placeholder: string
-  options: {
-    label: string
-    value: string
-  }[]
-  value?: string
-  onChange: (val: string) => void
-  disabled?: boolean
-}
-
-export const EntrySelect: FC<TEntrySelectProps> = ({ placeholder, value, disabled, options, onChange }) => {
-  return (
-    <Select
-      placeholder={placeholder}
-      value={value}
-      options={options.map(({ value, label }) => ({ label, value }))}
-      onChange={(selectedValue: string) => onChange(selectedValue)}
-      disabled={disabled}
-      style={{ width: '150px' }}
-    />
-  )
-}
--- a/src/components/organisms/Header/organisms/Selector/molecules/index.ts
+++ b/src/components/organisms/Header/organisms/Selector/molecules/index.ts
@@ -1 +0,0 @@
-export * from './EntrySelect'
--- a/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/index.ts
+++ b/src/components/organisms/Header/organisms/SelectorInside/molecules/EntrySelect/index.ts
@@ -1 +0,0 @@
-export * from './EntrySelect'
--- a/src/components/organisms/Header/organisms/SelectorInside/molecules/index.ts
+++ b/src/components/organisms/Header/organisms/SelectorInside/molecules/index.ts
@@ -1 +0,0 @@
-export * from './EntrySelect'
--- a/src/components/organisms/Header/organisms/index.ts
+++ b/src/components/organisms/Header/organisms/index.ts
@@ -2,5 +2,3 @@ export * from './Logo'
 export * from './Documentation'
 export * from './ThemeSelector'
 export * from './User'
-export * from './Selector'
-export * from './SelectorInside'
--- a/src/components/organisms/Header/styled.ts
+++ b/src/components/organisms/Header/styled.ts
@@ -1,27 +1,15 @@
 import styled from 'styled-components'
+import { MAIN_CONTENT_HORIZONTAL_PADDING } from 'constants/blocksSizes'

 type TPaddingContainerProps = {
  $height: number
 }

 const PaddingContainer = styled.div<TPaddingContainerProps>`
-  padding: 10px 48px;
+  padding: 12px ${MAIN_CONTENT_HORIZONTAL_PADDING}px;
  height: ${({ $height }) => $height}px;
 `

-type TBackgroundContainerProps = {
-  $bgColor: string
-  $borderColor: string
-  $borderSize: number
-}
-
-const BackgroundContainer = styled.div<TBackgroundContainerProps>`
-  border-bottom: ${({ $borderSize }) => $borderSize}px solid ${({ $borderColor }) => $borderColor};
-  background-color: ${({ $bgColor }) => $bgColor};
-  width: 100%;
-`
-
 export const Styled = {
  PaddingContainer,
-  BackgroundContainer,
 }
--- a/src/components/organisms/HeaderSecond/HeaderSecond.tsx
+++ b/src/components/organisms/HeaderSecond/HeaderSecond.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from 'react'
+import { theme } from 'antd'
+import { useParams } from 'react-router-dom'
+import { HEAD_SECOND_ROW } from 'constants/blocksSizes'
+import { Selector, SelectorInside } from './organisms'
+import { Styled } from './styled'
+
+type THeaderProps = {
+  inside?: boolean
+}
+
+export const HeaderSecond: FC<THeaderProps> = ({ inside }) => {
+  // const { projectName, instanceName, clusterName, entryType, namespace, syntheticProject } = useParams()
+  const { projectName, instanceName, clusterName, namespace, syntheticProject } = useParams()
+  const { token } = theme.useToken()
+
+  const possibleProject = syntheticProject && namespace ? syntheticProject : namespace
+  const possibleInstance = syntheticProject && namespace ? namespace : undefined
+
+  return (
+    <Styled.BackgroundContainer $bgColor={token.colorFillSecondary} $borderRadius={token.borderRadius}>
+      <Styled.PaddingContainer $height={HEAD_SECOND_ROW}>
+        {inside ? (
+          <SelectorInside clusterName={clusterName} namespace={namespace} />
+        ) : (
+          <Selector
+            clusterName={clusterName}
+            projectName={projectName || possibleProject}
+            instanceName={instanceName || possibleInstance}
+          />
+        )}
+      </Styled.PaddingContainer>
+    </Styled.BackgroundContainer>
+  )
+}
--- a/src/components/organisms/HeaderSecond/index.ts
+++ b/src/components/organisms/HeaderSecond/index.ts
@@ -0,0 +1 @@
+export * from './HeaderSecond'
--- a/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
 import { useNavSelector } from 'hooks/useNavSelector'
 import { useMountEffect } from 'hooks/useMountEffect'
-import { EntrySelect } from './molecules'
+import { EntrySelect } from 'components/atoms'

 type TSelectorProps = {
  clusterName?: string
@@ -21,21 +21,19 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
  const [selectedProjectName, setSelectedProjectName] = useState(projectName)
  const [selectedInstanceName, setSelectedInstanceName] = useState(instanceName)

-  const { projectsInSidebar, instancesInSidebar, allInstancesLoadingSuccess, clustersInSidebar } = useNavSelector(
+  // const { projectsInSidebar, instancesInSidebar, allInstancesLoadingSuccess, clustersInSidebar } = useNavSelector(
+  const { projectsInSidebar, instancesInSidebar, allInstancesLoadingSuccess } = useNavSelector(
    selectedClusterName,
    projectName,
  )

-  const handleClusterChange = (value: string) => {
-    setSelectedClusterName(value)
-    navigate(`${baseprefix}/clusters/${value}`)
-    setSelectedProjectName(undefined)
-    setSelectedInstanceName(undefined)
-  }
+  // const handleClusterChange = (value: string) => {
+  //   setSelectedClusterName(value)
+  //   navigate(`${baseprefix}/clusters/${value}`)
+  // }

  const handleProjectChange = (value: string) => {
    setSelectedProjectName(value)
-    setSelectedInstanceName(undefined)
    navigate(`${baseprefix}/clusters/${selectedClusterName}/projects/${value}`)
  }

@@ -51,13 +49,13 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
  }, [projectName, instanceName, clusterName])

  return (
-    <Flex gap={18} justify="center">
-      <EntrySelect
+    <Flex gap={18} justify="start">
+      {/* <EntrySelect
        placeholder="Cluster"
        options={clustersInSidebar}
        value={selectedClusterName}
        onChange={handleClusterChange}
-      />
+      /> */}
      <EntrySelect
        placeholder="Project"
        options={projectsInSidebar}
--- a/src/components/organisms/HeaderSecond/organisms/Selector/index.ts
+++ b/src/components/organisms/HeaderSecond/organisms/Selector/index.ts
--- a/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
 import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
 import { useMountEffect } from 'hooks/useMountEffect'
-import { EntrySelect } from './molecules'
+import { EntrySelect } from 'components/atoms'

 type TSelectorInsideProps = {
  clusterName?: string
@@ -19,13 +19,13 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName, namespac
  const [selectedClusterName, setSelectedClusterName] = useState(clusterName)
  const [selectedNamespace, setSelectedNamespace] = useState(namespace)

-  const { namespacesInSidebar, clustersInSidebar } = useNavSelectorInside(selectedClusterName)
+  // const { namespacesInSidebar, clustersInSidebar } = useNavSelectorInside(selectedClusterName)
+  const { namespacesInSidebar } = useNavSelectorInside(selectedClusterName)

-  const handleClusterChange = (value: string) => {
-    setSelectedClusterName(value)
-    navigate(`${baseprefix}/inside/${value}/apis`)
-    setSelectedNamespace(undefined)
-  }
+  // const handleClusterChange = (value: string) => {
+  //   setSelectedClusterName(value)
+  //   navigate(`${baseprefix}/inside/${value}/apis`)
+  // }

  const handleNamepsaceChange = (value: string) => {
    setSelectedNamespace(value)
@@ -38,13 +38,13 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName, namespac
  }, [namespace, clusterName])

  return (
-    <Flex gap={18} justify="center">
-      <EntrySelect
+    <Flex gap={18} justify="start">
+      {/* <EntrySelect
        placeholder="Cluster"
        options={clustersInSidebar}
        value={selectedClusterName}
        onChange={handleClusterChange}
-      />
+      /> */}
      <EntrySelect
        placeholder="Namespace"
        options={namespacesInSidebar}
--- a/src/components/organisms/HeaderSecond/organisms/SelectorInside/index.ts
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorInside/index.ts
--- a/src/components/organisms/HeaderSecond/organisms/index.ts
+++ b/src/components/organisms/HeaderSecond/organisms/index.ts
@@ -0,0 +1,2 @@
+export * from './Selector'
+export * from './SelectorInside'
--- a/src/components/organisms/HeaderSecond/styled.ts
+++ b/src/components/organisms/HeaderSecond/styled.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+import { MAIN_CONTENT_HORIZONTAL_PADDING } from 'constants/blocksSizes'
+
+type TPaddingContainerProps = {
+  $height: number
+}
+
+const PaddingContainer = styled.div<TPaddingContainerProps>`
+  padding: 12px ${MAIN_CONTENT_HORIZONTAL_PADDING}px;
+  height: ${({ $height }) => $height}px;
+`
+
+type TBackgroundContainerProps = {
+  $bgColor: string
+  $borderRadius: number
+}
+
+const BackgroundContainer = styled.div<TBackgroundContainerProps>`
+  background-color: ${({ $bgColor }) => $bgColor};
+  border-radius: ${({ $borderRadius }) => $borderRadius}px;
+  width: 100%;
+`
+
+export const Styled = {
+  PaddingContainer,
+  BackgroundContainer,
+}
--- a/src/components/organisms/Sidebar/Sidebar.tsx
+++ b/src/components/organisms/Sidebar/Sidebar.tsx
@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react'
+import { theme } from 'antd'
+import { useParams } from 'react-router-dom'
+import { Selector, SelectorInside } from './organisms'
+import { Styled } from './styled'
+
+type TSidebarProps = {
+  inside?: boolean
+  sidebar?: ReactNode
+}
+
+export const Sidebar: FC<TSidebarProps> = ({ inside, sidebar }) => {
+  const { projectName, clusterName, namespace, syntheticProject } = useParams()
+  const { token } = theme.useToken()
+
+  const possibleProject = syntheticProject && namespace ? syntheticProject : namespace
+
+  return (
+    <Styled.BackgroundContainer $borderRadius={token.borderRadius} $borderColor={token.colorBorder}>
+      <Styled.ClusterSelectorContainer>
+        {inside ? (
+          <SelectorInside clusterName={clusterName} />
+        ) : (
+          <Selector clusterName={clusterName} projectName={projectName || possibleProject} />
+        )}
+      </Styled.ClusterSelectorContainer>
+      {sidebar}
+    </Styled.BackgroundContainer>
+  )
+}
--- a/src/components/organisms/Sidebar/index.ts
+++ b/src/components/organisms/Sidebar/index.ts
@@ -0,0 +1 @@
+export * from './Sidebar'
--- a/src/components/organisms/Sidebar/organisms/Selector/Selector.tsx
+++ b/src/components/organisms/Sidebar/organisms/Selector/Selector.tsx
@@ -0,0 +1,40 @@
+import React, { FC, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { RootState } from 'store/store'
+import { useNavSelector } from 'hooks/useNavSelector'
+import { useMountEffect } from 'hooks/useMountEffect'
+import { EntrySelect } from 'components/atoms'
+
+type TSelectorProps = {
+  clusterName?: string
+  projectName?: string
+}
+
+export const Selector: FC<TSelectorProps> = ({ clusterName, projectName }) => {
+  const navigate = useNavigate()
+  const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
+
+  const [selectedClusterName, setSelectedClusterName] = useState(clusterName)
+
+  const { clustersInSidebar } = useNavSelector(selectedClusterName, projectName)
+
+  const handleClusterChange = (value: string) => {
+    setSelectedClusterName(value)
+    navigate(`${baseprefix}/clusters/${value}`)
+  }
+
+  useMountEffect(() => {
+    setSelectedClusterName(clusterName)
+  }, [clusterName])
+
+  return (
+    <EntrySelect
+      placeholder="Cluster"
+      options={clustersInSidebar}
+      value={selectedClusterName}
+      onChange={handleClusterChange}
+      fullwidth
+    />
+  )
+}
--- a/src/components/organisms/Sidebar/organisms/Selector/index.ts
+++ b/src/components/organisms/Sidebar/organisms/Selector/index.ts
@@ -0,0 +1 @@
+export * from './Selector'
--- a/src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx
+++ b/src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx
@@ -0,0 +1,39 @@
+import React, { FC, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { RootState } from 'store/store'
+import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
+import { useMountEffect } from 'hooks/useMountEffect'
+import { EntrySelect } from 'components/atoms'
+
+type TSelectorInsideProps = {
+  clusterName?: string
+}
+
+export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName }) => {
+  const navigate = useNavigate()
+  const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
+
+  const [selectedClusterName, setSelectedClusterName] = useState(clusterName)
+
+  const { clustersInSidebar } = useNavSelectorInside(selectedClusterName)
+
+  const handleClusterChange = (value: string) => {
+    setSelectedClusterName(value)
+    navigate(`${baseprefix}/inside/${value}/apis`)
+  }
+
+  useMountEffect(() => {
+    setSelectedClusterName(clusterName)
+  }, [clusterName])
+
+  return (
+    <EntrySelect
+      placeholder="Cluster"
+      options={clustersInSidebar}
+      value={selectedClusterName}
+      onChange={handleClusterChange}
+      fullwidth
+    />
+  )
+}
--- a/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts
+++ b/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts
@@ -0,0 +1 @@
+export * from './SelectorInside'
--- a/src/components/organisms/Sidebar/organisms/index.ts
+++ b/src/components/organisms/Sidebar/organisms/index.ts
@@ -0,0 +1,2 @@
+export * from './Selector'
+export * from './SelectorInside'
--- a/src/components/organisms/Sidebar/styled.ts
+++ b/src/components/organisms/Sidebar/styled.ts
@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
+
+type TBackgroundContainerProps = {
+  $borderRadius: number
+  $borderColor: string
+}
+
+const BackgroundContainer = styled.div<TBackgroundContainerProps>`
+  border-top-right-radius: ${({ $borderRadius }) => $borderRadius}px;
+  border: 1px ${({ $borderColor }) => $borderColor} solid;
+  border-left: 0;
+  width: 250px;
+  height: calc(100vh - ${HEAD_FIRST_ROW}px);
+`
+
+const ClusterSelectorContainer = styled.div`
+  height: ${SIDEBAR_CLUSTER_HEIGHT}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 12px;
+`
+
+export const Styled = {
+  BackgroundContainer,
+  ClusterSelectorContainer,
+}
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -10,4 +10,6 @@ export * from './TableBuiltinInfo'
 export * from './Forms'
 export * from './Factory'
 export * from './Header'
+export * from './HeaderSecond'
+export * from './Sidebar'
 export * from './Footer'
--- a/src/constants/blocksSizes.ts
+++ b/src/constants/blocksSizes.ts
@@ -1,15 +1,13 @@
 export const HEAD_FIRST_ROW = 52
-export const HEAD_SECOND_ROW = 52
-export const HEAD_BORDER_BOTTOM = 1
-export const FOOTER_HEIGHT = 70
-export const MAIN_CONTENT_VERTICAL_PADDING = 20
-export const MAIN_CONTENT_HORIZONTAL_PADDING = 48
-export const BACKLINK_HEIGHT = 38
-export const BACKLINK_MARGIN_TOP = 4
-export const AFTER_BREADCRUMBS_SPACE = 20
-export const AFTER_BACKLINK_SPACE = 20
+export const HEAD_SECOND_ROW = 56
+export const NAV_HEIGHT = 50
+export const FOOTER_HEIGHT = 38
+export const MAIN_CONTENT_HORIZONTAL_PADDING = 24
+export const BACKLINK_HEIGHT = 26
+/* sidebar */
+export const SIDEBAR_CLUSTER_HEIGHT = 64
 /* computed only */
 export const BREADCRUMBS_HEIGHT = 26
-export const CONTENT_CARD_PADDING = 24
-export const BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT = 28
-export const BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT = 46
+export const CONTENT_CARD_PADDING = 25
+export const BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT = 42
+export const BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT = 48
--- a/src/pages/FactoryPage/FactoryPage.tsx
+++ b/src/pages/FactoryPage/FactoryPage.tsx
@@ -1,8 +1,6 @@
 import React, { FC } from 'react'
-import { Spacer } from '@prorobotech/openapi-k8s-toolkit'
-import { ManageableBreadcrumbs, Factory } from 'components'
+import { ManageableBreadcrumbs, Factory, NavigationContainer } from 'components'
 import { BaseTemplate } from 'templates'
-import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TFactoryPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -11,8 +9,9 @@ type TFactoryPageProps = {
 export const FactoryPage: FC<TFactoryPageProps> = ({ forcedTheme }) => {
  return (
    <BaseTemplate forcedTheme={forcedTheme} withNoCluster>
-      <ManageableBreadcrumbs />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
+      <NavigationContainer>
+        <ManageableBreadcrumbs />
+      </NavigationContainer>
      <Factory />
    </BaseTemplate>
  )
--- a/src/pages/FormApiPage/FormApiPage.tsx
+++ b/src/pages/FormApiPage/FormApiPage.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
@@ -10,11 +9,9 @@ import {
  BackLink,
  ManageableBreadcrumbs,
  ManageableSidebar,
-  RowFlexGrow,
-  FlexCol,
+  NavigationContainer,
 } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
-import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 import { BaseTemplate } from 'templates'

 type TFormApiPageProps = {
@@ -43,47 +40,46 @@ export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme, inside }) => {
  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}api-form`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside={inside} />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
-      <BackLink
-        to={backLink || customBacklink}
-        title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
-          entryName ? `/${entryName}` : ''
-        }`}
-      />
-      <Spacer $space={AFTER_BACKLINK_SPACE} $samespace />
+    <BaseTemplate
+      forcedTheme={forcedTheme}
+      inside={inside}
+      sidebar={
+        <ManageableSidebar
+          instanceName={possibleInstance}
+          projectName={possibleProject}
+          idToCompare={sidebarId}
+          currentTags={[`${apiGroup}/${apiVersion}/${typeName}`]}
+        />
+      }
+    >
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside={inside} />
+        <BackLink
+          to={backLink || customBacklink}
+          title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
+            entryName ? `/${entryName}` : ''
+          }`}
+        />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar
-              instanceName={possibleInstance}
-              projectName={possibleProject}
-              idToCompare={sidebarId}
-              currentTags={[`${apiGroup}/${apiVersion}/${typeName}`]}
-            />
-          </Col>
-          <FlexCol flex="auto">
-            {entryName ? (
-              <UpdateApisForm
-                namespace={namespace}
-                apiGroup={apiGroup}
-                apiVersion={apiVersion}
-                typeName={typeName}
-                entryName={entryName}
-                backLink={backLink}
-              />
-            ) : (
-              <CreateApisForm
-                namespace={namespace}
-                apiGroup={apiGroup}
-                apiVersion={apiVersion}
-                typeName={typeName}
-                backLink={backLink}
-              />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {entryName ? (
+          <UpdateApisForm
+            namespace={namespace}
+            apiGroup={apiGroup}
+            apiVersion={apiVersion}
+            typeName={typeName}
+            entryName={entryName}
+            backLink={backLink}
+          />
+        ) : (
+          <CreateApisForm
+            namespace={namespace}
+            apiGroup={apiGroup}
+            apiVersion={apiVersion}
+            typeName={typeName}
+            backLink={backLink}
+          />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
+++ b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
@@ -10,11 +9,9 @@ import {
  BackLink,
  ManageableBreadcrumbs,
  ManageableSidebar,
-  RowFlexGrow,
-  FlexCol,
+  NavigationContainer,
 } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
-import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 import { BaseTemplate } from 'templates'

 type TFormBuiltinPageProps = {
@@ -43,32 +40,31 @@ export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme, inside
  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}builtin-form`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside={inside} />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
-      <BackLink
-        to={backLink || customBacklink}
-        title={`${entryName ? 'Update' : 'Create'} ${typeName}${entryName ? `/${entryName}` : ''}`}
-      />
-      <Spacer $space={AFTER_BACKLINK_SPACE} $samespace />
+    <BaseTemplate
+      forcedTheme={forcedTheme}
+      inside={inside}
+      sidebar={
+        <ManageableSidebar
+          instanceName={possibleInstance}
+          projectName={possibleProject}
+          idToCompare={sidebarId}
+          currentTags={[typeName]}
+        />
+      }
+    >
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside={inside} />
+        <BackLink
+          to={backLink || customBacklink}
+          title={`${entryName ? 'Update' : 'Create'} ${typeName}${entryName ? `/${entryName}` : ''}`}
+        />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar
-              instanceName={possibleInstance}
-              projectName={possibleProject}
-              idToCompare={sidebarId}
-              currentTags={[typeName]}
-            />
-          </Col>
-          <FlexCol flex="auto">
-            {entryName ? (
-              <UpdateBuiltinForm namespace={namespace} typeName={typeName} entryName={entryName} backLink={backLink} />
-            ) : (
-              <CreateBuiltinForm namespace={namespace} typeName={typeName} backLink={backLink} />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {entryName ? (
+          <UpdateBuiltinForm namespace={namespace} typeName={typeName} entryName={entryName} backLink={backLink} />
+        ) : (
+          <CreateBuiltinForm namespace={namespace} typeName={typeName} backLink={backLink} />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/FormCrdPage/FormCrdPage.tsx
+++ b/src/pages/FormCrdPage/FormCrdPage.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
@@ -10,11 +9,9 @@ import {
  BackLink,
  ManageableBreadcrumbs,
  ManageableSidebar,
-  RowFlexGrow,
-  FlexCol,
+  NavigationContainer,
 } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
-import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 import { BaseTemplate } from 'templates'

 type TFormCrdPageProps = {
@@ -43,47 +40,46 @@ export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme, inside }) => {
  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}crd-form`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside={inside} />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
-      <BackLink
-        to={backLink || customBacklink}
-        title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
-          entryName ? `/${entryName}` : ''
-        }`}
-      />
-      <Spacer $space={AFTER_BACKLINK_SPACE} $samespace />
+    <BaseTemplate
+      forcedTheme={forcedTheme}
+      inside={inside}
+      sidebar={
+        <ManageableSidebar
+          instanceName={possibleInstance}
+          projectName={possibleProject}
+          idToCompare={sidebarId}
+          currentTags={[`${apiGroup}/${apiVersion}/${typeName}`]}
+        />
+      }
+    >
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside={inside} />
+        <BackLink
+          to={backLink || customBacklink}
+          title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
+            entryName ? `/${entryName}` : ''
+          }`}
+        />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar
-              instanceName={possibleInstance}
-              projectName={possibleProject}
-              idToCompare={sidebarId}
-              currentTags={[`${apiGroup}/${apiVersion}/${typeName}`]}
-            />
-          </Col>
-          <FlexCol flex="auto">
-            {entryName ? (
-              <UpdateCrdsForm
-                namespace={namespace}
-                apiGroup={apiGroup}
-                apiVersion={apiVersion}
-                typeName={typeName}
-                entryName={entryName}
-                backLink={backLink}
-              />
-            ) : (
-              <CreateCrdsForm
-                namespace={namespace}
-                apiGroup={apiGroup}
-                apiVersion={apiVersion}
-                typeName={typeName}
-                backLink={backLink}
-              />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {entryName ? (
+          <UpdateCrdsForm
+            namespace={namespace}
+            apiGroup={apiGroup}
+            apiVersion={apiVersion}
+            typeName={typeName}
+            entryName={entryName}
+            backLink={backLink}
+          />
+        ) : (
+          <CreateCrdsForm
+            namespace={namespace}
+            apiGroup={apiGroup}
+            apiVersion={apiVersion}
+            typeName={typeName}
+            backLink={backLink}
+          />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/ListClustersPage/ListClustersPage.tsx
+++ b/src/pages/ListClustersPage/ListClustersPage.tsx
@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
 import { Breadcrumb } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { Link } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { ListClusters } from 'components'
+import { ListClusters, NavigationContainer } from 'components'
 import { BaseTemplate } from 'templates'

 type TListClustersPageProps = {
@@ -27,9 +27,10 @@ export const ListClustersPage: FC<TListClustersPageProps> = ({ forcedTheme }) =>

  return (
    <BaseTemplate withNoCluster forcedTheme={forcedTheme}>
-      <Breadcrumb items={breadcrumbItems} separator=">" />
-      <Spacer $space={20} $samespace />
-      <ContentCard flexGrow={1}>
+      <NavigationContainer>
+        <Breadcrumb items={breadcrumbItems} separator=">" />
+      </NavigationContainer>
+      <ContentCard flexGrow={1} displayFlex flexFlow="column">
        <ListClusters />
      </ContentCard>
    </BaseTemplate>
--- a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
+++ b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
@@ -1,11 +1,9 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
-import { ListInsideApisByApiGroup, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { ListInsideApisByApiGroup, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
-import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TListInsideApiByApiGroupPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -18,20 +16,14 @@ export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps>
  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}api-by-api`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />{' '}
+    <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar idToCompare={sidebarId} />
-          </Col>
-          <FlexCol flex="auto">
-            {apiGroup && apiVersion && (
-              <ListInsideApisByApiGroup namespace={namespace} apiGroup={apiGroup} apiVersion={apiVersion} />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {apiGroup && apiVersion && (
+          <ListInsideApisByApiGroup namespace={namespace} apiGroup={apiGroup} apiVersion={apiVersion} />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
+++ b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
@@ -1,11 +1,9 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
-import { ListInsideAllResources, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { ListInsideAllResources, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
-import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TListInsideApiPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -18,18 +16,12 @@ export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ forcedTheme, in
  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}apis`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
+    <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar idToCompare={sidebarId} />
-          </Col>
-          <FlexCol flex="auto">
-            <ListInsideAllResources namespace={namespace} />
-          </FlexCol>
-        </RowFlexGrow>
+        <ListInsideAllResources namespace={namespace} />
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx
+++ b/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx
@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
 import { Breadcrumb } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { Link } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { ListInsideClusterAndNs } from 'components'
+import { ListInsideClusterAndNs, NavigationContainer } from 'components'
 import { BaseTemplate } from 'templates'

 type TListInsideClustersAndNsPageProps = {
@@ -28,9 +28,10 @@ export const ListInsideClustersAndNsPage: FC<TListInsideClustersAndNsPageProps>

  return (
    <BaseTemplate withNoCluster forcedTheme={forcedTheme} inside={inside}>
-      <Breadcrumb items={breadcrumbItems} separator=">" />
-      <Spacer $space={20} $samespace />
-      <ContentCard flexGrow={1}>
+      <NavigationContainer>
+        <Breadcrumb items={breadcrumbItems} separator=">" />
+      </NavigationContainer>
+      <ContentCard flexGrow={1} displayFlex flexFlow="column">
        <ListInsideClusterAndNs />
      </ContentCard>
    </BaseTemplate>
--- a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
+++ b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
@@ -1,11 +1,9 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
-import { ListInsideCrdsByApiGroup, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { ListInsideCrdsByApiGroup, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
-import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TListInsideCrdByApiGroupPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -18,25 +16,19 @@ export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps>
  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}crd-by-api`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
+    <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar idToCompare={sidebarId} />
-          </Col>
-          <FlexCol flex="auto">
-            {apiGroup && apiVersion && apiExtensionVersion && (
-              <ListInsideCrdsByApiGroup
-                namespace={namespace}
-                apiGroup={apiGroup}
-                apiVersion={apiVersion}
-                apiExtensionVersion={apiExtensionVersion}
-              />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {apiGroup && apiVersion && apiExtensionVersion && (
+          <ListInsideCrdsByApiGroup
+            namespace={namespace}
+            apiGroup={apiGroup}
+            apiVersion={apiVersion}
+            apiExtensionVersion={apiExtensionVersion}
+          />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/ListProjectsPage/ListProjectsPage.tsx
+++ b/src/pages/ListProjectsPage/ListProjectsPage.tsx
@@ -1,10 +1,8 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
-import { ListProjects, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
+import { ListProjects, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
-import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TListProjectsPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -14,18 +12,12 @@ export const ListProjectsPage: FC<TListProjectsPageProps> = ({ forcedTheme }) =>
  const sidebarId = `${getSidebarIdPrefix({})}projects-list`

  return (
-    <BaseTemplate forcedTheme={forcedTheme}>
-      <ManageableBreadcrumbs />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
+    <BaseTemplate forcedTheme={forcedTheme} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
+      <NavigationContainer>
+        <ManageableBreadcrumbs />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar idToCompare={sidebarId} />
-          </Col>
-          <FlexCol flex="auto">
-            <ListProjects />
-          </FlexCol>
-        </RowFlexGrow>
+        <ListProjects />
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/TableApiPage/TableApiPage.tsx
+++ b/src/pages/TableApiPage/TableApiPage.tsx
@@ -1,10 +1,9 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { TableNonCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { TableNonCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
@@ -12,7 +11,6 @@ import {
  BASE_INSTANCES_VERSION,
  BASE_INSTANCES_RESOURCE_NAME,
 } from 'constants/customizationApiGroupAndVersion'
-import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TTableApiPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -48,37 +46,36 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}api-table`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside={inside} />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
-      <BackLink
-        to={namespace ? customBacklinkWithInside : clustererBacklink}
-        title={`${apiGroup}/${apiVersion}/${typeName}`}
-      />
-      <Spacer $space={AFTER_BACKLINK_SPACE} $samespace />
+    <BaseTemplate
+      forcedTheme={forcedTheme}
+      inside={inside}
+      sidebar={
+        <ManageableSidebar
+          instanceName={possibleInstance}
+          projectName={possibleProject}
+          idToCompare={sidebarId}
+          currentTags={[`${apiGroup}/${apiVersion}/${typeName}`]}
+        />
+      }
+    >
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside={inside} />
+        <BackLink
+          to={namespace ? customBacklinkWithInside : clustererBacklink}
+          title={`${apiGroup}/${apiVersion}/${typeName}`}
+        />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar
-              instanceName={possibleInstance}
-              projectName={possibleProject}
-              idToCompare={sidebarId}
-              currentTags={[`${apiGroup}/${apiVersion}/${typeName}`]}
-            />
-          </Col>
-          <FlexCol flex="auto">
-            {typeName && apiGroup && apiVersion && (
-              <TableNonCrdInfo
-                namespace={namespace}
-                apiGroup={apiGroup}
-                apiVersion={apiVersion}
-                typeName={typeName}
-                limit={searchParams.get('limit')}
-                inside={inside}
-              />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {typeName && apiGroup && apiVersion && (
+          <TableNonCrdInfo
+            namespace={namespace}
+            apiGroup={apiGroup}
+            apiVersion={apiVersion}
+            typeName={typeName}
+            limit={searchParams.get('limit')}
+            inside={inside}
+          />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
+++ b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
@@ -1,10 +1,9 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { TableBuiltinInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { TableBuiltinInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
@@ -12,7 +11,6 @@ import {
  BASE_INSTANCES_VERSION,
  BASE_INSTANCES_RESOURCE_NAME,
 } from 'constants/customizationApiGroupAndVersion'
-import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TTableBuiltinPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -40,32 +38,31 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}builtin-table`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside={inside} />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
-      <BackLink to={namespace ? customBacklinkWithInside : clustererBacklink} title={typeName} />
-      <Spacer $space={AFTER_BACKLINK_SPACE} $samespace />
+    <BaseTemplate
+      forcedTheme={forcedTheme}
+      inside={inside}
+      sidebar={
+        <ManageableSidebar
+          instanceName={possibleInstance}
+          projectName={possibleProject}
+          idToCompare={sidebarId}
+          currentTags={[`${typeName}`]}
+        />
+      }
+    >
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside={inside} />
+        <BackLink to={namespace ? customBacklinkWithInside : clustererBacklink} title={typeName} />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar
-              instanceName={possibleInstance}
-              projectName={possibleProject}
-              idToCompare={sidebarId}
-              currentTags={[`${typeName}`]}
-            />
-          </Col>
-          <FlexCol flex="auto">
-            {typeName && (
-              <TableBuiltinInfo
-                namespace={namespace}
-                typeName={typeName}
-                limit={searchParams.get('limit')}
-                inside={inside}
-              />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {typeName && (
+          <TableBuiltinInfo
+            namespace={namespace}
+            typeName={typeName}
+            limit={searchParams.get('limit')}
+            inside={inside}
+          />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/pages/TableCrdPage/TableCrdPage.tsx
+++ b/src/pages/TableCrdPage/TableCrdPage.tsx
@@ -1,10 +1,9 @@
 import React, { FC } from 'react'
-import { Col } from 'antd'
-import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { TableCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { TableCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
@@ -12,7 +11,6 @@ import {
  BASE_INSTANCES_VERSION,
  BASE_INSTANCES_RESOURCE_NAME,
 } from 'constants/customizationApiGroupAndVersion'
-import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'

 type TTableCrdPageProps = {
  forcedTheme?: 'light' | 'dark'
@@ -39,37 +37,36 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}crd-table`

  return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs inside={inside} />
-      <Spacer $space={AFTER_BREADCRUMBS_SPACE} $samespace />
-      <BackLink
-        to={namespace ? customBacklinkWithInside : clustererBacklink}
-        title={`${apiGroup}/${apiVersion}/${crdName}`}
-      />
-      <Spacer $space={AFTER_BACKLINK_SPACE} $samespace />
+    <BaseTemplate
+      forcedTheme={forcedTheme}
+      inside={inside}
+      sidebar={
+        <ManageableSidebar
+          instanceName={possibleInstance}
+          projectName={possibleProject}
+          idToCompare={sidebarId}
+          currentTags={[`${apiGroup}/${apiVersion}/${crdName}`]}
+        />
+      }
+    >
+      <NavigationContainer>
+        <ManageableBreadcrumbs inside={inside} />
+        <BackLink
+          to={namespace ? customBacklinkWithInside : clustererBacklink}
+          title={`${apiGroup}/${apiVersion}/${crdName}`}
+        />
+      </NavigationContainer>
      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <RowFlexGrow wrap={false}>
-          <Col span="auto">
-            <ManageableSidebar
-              instanceName={possibleInstance}
-              projectName={possibleProject}
-              idToCompare={sidebarId}
-              currentTags={[`${apiGroup}/${apiVersion}/${crdName}`]}
-            />
-          </Col>
-          <FlexCol flex="auto">
-            {crdName && apiGroup && apiVersion && apiExtensionVersion && (
-              <TableCrdInfo
-                namespace={namespace}
-                apiGroup={apiGroup}
-                apiVersion={apiVersion}
-                crdName={crdName}
-                apiExtensionVersion={apiExtensionVersion}
-                inside={inside}
-              />
-            )}
-          </FlexCol>
-        </RowFlexGrow>
+        {crdName && apiGroup && apiVersion && apiExtensionVersion && (
+          <TableCrdInfo
+            namespace={namespace}
+            apiGroup={apiGroup}
+            apiVersion={apiVersion}
+            crdName={crdName}
+            apiExtensionVersion={apiExtensionVersion}
+            inside={inside}
+          />
+        )}
      </ContentCard>
    </BaseTemplate>
  )
--- a/src/templates/BaseTemplate/BaseTemplate.tsx
+++ b/src/templates/BaseTemplate/BaseTemplate.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useEffect, useCallback } from 'react'
-import { Layout, theme as antdtheme, Alert } from 'antd'
+import { Layout, theme as antdtheme, Alert, Col } from 'antd'
 import { useClusterList } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams, useNavigate } from 'react-router-dom'
@@ -7,7 +7,16 @@ import type { RootState } from 'store/store'
 import { setTheme } from 'store/theme/theme/theme'
 import { setCluster } from 'store/cluster/cluster/cluster'
 import { setClusterList } from 'store/clusterList/clusterList/clusterList'
-import { DefaultLayout, DefaultColorProvider, Header, Footer } from 'components'
+import {
+  DefaultLayout,
+  DefaultColorProvider,
+  Header,
+  HeaderSecond,
+  Footer,
+  Sidebar,
+  RowFlexGrow,
+  FlexCol,
+} from 'components'
 import { Styled } from './styled'

 type TBaseTemplateProps = {
@@ -15,9 +24,10 @@ type TBaseTemplateProps = {
  children?: ReactNode | undefined
  forcedTheme?: 'dark' | 'light'
  inside?: boolean
+  sidebar?: ReactNode
 }

-export const BaseTemplate: FC<TBaseTemplateProps> = ({ children, withNoCluster, forcedTheme, inside }) => {
+export const BaseTemplate: FC<TBaseTemplateProps> = ({ children, withNoCluster, forcedTheme, inside, sidebar }) => {
  const navigate = useNavigate()
  const { clusterName } = useParams()
  const { useToken } = antdtheme
@@ -85,14 +95,22 @@ export const BaseTemplate: FC<TBaseTemplateProps> = ({ children, withNoCluster,
        <Layout>
          <DefaultLayout.Layout $bgColor={token.colorBgLayout}>
            <DefaultLayout.ContentContainer>
-              <Header inside={inside} />
-              <DefaultLayout.ContentPadding $isFederation={isFederation}>
-                {clusterListQuery.error && (
-                  <Alert message={`Cluster List Error: ${clusterListQuery.error?.message} `} type="error" />
-                )}
-                {children}
-              </DefaultLayout.ContentPadding>
-              <Footer />
+              <Header />
+              <RowFlexGrow wrap={false}>
+                <Col span="250px">
+                  <Sidebar inside={inside} sidebar={sidebar} />
+                </Col>
+                <FlexCol flex="auto">
+                  <DefaultLayout.ContentPadding $isFederation={isFederation}>
+                    <HeaderSecond inside={inside} />
+                    {clusterListQuery.error && (
+                      <Alert message={`Cluster List Error: ${clusterListQuery.error?.message} `} type="error" />
+                    )}
+                    {children}
+                  </DefaultLayout.ContentPadding>
+                  <Footer />
+                </FlexCol>
+              </RowFlexGrow>
            </DefaultLayout.ContentContainer>
          </DefaultLayout.Layout>
        </Layout>