Replace Navbar with Sidebar

apps/gitness/src/components-v2/app-shell.tsx

@@ -3,15 +3,15 @@ import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import { cn } from '@harnessio/canary'
 import {
+  AppSidebar,
   ManageNavigation,
   MenuGroupType,
   MenuGroupTypes,
   MoreSubmenu,
-  Navbar,
   NavbarItemType,
-  SettingsMenu
+  SettingsMenu,
+  Sidebar
 } from '@harnessio/ui/components'
-import { SandboxLayout } from '@harnessio/ui/views'
 
 import { useNav } from '../components/stores/recent-pinned-nav-links.store'
 import { getNavbarMenuData } from '../data/navbar-menu-data'
@@ -175,41 +175,41 @@ export const AppShell = () => {
   useRepoImportEvents()
 
   return (
-    <SandboxLayout.Root>
-      <SandboxLayout.LeftPanel>
-        <Navbar
-          showMoreMenu={showMoreMenu}
-          showSettingMenu={showSettingMenu}
-          handleMoreMenu={handleMoreMenu}
-          handleSettingsMenu={handleSettingsMenu}
-          currentUser={currentUser}
-          handleCustomNav={handleCustomNav}
-          handleLogOut={handleLogOut}
-          recentMenuItems={recentMenu}
-          pinnedMenuItems={pinnedMenu}
-          handleChangePinnedMenuItem={handleChangePinnedMenuItem}
-          handleRemoveRecentMenuItem={handleRemoveRecentMenuItem}
-          useThemeStore={useThemeStore}
-          useTranslationStore={useTranslationStore}
-        />
-      </SandboxLayout.LeftPanel>
-
-      <BreadcrumbsAndOutlet />
-
-      <MoreSubmenu showMoreMenu={showMoreMenu} handleMoreMenu={handleMoreMenu} items={moreMenu} />
-      <SettingsMenu showSettingMenu={showSettingMenu} handleSettingsMenu={handleSettingsMenu} items={settingsMenu} />
-      <ManageNavigation
-        pinnedItems={pinnedMenu}
-        recentItems={recentMenu}
-        navbarMenuData={getNavbarMenuData({ t, routes, spaceId: spaceIdPathParam, repoId })}
-        showManageNavigation={showCustomNav}
-        isSubmitting={false}
-        submitted={false}
-        onSave={handleSave}
-        onClose={handleCustomNav}
+    <Sidebar.Provider>
+      <AppSidebar
+        showMoreMenu={showMoreMenu}
+        showSettingMenu={showSettingMenu}
+        handleMoreMenu={handleMoreMenu}
+        handleSettingsMenu={handleSettingsMenu}
+        currentUser={currentUser}
+        handleCustomNav={handleCustomNav}
+        handleLogOut={handleLogOut}
+        recentMenuItems={recentMenu}
+        pinnedMenuItems={pinnedMenu}
+        handleChangePinnedMenuItem={handleChangePinnedMenuItem}
+        handleRemoveRecentMenuItem={handleRemoveRecentMenuItem}
+        useThemeStore={useThemeStore}
+        useTranslationStore={useTranslationStore}
       />
-      <Toaster />
-    </SandboxLayout.Root>
+
+      <Sidebar.Inset>
+        <BreadcrumbsAndOutlet />
+
+        <MoreSubmenu showMoreMenu={showMoreMenu} handleMoreMenu={handleMoreMenu} items={moreMenu} />
+        <SettingsMenu showSettingMenu={showSettingMenu} handleSettingsMenu={handleSettingsMenu} items={settingsMenu} />
+        <ManageNavigation
+          pinnedItems={pinnedMenu}
+          recentItems={recentMenu}
+          navbarMenuData={getNavbarMenuData({ t, routes, spaceId: spaceIdPathParam, repoId })}
+          showManageNavigation={showCustomNav}
+          isSubmitting={false}
+          submitted={false}
+          onSave={handleSave}
+          onClose={handleCustomNav}
+        />
+        <Toaster />
+      </Sidebar.Inset>
+    </Sidebar.Provider>
   )
 }
 
@@ -221,7 +221,7 @@ function BreadcrumbsAndOutlet({ className }: { className?: string }) {
   useRepoImportEvents()
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn('h-full flex flex-col', className)}>
       <div className="layer-high sticky top-0 bg-background-1">
         <Breadcrumbs />
       </div>

apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx

@@ -1,16 +1,24 @@
 import { Link, useMatches } from 'react-router-dom'
 
-import { Breadcrumb, Topbar } from '@harnessio/ui/components'
+import { Breadcrumb, Separator, Sidebar, Topbar } from '@harnessio/ui/components'
 
+import { useIsMFE } from '../../framework/hooks/useIsMFE'
 import { CustomHandle } from '../../framework/routing/types'
 
 function Breadcrumbs() {
   const matches = useMatches()
   const matchesWithBreadcrumb = matches.filter(match => (match.handle as CustomHandle)?.breadcrumb)
+  const isMFE = useIsMFE()
 
   return (
     <Topbar.Root>
       <Topbar.Left>
+        {!isMFE ? (
+          <>
+            <Sidebar.Trigger className="-ml-1" />
+            <Separator orientation="vertical" className="ml-1 mr-2 h-4" />
+          </>
+        ) : null}
         <Breadcrumb.Root className="select-none">
           <Breadcrumb.List>
             {matchesWithBreadcrumb.map((match, index) => {

packages/ui/src/components/icon.tsx

@@ -35,6 +35,7 @@ import Checks from '../icons/checks.svg'
 import ChevronDown from '../icons/chevron-down.svg'
 import ChevronFillDown from '../icons/chevron-fill-down.svg'
 import ChevronRight from '../icons/chevron-right.svg'
+import ChevronUpDown from '../icons/chevron-up-down.svg'
 import ChevronUp from '../icons/chevron-up.svg'
 import CircleArrowTopRight from '../icons/circle-arrow-top-right.svg'
 import CircleArrowTop from '../icons/circle-arrow-top.svg'
@@ -108,6 +109,7 @@ import InfrastructureGradient from '../icons/infrastructure-gradient.svg'
 import Infrastructure from '../icons/infrastructure-icon.svg'
 import Italicize from '../icons/italicize.svg'
 import Key from '../icons/key-icon.svg'
+import Language from '../icons/language.svg'
 import Lightning from '../icons/lightning.svg'
 import List from '../icons/list.svg'
 import NoDataBranches from '../icons/lists-data-icons/no-data-branches.svg'
@@ -210,9 +212,11 @@ const IconNameMap = {
   'chevron-down': ChevronDown,
   'chevron-right': ChevronRight,
   'chevron-up': ChevronUp,
+  'chevron-up-down': ChevronUpDown,
   'filter-list': FilterList,
   'info-circle': InfoCircle,
   'double-tick': DoubleTick,
+  language: Language,
   play: Play,
   download: Download,
   clock: Clock,

packages/ui/src/components/index.ts

@@ -16,6 +16,7 @@ export * from './alert-dialog'
 export * from './popover'
 export * from './avatar'
 export * from './navbar'
+export * from './navbar-new'
 export * from './navbar-skeleton'
 export * from './theme-selector'
 export * from './theme-selector/types'

packages/ui/src/components/language-selector/language-dialog.tsx

@@ -3,7 +3,12 @@ import { FC, useEffect, useState } from 'react'
 import { Dialog, Icon } from '@/components'
 import { cn } from '@utils/cn'
 
-import { LanguageCode, LanguageDialogProps } from './types'
+import { Language, LanguageCode, LanguageDialogProps, LanguageInterface } from './types'
+
+export const languages: LanguageInterface[] = [
+  { code: LanguageCode.EN, name: Language.English },
+  { code: LanguageCode.FR, name: Language.French }
+]
 
 const LanguageDialog: FC<LanguageDialogProps> = ({
   defaultLanguage = LanguageCode.EN,
@@ -33,14 +38,14 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
           {supportedLanguages.map(lang => (
             <button
               key={lang.code}
-              className="group relative flex cursor-pointer items-center justify-between rounded-md px-0 focus-visible:outline-none"
+              className="group relative flex cursor-pointer items-center justify-between rounded-md px-0 focus-visible:outline-none focus:ring-0"
               onClick={() => {
                 setSelectedLanguage(lang.code)
                 onChange(lang)
               }}
             >
               <div className="flex items-center gap-2">
-                <div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 text-foreground-3">
+                <div className="flex size-6 items-center justify-center rounded bg-background-12 text-12 text-foreground-3 uppercase">
                   {lang.code}
                 </div>
                 <span
@@ -55,7 +60,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
               {selectedLanguage === lang.code && <Icon className="text-icons-2" name="tick" size={12} />}
               <span
                 className={cn(
-                  'absolute -inset-x-2 -inset-y-1 rounded group-hover:bg-background-4 group-focus-visible:outline group-focus-visible:outline-offset-2 group-focus-visible:outline-borders-accent group-focus-visible:outline-2',
+                  'absolute -inset-x-2 -inset-y-1 rounded group-hover:bg-background-4',
                   selectedLanguage === lang.code && 'bg-background-4'
                 )}
                 aria-hidden

packages/ui/src/components/language-selector/types.ts

@@ -1,25 +1,11 @@
 export enum Language {
   English = 'English',
-  Bulgarian = 'Bulgarian',
-  Croatian = 'Croatian',
-  Czech = 'Czech',
-  French = 'French',
-  German = 'German – Standard',
-  Irish = 'Irish – Extended',
-  Russian = 'Russian – QWERTY',
-  LatinAmerican = 'Latin American'
+  French = 'French'
 }
 
 export enum LanguageCode {
-  EN = 'EN',
-  БГ = 'БГ',
-  HR = 'HR',
-  CZ = 'CZ',
-  FR = 'FR',
-  DE = 'DE',
-  IE = 'IE',
-  RU = 'РУ',
-  LA = 'LA'
+  EN = 'en',
+  FR = 'fr'
 }
 
 export interface LanguageInterface {