fix: more dimmed shield

frontend/src/Navigation.tsx

@@ -10,7 +10,6 @@ import {
   Plus,
   Search as SearchIcon,
   Settings as SettingsIcon,
-  ShieldCheck as ShieldCheckIcon,
 } from 'lucide-react';
 
 import { Agent } from './agents/types';
@@ -45,7 +44,6 @@ import {
   selectAgents,
   selectConversationId,
   selectConversations,
-  selectIsAdmin,
   selectModalStateDeleteConv,
   selectSelectedAgent,
   selectSharedAgents,
@@ -74,7 +72,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const queries = useSelector(selectQueries);
   const conversations = useSelector(selectConversations);
   const conversationId = useSelector(selectConversationId);
-  const isAdmin = useSelector(selectIsAdmin);
   const modalStateDeleteConv = useSelector(selectModalStateDeleteConv);
   const agents = useSelector(selectAgents);
   const sharedAgents = useSelector(selectSharedAgents);
@@ -627,31 +624,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         </div>
         <div className="text-foreground flex h-auto flex-col justify-end dark:text-white">
           <div className="dark:border-b-sidebar-border flex flex-col gap-2 border-b py-2">
-            {isAdmin && (
-              <NavLink
-                onClick={() => {
-                  if (isMobile || isTablet) {
-                    setNavOpen(false);
-                  }
-                  resetConversation();
-                }}
-                to="/admin"
-                className={({ isActive }) =>
-                  `hover:bg-sidebar-accent mx-4 my-auto flex h-9 cursor-pointer items-center gap-2.5 rounded-3xl pl-3 ${
-                    isActive ? 'bg-sidebar-accent' : ''
-                  }`
-                }
-              >
-                <ShieldCheckIcon
-                  className="text-muted-foreground size-5 shrink-0"
-                  strokeWidth={1.75}
-                  aria-label="Admin"
-                />
-                <p className="text-foreground text-sm dark:text-white">
-                  {t('admin.label', 'Admin')}
-                </p>
-              </NavLink>
-            )}
             <NavLink
               onClick={() => {
                 if (isMobile || isTablet) {

frontend/src/components/Help.tsx

@@ -1,14 +1,19 @@
 import { useState, useRef, useEffect } from 'react';
+import { ShieldCheck } from 'lucide-react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import Info from '../assets/info.svg';
 import PageIcon from '../assets/documentation.svg';
 import EmailIcon from '../assets/envelope.svg';
 import { useTranslation } from 'react-i18next';
+import { selectIsAdmin } from '../preferences/preferenceSlice';
 import { Button } from './ui/button';
 const Help = () => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation();
+  const isAdmin = useSelector(selectIsAdmin);
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
@@ -50,13 +55,31 @@ const Help = () => {
       </Button>
       {isOpen && (
         <div
-          className={`dark:bg-card bg-card absolute z-10 w-48 translate-x-4 -translate-y-28 rounded-xl shadow-lg`}
+          className={`dark:bg-card bg-card absolute z-10 w-48 translate-x-4 ${
+            isAdmin ? '-translate-y-40' : '-translate-y-28'
+          } rounded-xl shadow-lg`}
         >
+          {isAdmin && (
+            <Link
+              to="/admin"
+              onClick={() => setIsOpen(false)}
+              className="hover:bg-muted text-foreground flex items-center gap-4 rounded-t-xl px-4 py-2"
+            >
+              <ShieldCheck
+                size={20}
+                strokeWidth={1.75}
+                className="text-muted-foreground shrink-0"
+              />
+              {t('admin.label', 'Admin')}
+            </Link>
+          )}
           <a
             href="https://docs.docsgpt.cloud/"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:bg-muted text-foreground flex items-start gap-4 rounded-t-xl px-4 py-2"
+            className={`hover:bg-muted text-foreground flex items-start gap-4 px-4 py-2 ${
+              isAdmin ? '' : 'rounded-t-xl'
+            }`}
           >
             <img
               src={PageIcon}