diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index d0189b847..15275affc 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -1,3 +1,7 @@ .root { - @apply flex justify-between items-center px-4 py-5; + @apply px-4 py-5; +} + +.container { + @apply flex justify-between items-center flex-row; } diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx index 49c77871b..e5036ed7d 100644 --- a/components/Navbar/Navbar.tsx +++ b/components/Navbar/Navbar.tsx @@ -1,7 +1,7 @@ import cn from "classnames"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import s from "./Navbar.module.css"; -import { Logo } from "ui"; +import { Logo, Container } from "ui"; interface Props { className?: string; children?: any; @@ -11,10 +11,12 @@ const Navbar: FunctionComponent = ({ className }) => { const rootClassName = cn(s.root, className); return (
- -
SEARCH BAR
-
Menu list bar
-
Menu Icon bar
+ + +
SEARCH BAR
+
Menu list bar
+
Menu Icon bar
+
); }; diff --git a/pages/index.tsx b/pages/index.tsx index 761d12e0b..7e202e306 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,7 +9,7 @@ export default function Home() { title="Free Standard Shipping on orders over $99.99" description="Due to COVID-19, some orders may experience processing and delivery delays." /> - + diff --git a/ui/Container/Container.module.css b/ui/Container/Container.module.css index 8f87e20dc..b244b6372 100644 --- a/ui/Container/Container.module.css +++ b/ui/Container/Container.module.css @@ -1,3 +1,4 @@ .root { - @apply max-w-6xl mx-auto; + @apply max-w-6xl mx-auto px-2; + display: inherit; }