refactor(language panel): moved language panel from navbar to sidebar

components/framework/Sidebar.tsx

@@ -1,11 +1,19 @@
-import { BookOpenIcon, ViewGridIcon } from "@heroicons/react/solid";
-import { useTranslation } from "next-i18next";
+import { Menu } from "@fluid-design/fluid-ui";
+import {
+  BookOpenIcon,
+  ViewGridIcon,
+  ChevronUpIcon,
+  GlobeIcon,
+} from "@heroicons/react/solid";
+import { i18n, useTranslation } from "next-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
 import clsxm from "../../lib/clsxm";
+import { languages } from "../../lib/languages";
 import packageInfo from "../../package.json";
 import AppLogo from "../ui/AppLogo";
+import UnstyledLink from "./UnstyledLink";
 
 const navigation = [
   { name: "Examples", href: "examples", icon: ViewGridIcon },
@@ -59,20 +67,24 @@ const secondaryNavigation = [
 
 export const SidebarMenu = () => {
   const router = useRouter();
-  const activeTab = router?.pathname?.split("/")?.pop();
+  const { pathname, asPath, query } = router;
+  const activeTab = pathname?.split("/")?.pop();
   const { t } = useTranslation();
   return (
     <div className="top-0 left-0 z-40 flex max-h-screen min-h-screen w-64 overflow-y-auto overflow-x-hidden border-r border-primary-200 bg-primary-50 pb-4 contrast-more:border-primary-600 dark:border-primary-700 dark:bg-primary-900 dark:contrast-more:border-primary-200 dark:contrast-more:bg-[rgb(18,15,13)] md:w-56 2xl:w-64">
-      <div className="w-full">
+      <div className="flex w-full flex-1 flex-grow flex-col justify-between">
         <div className="sticky top-0 z-10 mx-2.5 mt-2 flex items-center justify-start space-x-2 bg-primary-50/80 pt-2 pb-3 backdrop-blur-md backdrop-filter dark:bg-primary-900/80 lg:mx-4">
           <span className="sr-only">Fluid Design</span>
           <AppLogo />
-          <div className="-mt-[0.125rem] font-[Nunito] font-bold text-primary-700 dark:text-primary-200 md:!text-[1.175rem]">
-            <p>Fluid Design</p>
+          <UnstyledLink
+            href="/"
+            className="-mt-[0.125rem] font-rounded font-bold text-primary-700 dark:text-primary-200 md:!text-[1.175rem]"
+          >
+            <div>Fluid Design</div>
             <div className="-mt-1.5 text-left font-sans text-[0.6rem] font-bold tracking-wide text-primary-500 contrast-more:text-primary-900 dark:text-primary-400 dark:contrast-more:text-primary-50">
               V{packageInfo.version}
             </div>
-          </div>
+          </UnstyledLink>
         </div>
         <nav
           className="flex flex-1 flex-col gap-2 p-1 px-4 pb-8"
@@ -172,6 +184,26 @@ export const SidebarMenu = () => {
               </div>
             </div>
           ))}
+          <Menu
+            buttonClassName="hocus:contrast-bg hocus:contrast-text clickable group flex justify-start items-center rounded-md border border-transparent px-3 py-2 text-sm font-regular text-primary-700 transition-colors hocus:text-primary-800 contrast-more:text-primary-900 dark:text-primary-300/80 dark:hocus:text-primary-100 dark:contrast-more:text-primary-100 w-full"
+            label={t(`Language`, { ns: "navbar" })}
+            iconStart={GlobeIcon}
+            iconEnd={ChevronUpIcon}
+            iconEndPosition="between"
+            menuPositionY="top"
+            iconClassName="w-4 h-4"
+            menus={languages.map(({ code, country_code, name }) => ({
+              label: name,
+              icon: <span className={`fi fi-${country_code} rounded-sm`} />,
+              role: "default",
+              disabled: code === i18n?.language,
+              sr: t("switch-language", { ns: "navbar", name }),
+              onClick: () =>
+                router.push({ pathname, query }, asPath, {
+                  locale: code,
+                }),
+            }))}
+          />
         </nav>
       </div>
     </div>