chore: handle isWorkspaceDrawerOpen transform

Author: orgrimarr

src/components/layout/AppLayout.tsx

@@ -53,12 +53,21 @@ const styles = (theme: { workspaces: { drawer: { width: any } } }) => ({
     // width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
     width: '100%',
     transition,
+  },
+  appContentTransformTextWorkspace: {
     transform() {
       return workspaceStore.isWorkspaceDrawerOpen
         ? 'translateX(0)'
         : `translateX(-${theme.workspaces.drawer.width}px)`;
     },
   },
+  appContentTransformIconWorkspace: {
+    transform() {
+      return workspaceStore.isWorkspaceDrawerOpen
+        ? 'translateX(0)'
+        : `translateX(-75px)`;
+    },
+  },
   titleBar: {
     display: 'block',
     zIndex: 1,
@@ -149,7 +158,13 @@ class AppLayout extends Component<PropsWithChildren<IProps>, IState> {
                 className={classes.titleBar}
               />
             )}
-            <div className={`app__content ${classes.appContent}`}>
+            <div
+              className={`app__content ${classes.appContent} ${
+                settings.all.app.useWorkspaceDrawerIconStyle
+                  ? classes.appContentTransformIconWorkspace
+                  : classes.appContentTransformTextWorkspace
+              }`}
+            >
               {workspacesDrawer}
               {sidebar}
               <div className="app__service">

src/features/appearance/index.ts

@@ -381,15 +381,6 @@ function generateOpenWorkspaceStyle() {
   `;
 }
 
-function generateWorkspaceWidthStyle(widthStr) {
-  const width = Number(widthStr);
-  return `
-    .drawerWithIconWidth {
-      width: ${width}
-    }
-  `;
-}
-
 function generateStyle(settings, app) {
   let style = '';
 
@@ -428,8 +419,6 @@ function generateStyle(settings, app) {
     isFullScreen,
   );
 
-  style += generateWorkspaceWidthStyle(serviceRibbonWidth);
-
   if (shouldShowDragArea) {
     style += generateShowDragAreaStyle(accentColor);
   }

src/features/workspaces/components/WorkspaceDrawer.tsx

@@ -46,6 +46,9 @@ const styles = theme => ({
   drawerWithText: {
     width: `${theme.workspaces.drawer.width}px`,
   },
+  drawerWithIcon: {
+    width: '75px',
+  },
   headline: {
     fontSize: '24px',
     marginTop: '38px',
@@ -121,7 +124,7 @@ class WorkspaceDrawer extends Component<IProps> {
       : activeWorkspace;
 
     const drawerWithClass = useIconDisplayStyle
-      ? 'drawerWithIconWidth'
+      ? classes.drawerWithIcon
       : classes.drawerWithText;
     return (
       <div className={`${classes.drawer} ${drawerWithClass} workspaces-drawer`}>