feat: sidebar style changes

apps/design-system/src/pages/view-preview/root-view-wrapper-store.tsx

@@ -271,7 +271,7 @@ export const useRootViewWrapperStore = () => {
     },
     {
       groupId: 8,
-      title: 'Acces Control',
+      title: 'Access Control',
       type: MenuGroupTypes.SETTINGS,
       items: [
         {

packages/ui/locales/en/component.json

@@ -91,7 +91,7 @@
     "overrides": "Overrides",
     "certificates": "Certificates",
     "webhooks": "Webhooks",
-    "access-control": "Acces Control",
+    "access-control": "Access Control",
     "users": "Users",
     "user-groups": "User Groups",
     "service-accounts": "Service Accounts",

packages/ui/src/components/manage-navigation/index.tsx

@@ -142,7 +142,7 @@ export const ManageNavigation = ({
                           key={item.id}
                           className="flex w-full grow cursor-not-allowed items-center gap-x-2.5 rounded p-1 px-3 opacity-55"
                         >
-                          <Icon className="w-3.5" name="shield-lock" size={14} />
+                          <Icon className="w-3.5" name="lock" size={14} />
                           <Text>{item.title}</Text>
                         </div>
                       )

packages/ui/src/components/navbar-skeleton/group.tsx

@@ -16,7 +16,7 @@ export function Group({ children, title, topBorder, isSubMenu = false, titleClas
       className={cn(
         'flex w-full flex-col px-5',
         { 'border-borders-5 border-t pt-2.5': topBorder },
-        isSubMenu ? 'pb-2.5' : 'gap-1.5 pb-3',
+        isSubMenu ? 'pb-2.5 gap-y-0.5' : 'gap-1.5 pb-3',
         className
       )}
     >

packages/ui/src/components/navbar/navbar-item/index.tsx

@@ -9,6 +9,7 @@ import { NavbarItemType } from '../types'
 interface NavbarItemProps {
   item: NavbarItemType
   isRecent?: boolean
+  isStaticPinned?: boolean
   handleChangePinnedMenuItem: (item: NavbarItemType, pin: boolean) => void
   handleRemoveRecentMenuItem: (item: NavbarItemType) => void
   handleCustomNav: () => void
@@ -18,6 +19,7 @@ interface NavbarItemProps {
 export const NavbarItem = ({
   item,
   isRecent = false,
+  isStaticPinned = false,
   handleChangePinnedMenuItem,
   handleRemoveRecentMenuItem,
   handleCustomNav,
@@ -75,20 +77,22 @@ export const NavbarItem = ({
           />
         )}
       </NavLink>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild>
-          <Button
-            className="absolute right-[-0.8125rem] top-0 text-icons-4 opacity-0 hover:text-icons-2 focus:opacity-100 focus-visible:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100"
-            size="sm_icon"
-            variant="custom"
-          >
-            <Icon name="menu-dots" size={12} />
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content className="w-[128px]" align="end" sideOffset={-1} alignOffset={8}>
-          {dropdownItems}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      {!isStaticPinned && (
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <Button
+              className="absolute right-[-0.8125rem] top-0 text-icons-4 opacity-0 hover:text-icons-2 focus:opacity-100 focus-visible:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100"
+              size="sm_icon"
+              variant="custom"
+            >
+              <Icon name="menu-dots" size={12} />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content className="w-[128px]" align="end" sideOffset={-1} alignOffset={8}>
+            {dropdownItems}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      )}
     </div>
   )
 }

packages/ui/src/components/navbar/navbar.tsx

@@ -79,6 +79,7 @@ export const Navbar = ({
                 handleChangePinnedMenuItem={handleChangePinnedMenuItem}
                 handleRemoveRecentMenuItem={handleRemoveRecentMenuItem}
                 handleCustomNav={handleCustomNav}
+                isStaticPinned
                 t={t}
               />
             ))}
@@ -104,6 +105,12 @@ export const Navbar = ({
           )}
 
           <NavbarSkeleton.Group topBorder>
+            {!!currentUser?.admin && (
+              <Link to="/admin/default-settings">
+                <NavbarSkeleton.Item text="User Management" icon={<Icon name="account" size={12} />} />
+              </Link>
+            )}
+
             <button onClick={handleSettingsMenu}>
               <NavbarSkeleton.Item
                 text={adminMenuItem.title}
@@ -115,13 +122,6 @@ export const Navbar = ({
         </ScrollArea>
 
         {/*<NavbarAi />*/}
-        {!!currentUser?.admin && (
-          <NavbarSkeleton.Group>
-            <Link to="/admin/default-settings">
-              <NavbarSkeleton.Item text="User Management" icon={<Icon name="account" size={12} />} />
-            </Link>
-          </NavbarSkeleton.Group>
-        )}
       </NavbarSkeleton.Content>
 
       <NavbarSkeleton.Footer>