SidePanel düzenlemesi

ui/src/assets/styles/components/_menu-item.css

@@ -1,5 +1,5 @@
 .menu-item {
-  @apply cursor-pointer font-semibold px-2 rounded-md flex items-center w-full whitespace-nowrap gap-x-2;
+  @apply cursor-pointer font-medium rounded-md flex items-center w-full whitespace-nowrap gap-x-1 px-2;
 
   &.menu-item-light {
     @apply text-gray-600;
@@ -51,7 +51,7 @@
 }
 
 .menu-collapse-item {
-  @apply cursor-pointer select-none font-semibold px-3 h-8 rounded-md flex items-center justify-between;
+  @apply cursor-pointer select-none font-semibold px-2 h-8 rounded-md flex items-center justify-between;
 
   &.menu-collapse-item-light {
     @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100;

ui/src/assets/styles/template/_side-nav.css

@@ -7,7 +7,7 @@
 }
 
 .side-nav-content {
-  height: calc(100vh - theme("spacing.16"));
+  height: calc(100vh - theme('spacing.24'));
   @apply overflow-y-auto;
 }
 

ui/src/components/layouts/ClassicLayout.tsx

@@ -26,9 +26,9 @@ const HeaderActionsEnd = () => {
   return (
     <>
       <AiAssistant />
-      <LanguageSelector />
       <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
       <UserDropdown hoverable={false} />
     </>
   )

ui/src/components/layouts/DeckedLayout.tsx

@@ -24,9 +24,9 @@ const HeaderActionsEnd = () => {
     <>
       <AiAssistant />
       <Search />
-      <LanguageSelector />
       <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
       <UserDropdown hoverable={false} />
     </>
   )

ui/src/components/layouts/ModernLayout.tsx

@@ -26,9 +26,9 @@ const HeaderActionsEnd = () => {
   return (
     <>
       <AiAssistant />
-      <LanguageSelector />
       <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
       <UserDropdown hoverable={false} />
     </>
   )

ui/src/components/layouts/SimpleLayout.tsx

@@ -25,8 +25,8 @@ const HeaderActionsEnd = () => {
       <Search />
       <AiAssistant />
       <Notification />
-      <SidePanel />
       <LanguageSelector />
+      <SidePanel className="hidden" />
       <UserDropdown hoverable={false} />
     </>
   )

ui/src/components/layouts/StackedSideLayout.tsx

@@ -22,9 +22,9 @@ const HeaderActionsEnd = () => {
   return (
     <>
       <AiAssistant />
-      <LanguageSelector />
       <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
       <UserDropdown hoverable={false} />
     </>
   )

ui/src/components/template/UserDropdown.tsx

@@ -1,16 +1,14 @@
 import type { CommonProps } from '@/@types/common'
 import Dropdown from '@/components/ui/Dropdown'
 import { ROUTES_ENUM } from '@/routes/route.constant'
-import { useStoreState } from '@/store'
+import { useStoreActions, useStoreState } from '@/store'
 import withHeaderItem from '@/utils/hoc/withHeaderItem'
 import useAuth from '@/utils/hooks/useAuth'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import classNames from 'classnames'
-import { FaChartLine } from 'react-icons/fa'
-import { FaSignOutAlt, FaUser } from 'react-icons/fa'
 import { Link } from 'react-router-dom'
 import { Avatar } from '../ui'
-import { FcNext, FcNfcSign, FcPodiumWithSpeaker, FcVoicePresentation } from 'react-icons/fc'
+import { FcEngineering, FcNext, FcNfcSign, FcVoicePresentation } from 'react-icons/fc'
 
 type DropdownList = {
   label: string
@@ -19,6 +17,7 @@ type DropdownList = {
 }
 
 const _UserDropdown = ({ className }: CommonProps) => {
+  const { setPanelExpand } = useStoreActions((actions) => actions.theme)
   const { userName, name, email, avatar } = useStoreState((state) => state.auth.user)
   const tenant = useStoreState((state) => state.abpConfig.config?.currentTenant)
   const { translate } = useLocalization()
@@ -35,6 +34,11 @@ const _UserDropdown = ({ className }: CommonProps) => {
       path: ROUTES_ENUM.protected.admin.activityLog,
       icon: <FcNfcSign />,
     },
+    {
+      label: translate('::SidePanel.Title'),
+      path: ROUTES_ENUM.protected.admin.activityLog,
+      icon: <FcEngineering />,
+    },
   ]
 
   const UserAvatar = (
@@ -60,16 +64,38 @@ const _UserDropdown = ({ className }: CommonProps) => {
         </div>
       </Dropdown.Item>
       <Dropdown.Item variant="divider" />
-      {dropdownItemList.map((item) => (
+      {dropdownItemList.map((item) => {
-        <Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
+        const isSidePanel = item.label === translate('::SidePanel.Title')
-          <Link className="flex h-full w-full px-2" to={item.path}>
+        return (
-            <span className="flex gap-2 items-center w-full">
+          <Dropdown.Item
-              <span className="text-xl opacity-50">{item.icon}</span>
+            key={item.label}
-              <span>{item.label}</span>
+            eventKey={item.label}
-            </span>
+            className="mb-1 px-0"
-          </Link>
+            onClick={() => {
-        </Dropdown.Item>
+              if (isSidePanel) {
-      ))}
+                setPanelExpand(true) // 👈 sadece SidePanel için
+              }
+            }}
+          >
+            {isSidePanel ? (
+              // SidePanel aç
+              <span className="flex h-full w-full px-2 gap-2 items-center">
+                <span className="text-xl opacity-50">{item.icon}</span>
+                <span>{item.label}</span>
+              </span>
+            ) : (
+              // Normal link navigasyonu
+              <>
+                <Link className="flex h-full w-full px-2 gap-2 items-center" to={item.path}>
+                  <span className="text-xl opacity-50">{item.icon}</span>
+                  <span>{item.label}</span>
+                </Link>
+              </>
+            )}
+          </Dropdown.Item>
+        )
+      })}
+
       {/* <Dropdown.Item variant="divider" /> */}
       <Dropdown.Item eventKey="Sign Out" className="mb-1 px-2" onClick={signOut}>
         <span className="text-xl opacity-50">

ui/src/constants/theme.constant.ts

@@ -13,7 +13,7 @@ export const NAV_MODE_DARK = 'dark'
 export const NAV_MODE_THEMED = 'themed'
 export const NAV_MODE_TRANSPARENT = 'transparent'
 
-export const SIDE_NAV_WIDTH = 330
+export const SIDE_NAV_WIDTH = 275
 export const SIDE_NAV_COLLAPSED_WIDTH = 80
 export const SPLITTED_SIDE_NAV_MINI_WIDTH = 80
 export const SPLITTED_SIDE_NAV_SECONDARY_WIDTH = 250
@@ -24,23 +24,23 @@ export const PAGE_CONTAINER_GUTTER_X = 'px-4 sm:px-6 md:px-8'
 export const PAGE_CONTAINER_GUTTER_Y = 'py-4 sm:py-6 md:px-8'
 
 export const THEME_ENUM = {
-    DIR_RTL: DIR_RTL,
+  DIR_RTL: DIR_RTL,
-    DIR_LTR: DIR_LTR,
+  DIR_LTR: DIR_LTR,
-    MODE_LIGHT: MODE_LIGHT,
+  MODE_LIGHT: MODE_LIGHT,
-    MODE_DARK: MODE_DARK,
+  MODE_DARK: MODE_DARK,
-    LAYOUT_TYPE_CLASSIC: LAYOUT_TYPE_CLASSIC,
+  LAYOUT_TYPE_CLASSIC: LAYOUT_TYPE_CLASSIC,
-    LAYOUT_TYPE_MODERN: LAYOUT_TYPE_MODERN,
+  LAYOUT_TYPE_MODERN: LAYOUT_TYPE_MODERN,
-    LAYOUT_TYPE_SIMPLE: LAYOUT_TYPE_SIMPLE,
+  LAYOUT_TYPE_SIMPLE: LAYOUT_TYPE_SIMPLE,
-    LAYOUT_TYPE_STACKED_SIDE: LAYOUT_TYPE_STACKED_SIDE,
+  LAYOUT_TYPE_STACKED_SIDE: LAYOUT_TYPE_STACKED_SIDE,
-    LAYOUT_TYPE_DECKED: LAYOUT_TYPE_DECKED,
+  LAYOUT_TYPE_DECKED: LAYOUT_TYPE_DECKED,
-    LAYOUT_TYPE_BLANK: LAYOUT_TYPE_BLANK,
+  LAYOUT_TYPE_BLANK: LAYOUT_TYPE_BLANK,
-    SIDE_NAV_WIDTH: SIDE_NAV_WIDTH,
+  SIDE_NAV_WIDTH: SIDE_NAV_WIDTH,
-    SIDE_NAV_COLLAPSED_WIDTH: SIDE_NAV_COLLAPSED_WIDTH,
+  SIDE_NAV_COLLAPSED_WIDTH: SIDE_NAV_COLLAPSED_WIDTH,
-    SPLITTED_SIDE_NAV_MINI_WIDTH: SPLITTED_SIDE_NAV_MINI_WIDTH,
+  SPLITTED_SIDE_NAV_MINI_WIDTH: SPLITTED_SIDE_NAV_MINI_WIDTH,
-    SPLITTED_SIDE_NAV_SECONDARY_WIDTH: SPLITTED_SIDE_NAV_SECONDARY_WIDTH,
+  SPLITTED_SIDE_NAV_SECONDARY_WIDTH: SPLITTED_SIDE_NAV_SECONDARY_WIDTH,
-    HEADER_HEIGHT_CLASS: HEADER_HEIGHT_CLASS,
+  HEADER_HEIGHT_CLASS: HEADER_HEIGHT_CLASS,
-    NAV_MODE_LIGHT: NAV_MODE_LIGHT,
+  NAV_MODE_LIGHT: NAV_MODE_LIGHT,
-    NAV_MODE_DARK: NAV_MODE_DARK,
+  NAV_MODE_DARK: NAV_MODE_DARK,
-    NAV_MODE_THEMED: NAV_MODE_THEMED,
+  NAV_MODE_THEMED: NAV_MODE_THEMED,
-    NAV_MODE_TRANSPARENT: NAV_MODE_TRANSPARENT,
+  NAV_MODE_TRANSPARENT: NAV_MODE_TRANSPARENT,
 } as const