transplant dropdowns

apps/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -82,7 +82,7 @@ export const InAppNotificationDropdown = (): JSX.Element => {
   }
 
   return (
-    <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler}>
+    <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler} direction="right">
       <DropdownToggle className="px-3 nav-link border-0 bg-transparent" innerRef={buttonRef}>
         <i className="icon-bell" /> {badge}
       </DropdownToggle>

apps/app/src/components/Layout/BasicLayout.tsx

@@ -4,8 +4,7 @@ import dynamic from 'next/dynamic';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-import { GrowiNavbar } from '../Navbar/GrowiNavbar';
-import Sidebar from '../Sidebar';
+import { Sidebar } from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
 

apps/app/src/components/Navbar/GrowiNavbar.module.scss

@@ -62,17 +62,6 @@
     background: rgba(0, 0, 0, 0.2);
   }
 
-  .grw-apperance-mode-dropdown,
-  .grw-personal-dropdown {
-    .dropdown-menu {
-      min-width: 15rem;
-
-      .grw-icon-container svg {
-        width: 18px;
-        height: 18px;
-      }
-    }
-  }
   .grw-email-sm {
     font-size: 0.75em;
   }

apps/app/src/components/Navbar/GrowiNavbar.tsx

@@ -19,11 +19,6 @@ import { GlobalSearchProps } from './GlobalSearch';
 
 import styles from './GrowiNavbar.module.scss';
 
-const PersonalDropdown = dynamic(() => import('./PersonalDropdown'), { ssr: false });
-const InAppNotificationDropdown = dynamic(() => import('../InAppNotification/InAppNotificationDropdown')
-  .then(mod => mod.InAppNotificationDropdown), { ssr: false });
-const AppearanceModeDropdown = dynamic(() => import('./AppearanceModeDropdown').then(mod => mod.AppearanceModeDropdown), { ssr: false });
-
 const NavbarRight = memo((): JSX.Element => {
   const { t } = useTranslation();
 
@@ -42,10 +37,6 @@ const NavbarRight = memo((): JSX.Element => {
   const authenticatedNavItem = useMemo(() => {
     return (
       <>
-        <li className="nav-item">
-          <InAppNotificationDropdown />
-        </li>
-
         {!isReadOnlyUser
           && <li className="nav-item d-none d-md-block">
             <button
@@ -60,28 +51,17 @@ const NavbarRight = memo((): JSX.Element => {
             </button>
           </li>
         }
-
-        <li className="grw-apperance-mode-dropdown nav-item dropdown">
-          <AppearanceModeDropdown isAuthenticated={isAuthenticated} />
-        </li>
-
-        <li className="grw-personal-dropdown nav-item dropdown dropdown-toggle dropdown-toggle-no-caret" data-testid="grw-personal-dropdown">
-          <PersonalDropdown />
-        </li>
       </>
     );
-  }, [isReadOnlyUser, t, isAuthenticated, openCreateModal, currentPagePath]);
+  }, [isReadOnlyUser, t, openCreateModal, currentPagePath]);
 
   const notAuthenticatedNavItem = useMemo(() => {
     return (
       <>
-        <li className="grw-apperance-mode-dropdown nav-item dropdown">
-          <AppearanceModeDropdown isAuthenticated={isAuthenticated} />
-        </li>
         <li id="login-user" className="nav-item"><a className="nav-link" href="/login">Login</a></li>
       </>
     );
-  }, [isAuthenticated]);
+  }, []);
 
   return (
     <>

apps/app/src/components/Navbar/AppearanceModeDropdown.tsx → apps/app/src/components/Sidebar/AppearanceModeDropdown.tsx

@@ -101,16 +101,16 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
   }, [isPreferDrawerMode, isPreferDrawerModeOnEdit, preferDrawerModeSwitchModifiedHandler, t]);
 
   return (
-    <>
+    <div className="dropend">
       {/* setting button */}
       {/* remove .dropdown-toggle for hide caret */}
       {/* See https://stackoverflow.com/a/44577512/13183572 */}
-      <button className="bg-transparent border-0 nav-link" type="button" data-toggle="dropdown" ref={buttonRef} aria-haspopup="true">
-        <i className="icon-settings"></i>
+      <button className="btn btn-primary" type="button" data-bs-toggle="dropdown" ref={buttonRef} aria-haspopup="true">
+        <i className="material-icons">settings</i>
       </button>
 
       {/* dropdown */}
-      <div className="dropdown-menu dropdown-menu-right">
+      <div className="dropdown-menu">
 
         {/* sidebar mode */}
         {renderSidebarModeSwitch(false)}
@@ -170,7 +170,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
 
       </div>
 
-    </>
+    </div>
   );
 
 };

apps/app/src/components/Sidebar/PersonalDropdown.jsx → apps/app/src/components/Sidebar/PersonalDropdown.tsx

@@ -12,7 +12,7 @@ import { useCurrentUser } from '~/stores/context';
 
 const ProactiveQuestionnaireModal = dynamic(() => import('~/features/questionnaire/client/components/ProactiveQuestionnaireModal'), { ssr: false });
 
-const PersonalDropdown = () => {
+export const PersonalDropdown = (): JSX.Element => {
   const { t } = useTranslation('commons');
   const { data: currentUser } = useCurrentUser();
 
@@ -103,5 +103,3 @@ const PersonalDropdown = () => {
   );
 
 };
-
-export default PersonalDropdown;

apps/app/src/components/Sidebar.tsx → apps/app/src/components/Sidebar/Sidebar.tsx

@@ -14,17 +14,18 @@ import {
   useSidebarScrollerRef,
 } from '~/stores/ui';
 
-import DrawerToggler from './Navbar/DrawerToggler';
-import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
-import { SidebarNav } from './Sidebar/SidebarNav';
-import { SidebarSkeleton } from './Sidebar/Skeleton/SidebarSkeleton';
-import { StickyStretchableScrollerProps } from './StickyStretchableScroller';
+import DrawerToggler from '../Navbar/DrawerToggler';
+import { StickyStretchableScrollerProps } from '../StickyStretchableScroller';
+
+import { NavigationResizeHexagon } from './NavigationResizeHexagon';
+import { SidebarNav } from './SidebarNav';
+import { SidebarSkeleton } from './Skeleton/SidebarSkeleton';
 
 import styles from './Sidebar.module.scss';
 
-const StickyStretchableScroller = dynamic<StickyStretchableScrollerProps>(() => import('./StickyStretchableScroller')
+const StickyStretchableScroller = dynamic<StickyStretchableScrollerProps>(() => import('../StickyStretchableScroller')
   .then(mod => mod.StickyStretchableScroller), { ssr: false });
-const SidebarContents = dynamic(() => import('./Sidebar/SidebarContents')
+const SidebarContents = dynamic(() => import('./SidebarContents')
   .then(mod => mod.SidebarContents), { ssr: false, loading: () => <SidebarSkeleton /> });
 
 const sidebarMinWidth = 240;
@@ -90,7 +91,7 @@ const SidebarContentsWrapper = memo(() => {
 SidebarContentsWrapper.displayName = 'SidebarContentsWrapper';
 
 
-const Sidebar = memo((): JSX.Element => {
+export const Sidebar = memo((): JSX.Element => {
 
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
@@ -358,5 +359,3 @@ const Sidebar = memo((): JSX.Element => {
 
 });
 Sidebar.displayName = 'Sidebar';
-
-export default Sidebar;

apps/app/src/components/Sidebar/SidebarNav.module.scss

@@ -1,3 +1,5 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
 @use '~/styles/variables' as var;
 
 .grw-sidebar-nav :global {
@@ -20,6 +22,10 @@
     }
   }
 
+  // set position and z-index to prevent dropdowns covered by other element
+  position: relative;
+  z-index: bs.$zindex-fixed;
+
   height: 100vh;
 
   .grw-logo {
@@ -30,6 +36,18 @@
     }
   }
 
+  .grw-apperance-mode-dropdown,
+  .grw-personal-dropdown {
+    .dropdown-menu {
+      min-width: 15rem;
+
+      .grw-icon-container svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
   .btn {
     width: var.$grw-sidebar-nav-width;
     line-height: 1em;

apps/app/src/components/Sidebar/SidebarNav.tsx

@@ -2,11 +2,14 @@ import React, {
   FC, memo, useCallback,
 } from 'react';
 
+import dynamic from 'next/dynamic';
 import Link from 'next/link';
 
 import { useUserUISettings } from '~/client/services/user-ui-settings';
 import { SidebarContentsType } from '~/interfaces/ui';
-import { useIsAdmin, useGrowiCloudUri, useIsDefaultLogo } from '~/stores/context';
+import {
+  useIsAdmin, useGrowiCloudUri, useIsDefaultLogo, useIsGuestUser,
+} from '~/stores/context';
 import { useCurrentSidebarContents } from '~/stores/ui';
 
 import { SidebarBrandLogo } from './SidebarBrandLogo';
@@ -14,6 +17,12 @@ import { SidebarBrandLogo } from './SidebarBrandLogo';
 import styles from './SidebarNav.module.scss';
 
 
+const PersonalDropdown = dynamic(() => import('./PersonalDropdown').then(mod => mod.PersonalDropdown), { ssr: false });
+const InAppNotificationDropdown = dynamic(() => import('../InAppNotification/InAppNotificationDropdown')
+  .then(mod => mod.InAppNotificationDropdown), { ssr: false });
+const AppearanceModeDropdown = dynamic(() => import('./AppearanceModeDropdown').then(mod => mod.AppearanceModeDropdown), { ssr: false });
+
+
 type PrimaryItemProps = {
   contents: SidebarContentsType,
   label: string,
@@ -85,11 +94,14 @@ type Props = {
 
 export const SidebarNav: FC<Props> = (props: Props) => {
   const { data: isAdmin } = useIsAdmin();
+  const { data: isGuestUser } = useIsGuestUser();
   const { data: growiCloudUri } = useGrowiCloudUri();
   const { data: isDefaultLogo } = useIsDefaultLogo();
 
   const { onItemSelected } = props;
 
+  const isAuthenticated = isGuestUser === false;
+
   return (
     <div className={`grw-sidebar-nav ${styles['grw-sidebar-nav']}`}>
       {/* Brand Logo  */}
@@ -112,6 +124,10 @@ export const SidebarNav: FC<Props> = (props: Props) => {
         <PrimaryItem contents={SidebarContentsType.BOOKMARKS} label="Bookmarks" iconName="bookmark" onItemSelected={onItemSelected} />
       </div>
       <div className="grw-sidebar-nav-secondary-container">
+        <AppearanceModeDropdown isAuthenticated={isAuthenticated} />
+        <PersonalDropdown />
+        <InAppNotificationDropdown />
+
         {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}
         {/* <SecondaryItem label="Draft" iconName="file_copy" href="/me/drafts" /> */}
         <SecondaryItem label="Help" iconName="help" href={ growiCloudUri != null ? 'https://growi.cloud/help/' : 'https://docs.growi.org' } isBlank />

apps/app/src/components/Sidebar/index.ts

@@ -0,0 +1 @@
+export * from './Sidebar';