refactor: responsive of nav bar

huilensolis · May 11, 2024 · b51132f · b51132f
1 parent 60cd8a3
commit b51132f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/app/(site)/app/components/mobile-nav/index.tsx b/src/app/(site)/app/components/mobile-nav/index.tsx
@@ -6,7 +6,7 @@ import { IconLink } from "@/components/feature/nav/icon-link";
 export function MobileNavMenu() {
   return (
     <nav className="w-full flex items-center justify-center">
-      <ul className="flex items-center justify-center w-full gap-8 py-2 px-8 bg-neutral-200 dark:bg-cm-darker-gray border-t border-neutral-300 dark:border-neutral-700">
+      <ul className="flex items-center ss:justify-center justify-around gap-0 ss:gap-8 w-full py-2 px-8 bg-neutral-200 dark:bg-cm-darker-gray border-t border-neutral-300 dark:border-neutral-700">
         {NAV_LINKS.map((navLink) => (
           <li key={navLink.href}>
             <IconLink href={navLink.href} icon={navLink.icon} />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -27,6 +27,9 @@ const config: Config = {
       animation: {
         "shrink-from-left": "shrink-from-left 1.5s ease-out forwards",
       },
+      screens: {
+        ss: "400px",
+      },
     },
   },
   plugins: [],