fix: modified css module (#7570)

* fix: modified css module

* fix: active link

* fix: separate type import

Author: AugustinMauroy

apps/site/components/withProgressionSidebar.tsx

@@ -2,7 +2,8 @@
 
 import ProgressionSidebar from '@node-core/ui-components/Common/ProgressionSidebar';
 import { usePathname } from 'next/navigation';
-import { useTranslations, type RichTranslationValues } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
+import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
 import Link from '@/components/Link';
@@ -21,6 +22,7 @@ const WithProgressionSidebar: FC<WithProgressionSidebarProps> = ({
 }) => {
   const { getSideNavigation } = useSiteNavigation();
   const pathname = usePathname();
+  const locale = useLocale();
   const t = useTranslations();
   const { push } = useRouter();
   const [[, sidebarNavigation]] = getSideNavigation([navKey], context);
@@ -35,7 +37,7 @@ const WithProgressionSidebar: FC<WithProgressionSidebarProps> = ({
   return (
     <ProgressionSidebar
       groups={mappedProgressionSidebarItems}
-      pathname={pathname!}
+      pathname={pathname?.replace(`/${locale}`, '')}
       title={t('components.common.sidebar.title')}
       onSelect={push}
       as={Link}

apps/site/components/withSidebar.tsx

@@ -2,7 +2,8 @@
 
 import Sidebar from '@node-core/ui-components/Containers/Sidebar';
 import { usePathname } from 'next/navigation';
-import { useTranslations, type RichTranslationValues } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
+import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
 import Link from '@/components/Link';
@@ -18,6 +19,7 @@ type WithSidebarProps = {
 const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context }) => {
   const { getSideNavigation } = useSiteNavigation();
   const pathname = usePathname()!;
+  const locale = useLocale();
   const t = useTranslations();
   const { push } = useRouter();
 
@@ -31,7 +33,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context }) => {
   return (
     <Sidebar
       groups={mappedSidebarItems}
-      pathname={pathname}
+      pathname={pathname.replace(`/${locale}`, '')}
       title={t('components.common.sidebar.title')}
       onSelect={value => push(value)}
       as={Link}

packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css

@@ -1,29 +1,33 @@
-.wrapper {
+.sideBarItem {
   @apply flex
     w-full
-    flex-col
-    items-start
-    gap-8
-    overflow-auto
-    overflow-x-hidden
-    border-r-neutral-200
-    bg-white
-    px-4
-    py-6
-    sm:border-r
-    md:max-w-xs
-    lg:px-6
-    dark:border-r-neutral-900
-    dark:bg-neutral-950;
+    list-none
+    text-neutral-800
+    dark:text-neutral-200;
 
-  > section {
-    @apply hidden
-      sm:flex;
+  a {
+    @apply inline-flex
+      items-center
+      gap-2
+      p-2;
   }
 
-  > span {
-    @apply flex
+  .label {
+    @apply font-regular
       w-full
-      sm:hidden;
+      text-sm;
   }
+
+  .icon {
+    @apply size-3
+      text-neutral-500
+      dark:text-neutral-200;
+  }
+}
+
+.active {
+  @apply rounded
+    bg-green-600
+    text-white
+    dark:text-white;
 }