ui: make md breakpoint layout same as lg

flsilva · Feb 27, 2024 · 5c18a6d · 5c18a6d
1 parent 5549e4f
commit 5c18a6d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/app/app/layout.tsx b/src/app/app/layout.tsx
@@ -23,7 +23,7 @@ export default async function AppLayout({
     <div className="flex flex-col h-full overflow-hidden bg-white">
       <Header />
       <div className="flex h-full overflow-hidden">
-        <MainMenu className="hidden lg:flex" />
+        <MainMenu className="hidden md:flex" />
         <div className="w-full overflow-y-auto overflow-x-hidden md:flex">
           <div className="flex w-full flex-col px-4 md:pl-8 xl:pl-36  2xl:pl-60 md:max-w-[38rem] lg:max-w-[60rem]">
             <div className="pb-16">

diff --git a/src/features/app/shared/ui/Header.tsx b/src/features/app/shared/ui/Header.tsx
@@ -11,14 +11,14 @@ export const Header = async () => {
   return (
     <header className="flex w-full bg-green-700">
       <nav
-        className="relative flex w-full items-center justify-between px-3.5 lg:px-6 py-2"
+        className="relative flex w-full items-center justify-between px-3.5 md:px-6 py-2"
         aria-label="Global"
       >
-        <Link className="lg:hidden -m-2.5 rounded-md p-2.5 text-gray-700" href="/app/main-menu">
+        <Link className="md:hidden -m-2.5 rounded-md p-2.5 text-gray-700" href="/app/main-menu">
           <span className="sr-only">Open menu</span>
           <HamburgerMenuIcon className="fill-white hover:fill-green-500" />
         </Link>
-        <div className="hidden lg:flex">
+        <div className="hidden md:flex">
           <Logo color="white" width="1.5rem" height="1.5rem" />
         </div>
         <SettingsMenu userName={user.name} />

diff --git a/src/features/app/shared/ui/MainMenu.tsx b/src/features/app/shared/ui/MainMenu.tsx
@@ -17,7 +17,7 @@ export const MainMenu = ({ className }: ClassNamePropsOptional) => {
     <nav
       className={twMerge(
         'flex flex-col h-full w-full overflow-y-auto overflow-x-hidden',
-        'lg:w-80 px-4 py-4 bg-gray-50 rounded-lg lg:rounded-none',
+        'md:w-80 px-4 py-4 bg-gray-50 rounded-lg lg:rounded-none',
         'focus:outline-0 focus:ring-0 focus:outline-transparent focus:shadow-none',
         className,
       )}