add: fix responsive layout transition

pkgs/ui/pconf.cjs

@@ -1,4 +1,5 @@
 // prettier.config.js
 module.exports = {
   plugins: ["prettier-plugin-tailwindcss"],
+  tailwindFunctions: ["clsx", "tw"],
 };

pkgs/ui/src/app/layout.tsx

@@ -16,8 +16,8 @@ import { StyledEngineProvider } from "@mui/material/styles";
 import { darkTheme, lightTheme } from "./theme/themes";
 import { Sidebar } from "@/components/sidebar";
 import MenuIcon from "@mui/icons-material/Menu";
-import { ChevronLeft } from "@mui/icons-material";
 import Image from "next/image";
+import { tw } from "@/utils/tailwind";
 
 const roboto = localFont({
   src: [
@@ -29,6 +29,9 @@ const roboto = localFont({
   ],
 });
 
+// add negative margin for smooth transition to fill the space of the sidebar
+const translate = tw`lg:-ml-64 -ml-14`;
+
 export default function RootLayout({
   children,
 }: {
@@ -65,8 +68,12 @@ export default function RootLayout({
                 show={showSidebar}
                 onClose={() => setShowSidebar(false)}
               />
-              <div className="flex flex-col w-full h-full">
+              <div
-                <div className="static min-h-10 top-0 mb-2 py-2">
+                className={tw`${
+                  !showSidebar && translate
+                } flex h-full w-full flex-col transition-[margin] ease-in-out duration-150`}
+              >
+                <div className="min-h-10 static top-0 mb-2 py-2">
                   <div className="grid grid-cols-3">
                     <div className="col-span-1">
                       <IconButton
@@ -76,7 +83,7 @@ export default function RootLayout({
                         {!showSidebar && <MenuIcon />}
                       </IconButton>
                     </div>
-                    <div className="col-span-1 block lg:hidden w-full text-center font-semibold text-white ">
+                    <div className="col-span-1 block w-full text-center font-semibold text-white lg:hidden ">
                       <Image
                         src="/logo.svg"
                         alt="Clan Logo"

pkgs/ui/src/components/sidebar/index.tsx

@@ -63,8 +63,8 @@ const menuEntries: MenuEntry[] = [
   },
 ];
 
-const hideSidebar = tw`-translate-x-12 absolute lg:-translate-x-64`;
+const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`;
-const showSidebar = tw`lg:translate-x-0 static`;
+const showSidebar = tw`lg:translate-x-0`;
 
 interface SidebarProps {
   show: boolean;
@@ -76,7 +76,7 @@ export function Sidebar(props: SidebarProps) {
     <aside
       className={tw`${
         show ? showSidebar : hideSidebar
-      } z-9999 dark:bg-boxdark left-0 top-0 flex h-screen w-12 flex-col overflow-x-hidden overflow-y-hidden bg-zinc-950 lg:w-64 transition ease-in-out duration-150`}
+      } z-9999 dark:bg-boxdark static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-zinc-950 transition duration-150 ease-in-out lg:w-64`}
     >
       <div className="py-5.5 lg:py-6.5 flex items-center justify-between gap-2 overflow-hidden px-0 lg:px-6">
         <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
@@ -91,15 +91,15 @@ export function Sidebar(props: SidebarProps) {
       </div>
       <Divider
         flexItem
-        className="mx-8 mb-4 mt-9 bg-zinc-600 hidden lg:block"
+        className="mx-8 mb-4 mt-9 hidden bg-zinc-600 lg:block"
       />
-      <div className="w-full flex justify-center">
+      <div className="flex w-full justify-center">
         <IconButton size="large" className="text-white" onClick={onClose}>
           <ChevronLeftIcon fontSize="inherit" />
         </IconButton>
       </div>
       <div className="flex flex-col overflow-hidden overflow-y-auto">
-        <List className="mb-14 px-0 pb-4 text-white lg:px-4 lg:mt-1">
+        <List className="mb-14 px-0 pb-4 text-white lg:mt-1 lg:px-4">
           {menuEntries.map((menuEntry, idx) => {
             return (
               <ListItem
@@ -131,7 +131,7 @@ export function Sidebar(props: SidebarProps) {
           })}
         </List>
 
-        <Divider flexItem className="mx-8 my-10 bg-zinc-600 hidden lg:block" />
+        <Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
         <div className="max-w-60 shadow-default mx-auto mb-8 hidden w-full rounded-sm px-4 py-6 text-center align-bottom lg:block">
           <h3 className="mb-1 w-full font-semibold text-white">
             Clan.lol Admin