Версия 0.0.2

FRONT/BUILD/resources/app/src/const/menus/othersMenus/data.ts

@@ -0,0 +1,9 @@
+import { Menu } from "../../types/types";
+import { menusNames } from "./names";
+
+export const menusData: Menu[] = [
+    {
+        id: menusNames[1],
+        isOpen: false
+    }
+]

FRONT/BUILD/resources/app/src/const/menus/othersMenus/names.ts

@@ -0,0 +1,5 @@
+import { names } from "../../types/types"
+
+export const menusNames: names ={
+    1: 'collapse-devices',
+}

FRONT/BUILD/resources/app/src/const/menus/sideBar/components.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { toolBarNames } from "./names"
+import { DevicesBar } from "../../../components/workSpace/sideBar/toolSpace/devicesBar"
+
+export const COMPONENTS = {
+    [toolBarNames[1]]:(
+        <DevicesBar/>
+    ),
+} as const
+
+type ComponentName = keyof typeof COMPONENTS
+
+interface SpaceProps {
+    name: ComponentName,
+}
+
+export const Space = ({name}: SpaceProps) => {
+    const Component = COMPONENTS[name]
+    return React.cloneElement(Component);
+}

FRONT/BUILD/resources/app/src/const/menus/sideBar/data.ts

@@ -0,0 +1,13 @@
+import { ToolBar } from "../../types/types";
+import { toolBarNames } from "./names";
+
+export const toolBarData: ToolBar = {
+    current: toolBarNames[1],
+    toolSpace: [
+        {
+            id: toolBarNames[1],
+            isOpen: true,
+            isActive: true
+        },
+    ]
+};

FRONT/BUILD/resources/app/src/const/menus/sideBar/icons.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { toolBarNames } from "./names"
+import { useTheme } from "styled-components"
+import { Icon } from '@iconify/react';
+
+import desktop from '@iconify/icons-ic/round-desktop-windows';
+
+export const ICONS = {
+    [toolBarNames[1]]: desktop,
+} as const
+
+
+type IconName = keyof typeof ICONS
+
+interface IconsProps {
+    name: IconName,
+    width?: string
+    height?: string
+    setColor?: string
+}
+
+export const IconComponent = ({ name, width = "24", height = "24", setColor}: IconsProps) => {
+    const theme = useTheme();
+    return (
+        <Icon 
+            icon={ICONS[name]} 
+            width={width} 
+            height={height} 
+            color={setColor || theme.textColor} 
+        />
+    );
+}

FRONT/BUILD/resources/app/src/const/menus/sideBar/names.ts

@@ -0,0 +1,5 @@
+import { names } from "../../types/types"
+
+export const toolBarNames: names ={
+    1: 'toolSpace-devices',
+}