SidePanel düzenlemesi

2025-09-15 10:31:07 +03:00 · 2025-09-15 10:31:07 +03:00 · 57dc9811a7
commit 57dc9811a7
parent 0b24c9ed6e
10 changed files with 299 additions and 500 deletions
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
--- a/ui/src/assets/styles/components/_menu-item.css
+++ b/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;
--- a/ui/src/assets/styles/template/_side-nav.css
+++ b/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;
 }

--- a/ui/src/components/layouts/ClassicLayout.tsx
+++ b/ui/src/components/layouts/ClassicLayout.tsx
@ -26,9 +26,9 @@ const HeaderActionsEnd = () => {
  return (
    <>
      <AiAssistant />
-      <LanguageSelector />
      <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
      <UserDropdown hoverable={false} />
    </>
  )
--- a/ui/src/components/layouts/DeckedLayout.tsx
+++ b/ui/src/components/layouts/DeckedLayout.tsx
@ -24,9 +24,9 @@ const HeaderActionsEnd = () => {
    <>
      <AiAssistant />
      <Search />
-      <LanguageSelector />
      <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
      <UserDropdown hoverable={false} />
    </>
  )
--- a/ui/src/components/layouts/ModernLayout.tsx
+++ b/ui/src/components/layouts/ModernLayout.tsx
@ -26,9 +26,9 @@ const HeaderActionsEnd = () => {
  return (
    <>
      <AiAssistant />
-      <LanguageSelector />
      <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
      <UserDropdown hoverable={false} />
    </>
  )
--- a/ui/src/components/layouts/SimpleLayout.tsx
+++ b/ui/src/components/layouts/SimpleLayout.tsx
@ -25,8 +25,8 @@ const HeaderActionsEnd = () => {
      <Search />
      <AiAssistant />
      <Notification />
-      <SidePanel />
      <LanguageSelector />
+      <SidePanel className="hidden" />
      <UserDropdown hoverable={false} />
    </>
  )
--- a/ui/src/components/layouts/StackedSideLayout.tsx
+++ b/ui/src/components/layouts/StackedSideLayout.tsx
@ -22,9 +22,9 @@ const HeaderActionsEnd = () => {
  return (
    <>
      <AiAssistant />
-      <LanguageSelector />
      <Notification />
-      <SidePanel />
+      <LanguageSelector />
+      <SidePanel className="hidden" />
      <UserDropdown hoverable={false} />
    </>
  )
--- a/ui/src/components/template/UserDropdown.tsx
+++ b/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) => (
-        <Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
-          <Link className="flex h-full w-full px-2" to={item.path}>
-            <span className="flex gap-2 items-center w-full">
-              <span className="text-xl opacity-50">{item.icon}</span>
-              <span>{item.label}</span>
-            </span>
-          </Link>
-        </Dropdown.Item>
-      ))}
+      {dropdownItemList.map((item) => {
+        const isSidePanel = item.label === translate('::SidePanel.Title')
+        return (
+          <Dropdown.Item
+            key={item.label}
+            eventKey={item.label}
+            className="mb-1 px-0"
+            onClick={() => {
+              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">
--- a/ui/src/constants/theme.constant.ts
+++ b/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_LTR: DIR_LTR,
-    MODE_LIGHT: MODE_LIGHT,
-    MODE_DARK: MODE_DARK,
-    LAYOUT_TYPE_CLASSIC: LAYOUT_TYPE_CLASSIC,
-    LAYOUT_TYPE_MODERN: LAYOUT_TYPE_MODERN,
-    LAYOUT_TYPE_SIMPLE: LAYOUT_TYPE_SIMPLE,
-    LAYOUT_TYPE_STACKED_SIDE: LAYOUT_TYPE_STACKED_SIDE,
-    LAYOUT_TYPE_DECKED: LAYOUT_TYPE_DECKED,
-    LAYOUT_TYPE_BLANK: LAYOUT_TYPE_BLANK,
-    SIDE_NAV_WIDTH: SIDE_NAV_WIDTH,
-    SIDE_NAV_COLLAPSED_WIDTH: SIDE_NAV_COLLAPSED_WIDTH,
-    SPLITTED_SIDE_NAV_MINI_WIDTH: SPLITTED_SIDE_NAV_MINI_WIDTH,
-    SPLITTED_SIDE_NAV_SECONDARY_WIDTH: SPLITTED_SIDE_NAV_SECONDARY_WIDTH,
-    HEADER_HEIGHT_CLASS: HEADER_HEIGHT_CLASS,
-    NAV_MODE_LIGHT: NAV_MODE_LIGHT,
-    NAV_MODE_DARK: NAV_MODE_DARK,
-    NAV_MODE_THEMED: NAV_MODE_THEMED,
-    NAV_MODE_TRANSPARENT: NAV_MODE_TRANSPARENT,
+  DIR_RTL: DIR_RTL,
+  DIR_LTR: DIR_LTR,
+  MODE_LIGHT: MODE_LIGHT,
+  MODE_DARK: MODE_DARK,
+  LAYOUT_TYPE_CLASSIC: LAYOUT_TYPE_CLASSIC,
+  LAYOUT_TYPE_MODERN: LAYOUT_TYPE_MODERN,
+  LAYOUT_TYPE_SIMPLE: LAYOUT_TYPE_SIMPLE,
+  LAYOUT_TYPE_STACKED_SIDE: LAYOUT_TYPE_STACKED_SIDE,
+  LAYOUT_TYPE_DECKED: LAYOUT_TYPE_DECKED,
+  LAYOUT_TYPE_BLANK: LAYOUT_TYPE_BLANK,
+  SIDE_NAV_WIDTH: SIDE_NAV_WIDTH,
+  SIDE_NAV_COLLAPSED_WIDTH: SIDE_NAV_COLLAPSED_WIDTH,
+  SPLITTED_SIDE_NAV_MINI_WIDTH: SPLITTED_SIDE_NAV_MINI_WIDTH,
+  SPLITTED_SIDE_NAV_SECONDARY_WIDTH: SPLITTED_SIDE_NAV_SECONDARY_WIDTH,
+  HEADER_HEIGHT_CLASS: HEADER_HEIGHT_CLASS,
+  NAV_MODE_LIGHT: NAV_MODE_LIGHT,
+  NAV_MODE_DARK: NAV_MODE_DARK,
+  NAV_MODE_THEMED: NAV_MODE_THEMED,
+  NAV_MODE_TRANSPARENT: NAV_MODE_TRANSPARENT,
 } as const