feat(ui): added new layout

frontend/src/components/navigation/NavHeader.tsx

@@ -1,10 +1,7 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { useWorkspace } from '@app/context';
-import getOrganization from '@app/pages/api/organization/GetOrg';
+import { useOrgnization, useWorkspace } from '@app/context';
 
 /**
  * This is the component at the top of almost every page.
@@ -22,28 +19,15 @@ export default function NavHeader({
   pageName: string;
   isProjectRelated?: boolean;
 }): JSX.Element {
-  const [orgName, setOrgName] = useState('');
-  const router = useRouter();
-  const projectId = String(router.query.id);
   const { currentWorkspace } = useWorkspace();
-
-  useEffect(() => {
-    (async () => {
-      const orgId = localStorage.getItem('orgData.id');
-      const org = await getOrganization({
-        orgId: orgId || ''
-      });
-      setOrgName(org.name);
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId]);
+  const { currentOrg } = useOrgnization();
 
   return (
     <div className="ml-6 flex flex-row items-center pt-8">
       <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
-        {orgName?.charAt(0)}
+        {currentOrg?.name?.charAt(0)}
       </div>
-      <div className="text-sm font-semibold text-primary">{orgName}</div>
+      <div className="text-sm font-semibold text-primary">{currentOrg?.name}</div>
       {isProjectRelated && (
         <>
           <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />

frontend/src/components/v2/Menu/Menu.tsx

@@ -31,18 +31,19 @@ export const MenuItem = <T extends ElementType = 'button'>({
   as: Item = 'button',
   description,
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
-  inputRef
+  inputRef,
+  ...props
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
   <li
     className={twMerge(
-      'px-2 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
-      isSelected && 'text-primary',
+      'px-3 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
+      isSelected && 'text-primary bg-gray-700',
       isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
       className
     )}
   >
-    <Item type="button" role="menuitem" class="flex items-center" ref={inputRef}>
-      {icon && <span className="mr-2">{icon}</span>}
+    <Item type="button" role="menuitem" className="flex items-center" ref={inputRef} {...props}>
+      {icon && <span className="mr-3">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
     </Item>
     {description && <span className="mt-2 text-xs">{description}</span>}

frontend/src/components/v2/Select/Select.tsx

@@ -12,13 +12,14 @@ type Props = {
   className?: string;
   dropdownContainerClassName?: string;
   isLoading?: boolean;
+  position?: 'item-aligned' | 'popper';
 };
 
 export type SelectProps = SelectPrimitive.SelectProps & Props;
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   (
-    { children, placeholder, className, isLoading, dropdownContainerClassName, ...props },
+    { children, placeholder, className, isLoading, dropdownContainerClassName, position, ...props },
     ref
   ): JSX.Element => {
     return (
@@ -44,6 +45,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
               'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
               dropdownContainerClassName
             )}
+            position={position}
+            style={{ width: 'var(--radix-select-trigger-width)' }}
           >
             <SelectPrimitive.ScrollUpButton>
               <FontAwesomeIcon icon={faChevronUp} size="sm" />