UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: дизайн и русификация God Mode

plane-src/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -36,11 +36,13 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
   const handleSignOut = () => signOut();
 
-  const getSidebarMenuItems = () => (
+  const getSidebarMenuItems = (align: "left" | "right" = "left") => (
     <Menu.Items
       className={cn(
-        "shadow-lg absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 outline-none",
+        "nodedc-glass-popup-surface absolute z-20 mt-1.5 flex w-56 flex-col divide-y divide-white/6 px-2 py-2 text-11 outline-none",
         {
+          "left-0": align === "left",
+          "right-0": align === "right",
           "left-4": isSidebarCollapsed,
         }
       )}
@@ -52,11 +54,11 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
         <Menu.Item
           as="button"
           type="button"
-          className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
+          className="nodedc-settings-sidebar-item flex w-full items-center gap-2 px-2 py-1 text-left"
           onClick={handleThemeSwitch}
         >
           <Palette className="h-4 w-4 stroke-[1.5]" />
-          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+          {resolvedTheme === "dark" ? "Светлая тема" : "Темная тема"}
         </Menu.Item>
       </div>
       <div className="py-2">
@@ -65,10 +67,10 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           <Menu.Item
             as="button"
             type="submit"
-            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
+            className="nodedc-settings-sidebar-item flex w-full items-center gap-2 px-2 py-1 text-left"
           >
             <LogOut className="h-4 w-4 stroke-[1.5]" />
-            Sign out
+            Выйти
           </Menu.Item>
         </form>
       </div>
@@ -81,10 +83,10 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   }, [csrfToken]);
 
   return (
-    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-subtle px-4 py-2.5">
+    <div className="px-3 pt-4 pb-2">
       <div className="h-full w-full truncate">
         <div
-          className={`flex flex-grow items-center gap-x-2 truncate rounded-sm ${
+          className={`nodedc-admin-sidebar-profile flex flex-grow items-center gap-x-3 truncate px-3 py-3 ${
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
@@ -94,8 +96,8 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
                 "cursor-default": !isSidebarCollapsed,
               })}
             >
-              <div className="flex size-8 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
-                <UserCog2 className="size-5 text-primary" />
+              <div className="nodedc-admin-sidebar-avatar-button flex size-10 flex-shrink-0 items-center justify-center">
+                <UserCog2 className="size-5 text-[rgb(var(--nodedc-card-active-rgb))]" />
               </div>
             </Menu.Button>
             {isSidebarCollapsed && (
@@ -114,38 +116,39 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           </Menu>
 
           {!isSidebarCollapsed && (
-            <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-body-md-medium text-primary">Instance admin</h4>
+            <div className="min-w-0 flex-1">
+              <h4 className="truncate text-15 font-medium text-primary">Глобальный админ</h4>
+              <div className="truncate text-11 font-medium text-tertiary">Супер-администратор</div>
             </div>
           )}
+
+          {!isSidebarCollapsed && currentUser && (
+            <Menu as="div" className="relative flex-shrink-0">
+              <Menu.Button className="nodedc-admin-sidebar-action grid size-8 place-items-center outline-none">
+                <Avatar
+                  name={currentUser.display_name}
+                  src={getFileURL(currentUser.avatar_url)}
+                  size={24}
+                  shape="square"
+                  className="!text-body-sm-medium"
+                />
+              </Menu.Button>
+
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                {getSidebarMenuItems("right")}
+              </Transition>
+            </Menu>
+          )}
         </div>
       </div>
-
-      {!isSidebarCollapsed && currentUser && (
-        <Menu as="div" className="relative flex-shrink-0">
-          <Menu.Button className="grid place-items-center outline-none">
-            <Avatar
-              name={currentUser.display_name}
-              src={getFileURL(currentUser.avatar_url)}
-              size={24}
-              shape="square"
-              className="!text-body-sm-medium"
-            />
-          </Menu.Button>
-
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            {getSidebarMenuItems()}
-          </Transition>
-        </Menu>
-      )}
     </div>
   );
 });