slider+header15.12

src/Routes.tsx

@@ -212,6 +212,9 @@ import TripHomepage from 'pages/apps/travel-agency/trip/Homepage';
 import TripDetails from 'pages/apps/travel-agency/trip/TripDetails';
 import TripCheckout from 'pages/apps/travel-agency/trip/Checkout';
 import TripLayout from 'layouts/TripLayout';
+import { Range } from 'react-range';
+import PhoenixReactRange from './components/forms/PhoenixReactRange';
+import { Slider } from './module-dimmer/Slider';
 
 const routes: RouteObject[] = [
   {
@@ -227,10 +230,14 @@ const routes: RouteObject[] = [
         children: [
           {
             index: true,
-            element:  <div> body </div> 
+            element: <div> body </div>
           },
           {
-            element: <div>monitor</div>,
+            element: (
+              <div >
+                <Slider/>
+              </div>
+            ),
             path: '/monitor'
           },
           {

src/components/footers/Footer.tsx

@@ -11,20 +11,27 @@ const Footer = ({ className }: FooterProps) => {
       <Row className="g-1 justify-content-between align-items-center h-100">
         <Col xs={12} sm="auto" className="text-center">
           <p className="mb-0 mt-2 mt-sm-0 text-body">
-            Thank you for creating with {process.env.REACT_APP_TITLE} React
-            <span className="d-none d-sm-inline-block" />
-            <span className="d-none d-sm-inline-block mx-1">|</span>
-            <br className="d-sm-none" />
-            {new Date().getFullYear()} &copy;{' '}
-            <a href="https://themewagon.com" target="_blank" rel="noreferrer">
+
+
+            {/*Thank you for creating with {process.env.REACT_APP_TITLE} React*/}
+            {/*<span className="d-none d-sm-inline-block" />*/}
+            {/*<span className="d-none d-sm-inline-block mx-1">|</span>*/}
+            {/*<br className="d-sm-none" />*/}
+            {/*{new Date().getFullYear()} &copy;{' '}*/}
+            <ul>
               Themewagon
-            </a>
+            </ul>
+
+
+
+
+
           </p>
         </Col>
         <Col xs={12} sm="auto" className="text-center">
-          <p className="mb-0 text-body-tertiary text-opacity-85">
-            v{process.env.REACT_APP_VERSION}
-          </p>
+          {/*<p className="mb-0 text-body-tertiary text-opacity-85">*/}
+          {/*  v{process.env.REACT_APP_VERSION}*/}
+          {/*</p>*/}
         </Col>
       </Row>
     </footer>

src/components/forms/PhoenixReactRange.tsx

@@ -35,6 +35,7 @@ export interface PhoenixReactRangeProps {
   renderThumb?: (params: IRenderThumbParams) => React.ReactNode;
   renderTrack?: (params: IRenderTrackParams) => React.ReactNode;
   classNames?: string;
+  orientation?: 'horizontal' | 'vertical';
 }
 
 const PhoenixReactRange = ({

src/components/navbars/nav-items/NavItems.tsx

@@ -20,7 +20,7 @@ const NavItems = () => {
   const [openSearchModal, setOpenSearchModal] = useState(false);
 
   return (
-    <div className="navbar-nav navbar-nav-icons flex-row">
+    <div className="w-50 navbar-nav navbar-nav-icons flex-row justify-content-end">
       <Nav.Item>
         <ThemeToggler className="px-2" />
       </Nav.Item>
@@ -47,47 +47,47 @@ const NavItems = () => {
           <NotificationDropdownMenu />
         </Dropdown>
       </Nav.Item>
+      {/*<Nav.Item>*/}
+      {/*  <Dropdown autoClose="outside" className="h-100">*/}
+      {/*    <Dropdown.Toggle*/}
+      {/*      as={Link}*/}
+      {/*      to="#!"*/}
+      {/*      className="dropdown-caret-none nav-link h-100"*/}
+      {/*      variant=""*/}
+      {/*    >*/}
+      {/*      <svg*/}
+      {/*        width="16"*/}
+      {/*        height="16"*/}
+      {/*        viewBox="0 0 16 16"*/}
+      {/*        fill="none"*/}
+      {/*        xmlns="http://www.w3.org/2000/svg"*/}
+      {/*      >*/}
+      {/*        <circle cx="2" cy="2" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="2" cy="8" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="2" cy="14" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="8" cy="8" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="8" cy="14" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="14" cy="8" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="14" cy="14" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="8" cy="2" r="2" fill="currentColor"></circle>*/}
+      {/*        <circle cx="14" cy="2" r="2" fill="currentColor"></circle>*/}
+      {/*      </svg>*/}
+      {/*    </Dropdown.Toggle>*/}
+      {/*    <NineDotMenu />*/}
+      {/*  </Dropdown>*/}
+      {/*</Nav.Item>*/}
       <Nav.Item>
-        <Dropdown autoClose="outside" className="h-100">
-          <Dropdown.Toggle
-            as={Link}
-            to="#!"
-            className="dropdown-caret-none nav-link h-100"
-            variant=""
-          >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
-              <circle cx="2" cy="8" r="2" fill="currentColor"></circle>
-              <circle cx="2" cy="14" r="2" fill="currentColor"></circle>
-              <circle cx="8" cy="8" r="2" fill="currentColor"></circle>
-              <circle cx="8" cy="14" r="2" fill="currentColor"></circle>
-              <circle cx="14" cy="8" r="2" fill="currentColor"></circle>
-              <circle cx="14" cy="14" r="2" fill="currentColor"></circle>
-              <circle cx="8" cy="2" r="2" fill="currentColor"></circle>
-              <circle cx="14" cy="2" r="2" fill="currentColor"></circle>
-            </svg>
-          </Dropdown.Toggle>
-          <NineDotMenu />
-        </Dropdown>
-      </Nav.Item>
-      <Nav.Item>
-        <Dropdown autoClose="outside" className="h-100">
-          <Dropdown.Toggle
-            as={Link}
-            to="#!"
-            className="dropdown-caret-none nav-link pe-0 py-0 lh-1 h-100 d-flex align-items-center"
-            variant=""
-          >
-            <Avatar src={avatar57} size="l" />
-          </Dropdown.Toggle>
-          <ProfileDropdownMenu />
-        </Dropdown>
+        {/*<Dropdown autoClose="outside" className="h-100">*/}
+        {/*  <Dropdown.Toggle*/}
+        {/*    as={Link}*/}
+        {/*    to="#!"*/}
+        {/*    className="dropdown-caret-none nav-link pe-0 py-0 lh-1 h-100 d-flex align-items-center"*/}
+        {/*    variant=""*/}
+        {/*  >*/}
+
+        {/*  </Dropdown.Toggle>*/}
+        {/*  <ProfileDropdownMenu />*/}
+        {/*</Dropdown>*/}
       </Nav.Item>
 
       <Modal

src/components/navbars/navbar-horizontal/NavbarTopHorizontal.tsx

@@ -6,6 +6,8 @@ import NavItemsSlim from 'components/navbars/nav-items/NavItemsSlim';
 import NavItems from 'components/navbars/nav-items/NavItems';
 import NavbarTopNav from './NavbarTopNav';
 import { useBreakpoints } from 'providers/BreakpointsProvider';
+import { Header } from "module-dimmer/Header";
+
 
 const NavbarTopHorizontal = () => {
   const {
@@ -21,14 +23,13 @@ const NavbarTopHorizontal = () => {
 
   return (
     <Navbar
-      className={classNames('navbar-bottom ', {
+      className={classNames('navbar-top ', {
         'navbar-slim': navbarTopShape === 'slim'
       })}
       expand="lg"
       variant=""
       data-navbar-appearance={navbarTopAppearance === 'darker' ? 'darker' : ''}
     >
-      <NavbarBrand />
       {!(navbarPosition === 'combo' && breakpoints.down('lg')) && (
         <Navbar.Collapse
           className="navbar-top-collapse order-1 order-lg-0 justify-content-center pb-0"
@@ -37,6 +38,7 @@ const NavbarTopHorizontal = () => {
           <NavbarTopNav />
         </Navbar.Collapse>
       )}
+
       {navbarTopShape === 'default' ? <NavItems /> : <NavItemsSlim />}
     </Navbar>
   );

src/components/navbars/navbar-horizontal/NavbarTopNav.tsx

@@ -53,19 +53,19 @@ const NavbarTopNavItem = ({ route }: { route: RouteItems }) => {
       onMouseLeave={handleMouseLeave}
       onToggle={() => setShow(!show)}
     >
-      <Dropdown.Toggle
-        as="a"
-        variant=""
-        className="nav-link lh-1 d-flex align-items-center cursor-pointer"
-        // onClick={handleClick}
-      >
-        <Icon className="me-2" size={16} />
-        <span>
-          {capitalize(
-            route.horizontalNavLabel ? route.horizontalNavLabel : route.label
-          )}
-        </span>
-      </Dropdown.Toggle>
+      {/*<Dropdown.Toggle*/}
+      {/*  as="a"*/}
+      {/*  variant=""*/}
+      {/*  className="nav-link lh-1 d-flex align-items-center cursor-pointer"*/}
+      {/*  // onClick={handleClick}*/}
+      {/*>*/}
+      {/*  <Icon className="me-2" size={16} />*/}
+      {/*  <span>*/}
+      {/*    {capitalize(*/}
+      {/*      route.horizontalNavLabel ? route.horizontalNavLabel : route.label*/}
+      {/*    )}*/}
+      {/*  </span>*/}
+      {/*</Dropdown.Toggle>*/}
       {route.megaMenu ? (
         <TopNavMegaMenu route={route} />
       ) : (

src/layouts/MainLayout.tsx

@@ -10,6 +10,7 @@ import { useAppContext } from 'providers/AppProvider';
 import { useMainLayoutContext } from 'providers/MainLayoutProvider';
 import { Container } from 'react-bootstrap';
 import { Outlet } from 'react-router-dom';
+import { Header } from '../module-dimmer/Header';
 
 const MainLayout = () => {
   const {
@@ -20,21 +21,20 @@ const MainLayout = () => {
 
   return (
     <Container fluid className="px-0">
-      {/* {(navbarPosition === 'vertical' || navbarPosition === 'combo') && (
-        <NavbarVertical />
-      )}
-      {navbarPosition === 'vertical' && <NavbarTopDefault />}
-      {(navbarPosition === 'horizontal' || navbarPosition === 'combo') && (
-        <NavbarTopHorizontal />
-      )}
-      {navbarPosition === 'dual' && <NavbarDual />} */}
-
-      <div className={classNames(contentClass, 'content')}>
+      {/*{(navbarPosition === 'vertical' || navbarPosition === 'combo') && (*/}
+      {/*  <NavbarVertical />*/}
+      {/*)}*/}
+      {/*{navbarPosition === 'vertical' && <NavbarTopDefault />}*/}
+      {/*{(navbarPosition === 'horizontal' || navbarPosition === 'combo') && (*/}
+      {/*  <NavbarTopHorizontal />*/}
+      {/*)}*/}
+      {/*{navbarPosition === 'dual' && <NavbarDual />}*/}
 
+      <div className={classNames(contentClass, 'content pt-0 pe-0 ps-0')}>
+        {/*<Footer className={classNames(footerClass, 'position-md-relative')} />*/}
+        <Header/>
         <Outlet />
         <NavBarMy />
-        <Footer className={classNames(footerClass, 'position-absolute')} />
-
       </div>
     </Container>
   );

src/module-dimmer/Header.tsx

@@ -0,0 +1,129 @@
+import { Col, Navbar, Row, Table } from 'react-bootstrap';
+import NavbarTopHorizontal from '../components/navbars/navbar-horizontal/NavbarTopHorizontal';
+import NavItems from '../components/navbars/nav-items/NavItems';
+import { useAppContext } from '../providers/AppProvider';
+import { useBreakpoints } from '../providers/BreakpointsProvider';
+import classNames from 'classnames';
+import NavbarTopNav from '../components/navbars/navbar-horizontal/NavbarTopNav';
+import NavItemsSlim from '../components/navbars/nav-items/NavItemsSlim';
+
+export const Header = () => {
+
+    const {
+      config: {
+        navbarPosition,
+        openNavbarVertical,
+        navbarTopShape,
+        navbarTopAppearance
+      }
+    } = useAppContext();
+
+    const { breakpoints } = useBreakpoints();
+
+    return (
+      <Navbar
+        className="navbar-top"
+        expand="lg"
+        variant=""
+        data-navbar-appearance={
+          navbarTopAppearance === 'darker' ? 'darker' : ''
+        }
+      >
+        {!(navbarPosition === 'combo' && breakpoints.down('lg')) && (
+          <Navbar.Collapse
+            className="w-50 navbar-top-collapse order-1 order-lg-0 justify-content-between pb-0"
+            in={openNavbarVertical}
+          >
+            <Col className="p-0" xs="auto">
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>A:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>DDSR 24</div>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>B.:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>выкл.</div>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>C:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>123</div>
+                </Col>
+              </Row>
+            </Col>
+
+            <Col className="p-0" xs="auto">
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>A:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>DDSR 24</div>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>B.:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>выкл.</div>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>C:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>123</div>
+                </Col>
+              </Row>
+            </Col>
+
+
+            <Col className="p-0" xs="auto">
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>A:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>DDSR 24</div>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>B.:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>выкл.</div>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>C:</div>
+                </Col>
+                <Col className="p-0 pe-3" xs="auto">
+                  <div>123</div>
+                </Col>
+              </Row>
+            </Col>
+
+          </Navbar.Collapse>
+        )}
+
+        <NavItems />
+      </Navbar>
+    );
+
+
+
+
+}