th-288: Redesign sidebar (BinaryStudioAcademy#292)

* th-288: * redesign sidebar

* th-288: * changed styling

* th-288: * fix

* th-288: * fix

* th-288: * minor refactoring

* th-288: * resolve comments

* th-288: * divider fix

* th-288: * driver sidebar

* th-288: * enum fix

* th-288: * resolved comments

* th-288: * import fix

frontend/src/libs/enums/app-route.enum.ts

@@ -12,6 +12,7 @@ const AppRoute = {
   DASHBOARD_ORDERS: '/dashboard/orders',
   DASHBOARD_TRUCKS: '/dashboard/trucks',
   DASHBOARD_DRIVERS: '/dashboard/drivers',
+  DASHBOARD_CHOOSE_TRUCK: '/dashboard/choose-truck',
   ORDER: '/order',
 } as const;
 

frontend/src/libs/enums/enums.ts

@@ -6,7 +6,8 @@ export { IconName } from './icon-name.enum.js';
 export { IconSize } from './icon-size.enum.js';
 export { InputType } from './input-type.enum.js';
 export { PlainSvgIconName } from './plain-svg-icon-name.enum.js';
-export { TabsName } from './sidebar-tabs.enum.js';
+export { SidebarTabsName } from './sidebar-tabs-name.enum.js';
+export { SidebarTabsPath } from './sidebar-tabs-path.enum.js';
 export {
   ApiPath,
   AppEnvironment,

frontend/src/libs/enums/sidebar-tabs-name.enum.ts

@@ -0,0 +1,9 @@
+const SidebarTabsName = {
+  ORDERS: 'orders',
+  TRUCKS: 'trucks',
+  TRUCK: 'truck',
+  DRIVERS: 'drivers',
+  PROFILE: 'profile',
+} as const;
+
+export { SidebarTabsName };

frontend/src/libs/enums/sidebar-tabs-path.enum.ts

@@ -0,0 +1,9 @@
+const SidebarTabsPath = {
+  ORDERS: 'orders',
+  TRUCKS: 'trucks',
+  DRIVERS: 'drivers',
+  CHOOSE_TRUCK: 'choose-truck',
+  PROFILE: 'profile',
+} as const;
+
+export { SidebarTabsPath };

frontend/src/libs/types/sidebar.type.ts

@@ -1,13 +1,16 @@
+import {
+  type SidebarTabsName,
+  type SidebarTabsPath,
+} from '~/libs/enums/enums.js';
 import { type IconName } from '~/libs/enums/icon-name.enum.js';
 import { type ValueOf } from '~/libs/types/types.js';
 
-import { type TabsName } from '../enums/sidebar-tabs.enum.js';
-
 type TabsType = {
-  name: ValueOf<typeof TabsName>;
+  name: ValueOf<typeof SidebarTabsName>;
+  path: ValueOf<typeof SidebarTabsPath>;
   icon: ValueOf<typeof IconName>;
 };
 
-type TabName = ValueOf<typeof TabsName>;
+type TabName = ValueOf<typeof SidebarTabsName>;
 
 export { type TabName, type TabsType };

frontend/src/pages/auth/libs/hooks/use-auth-navigate/use-auth-navigate.hook.ts

@@ -35,6 +35,7 @@ const useAuthNavigate = (): AuthNavigateHook => {
         break;
       }
       case UserGroupKey.DRIVER: {
+        navigate(AppRoute.DASHBOARD_ORDERS);
         break;
       }
       default: {

frontend/src/pages/dashboard/components/sidebar/libs/tabs.ts

@@ -0,0 +1,44 @@
+import {
+  IconName,
+  SidebarTabsName,
+  SidebarTabsPath,
+} from '~/libs/enums/enums.js';
+import { type TabsType } from '~/libs/types/types.js';
+
+const BUSINESS_TABS: TabsType[] = [
+  {
+    name: SidebarTabsName.ORDERS,
+    path: SidebarTabsPath.ORDERS,
+    icon: IconName.LIST,
+  },
+  {
+    name: SidebarTabsName.TRUCKS,
+    path: SidebarTabsPath.TRUCKS,
+    icon: IconName.TRUCK,
+  },
+  {
+    name: SidebarTabsName.DRIVERS,
+    path: SidebarTabsPath.DRIVERS,
+    icon: IconName.USERS,
+  },
+];
+
+const DRIVER_TABS: TabsType[] = [
+  {
+    name: SidebarTabsName.ORDERS,
+    path: SidebarTabsPath.ORDERS,
+    icon: IconName.LIST,
+  },
+  {
+    name: SidebarTabsName.TRUCK,
+    path: SidebarTabsPath.CHOOSE_TRUCK,
+    icon: IconName.TRUCK,
+  },
+  {
+    name: SidebarTabsName.PROFILE,
+    path: SidebarTabsPath.PROFILE,
+    icon: IconName.USER_PEN,
+  },
+];
+
+export { BUSINESS_TABS, DRIVER_TABS };

frontend/src/pages/dashboard/components/sidebar/sidebar.tsx

@@ -2,11 +2,13 @@ import { Button } from '~/libs/components/components.js';
 import { AppRoute } from '~/libs/enums/enums.js';
 import { getValidClassNames } from '~/libs/helpers/helpers.js';
 import { useCallback, useLocation, useNavigate } from '~/libs/hooks/hooks.js';
-import { type TabName } from '~/libs/types/types.js';
+import { type TabName, type TabsType } from '~/libs/types/types.js';
+import { UserGroupKey } from '~/packages/users/libs/enums/enums.js';
+import { useAuthUser } from '~/slices/auth/auth.js';
 
-import { checkActiveTab } from './libs/helpers/helpers.js';
+import { checkActiveTab } from './libs/helpers.js';
+import { BUSINESS_TABS, DRIVER_TABS } from './libs/tabs.js';
 import styles from './styles.module.scss';
-import { TABS } from './tabs.js';
 
 type Properties = {
   isCollapsed?: boolean;
@@ -15,6 +17,13 @@ type Properties = {
 const Sidebar: React.FC<Properties> = ({ isCollapsed = false }: Properties) => {
   const navigate = useNavigate();
   const location = useLocation();
+  const user = useAuthUser();
+
+  const getTabs = useCallback((): TabsType[] => {
+    return user?.group.key === UserGroupKey.BUSINESS
+      ? BUSINESS_TABS
+      : DRIVER_TABS;
+  }, [user?.group.key]);
 
   const handleTabClick = useCallback(
     (tabName: TabName) => () => {
@@ -23,30 +32,42 @@ const Sidebar: React.FC<Properties> = ({ isCollapsed = false }: Properties) => {
     [navigate],
   );
 
+  const renderTabs = useCallback(() => {
+    const tabs = getTabs();
+
+    return tabs.map((tab) => (
+      <li
+        className={getValidClassNames(
+          styles.item,
+          checkActiveTab(location.pathname, tab.path) && styles.active,
+        )}
+        key={tab.name}
+      >
+        <Button
+          {...(!isCollapsed && { label: tab.name })}
+          className={getValidClassNames(
+            'h5',
+            styles.btn,
+            checkActiveTab(location.pathname, tab.path) && styles.active,
+          )}
+          frontIcon={tab.icon}
+          variant="text"
+          onClick={handleTabClick(tab.name)}
+        >
+          <span className={'visually-hidden'}>{tab.name}</span>
+        </Button>
+      </li>
+    ));
+  }, [getTabs, handleTabClick, isCollapsed, location.pathname]);
+
   return (
     <div
       className={getValidClassNames(
         styles.container,
         isCollapsed && styles.collapsed,
       )}
     >
-      <ul className={styles.list}>
-        {TABS.map((tab) => (
-          <li key={tab.name}>
-            <Button
-              label={isCollapsed ? '' : tab.name}
-              className={getValidClassNames('h5', styles.btn, {
-                [styles.active]: checkActiveTab(location.pathname, tab.name),
-              })}
-              frontIcon={tab.icon}
-              variant="text"
-              onClick={handleTabClick(tab.name)}
-            >
-              <span className={'visually-hidden'}>{tab.name}</span>
-            </Button>
-          </li>
-        ))}
-      </ul>
+      <ul className={styles.list}>{renderTabs()}</ul>
     </div>
   );
 };

frontend/src/pages/dashboard/components/sidebar/styles.module.scss

@@ -1,9 +1,10 @@
 @import "src/assets/css/vars.scss";
 
 .container {
-  width: 200px;
+  width: 210px;
   height: calc(100% - 20px);
   margin: 10px;
+  padding: 19px 18px;
   overflow-y: auto;
   background-color: $white;
   border-radius: 10px;
@@ -19,14 +20,24 @@
   padding: 0;
 }
 
+.item.active::after {
+  display: block;
+  width: 100%;
+  height: 2px;
+  margin: 3px 0 12px;
+  background-color: $white-blue;
+  content: "";
+}
+
 .btn {
   position: relative;
   width: 100%;
   height: 100%;
+  margin-bottom: 9px;
   padding: 16px 0;
-  color: $black-light;
+  color: $grey;
   font-weight: $font-weight-bold;
-  text-transform: capitalize;
+  border-radius: 8px;
   box-shadow: none;
 }
 
@@ -35,16 +46,7 @@
   background-color: $black-light-transparent;
 }
 
-.active {
+.btn.active {
   color: $blue-dark;
-}
-
-.active::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: $blue-dark;
-  content: "";
+  background-color: rgba($blue-light, 0.2);
 }