UI State changes

components/core/Layout/Layout.tsx

@@ -15,19 +15,21 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
   const { displaySidebar } = useUI();
   return (
-    <Container className={rootClassName}>
+    <div className={rootClassName}>
       <Featurebar
         title="Free Standard Shipping on orders over $99.99"
         description="Due to COVID-19, some orders may experience processing and delivery delays."
       />
-      <Navbar />
-      <main className="h-screen">{children}</main>
+      <Container>
+        <Navbar />
+        <main className="h-screen">{children}</main>
+      </Container>
       {displaySidebar && (
         <Sidebar>
           <CartSidebarView />
         </Sidebar>
       )}
-    </Container>
+    </div>
   );
 };
 

components/core/Navbar/Navbar.tsx

@@ -2,18 +2,14 @@ import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./Navbar.module.css";
 import { Logo, Container } from "@components/ui";
-import { Avatar, Searchbar } from "@components/core";
-import { Heart, Bag } from "@components/icon";
-import { useUI } from "@components/ui/context";
+import { Searchbar } from "@components/core";
+import { UserNav } from "@components/core";
 interface Props {
   className?: string;
-  children?: any;
 }
 
 const Navbar: FunctionComponent<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className);
-  const { openSidebar } = useUI();
-
   return (
     <Container className={rootClassName}>
       <Logo />
@@ -25,11 +21,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
           <a>Accesories</a>
         </nav>
       </div>
-      <nav className="flex flex-row items-center">
-        <Bag className="mr-6" onClick={openSidebar} />
-        <Heart className="mr-6" />
-        <Avatar />
-      </nav>
+      <UserNav />
     </Container>
   );
 };

components/core/UserNav/UserNav.module.css

@@ -0,0 +1,10 @@
+.root {
+}
+
+.list {
+  @apply flex flex-row items-center;
+}
+
+.item {
+  @apply mr-6 cursor-pointer;
+}

components/core/UserNav/UserNav.tsx

@@ -0,0 +1,33 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./UserNav.module.css";
+import { Avatar } from "@components/core";
+import { Heart, Bag } from "@components/icon";
+import { useUI } from "@components/ui/context";
+
+interface Props {
+  className?: string;
+}
+
+const UserNav: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  const { openSidebar } = useUI();
+
+  return (
+    <nav className={rootClassName}>
+      <ul className={s.list}>
+        <li className={s.item}>
+          <Bag onClick={openSidebar} />
+        </li>
+        <li className={s.item}>
+          <Heart />
+        </li>
+        <li className={s.item}>
+          <Avatar />
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default UserNav;

components/core/UserNav/index.ts

@@ -0,0 +1 @@
+export { default } from "./UserNav";

components/core/index.ts

@@ -4,3 +4,4 @@ export { default as Footer } from "./Footer";
 export { default as Layout } from "./Layout";
 export { default as Navbar } from "./Navbar";
 export { default as Searchbar } from "./Searchbar";
+export { default as UserNav } from "./UserNav";