feat: add navbar

package-lock.json

@@ -2145,6 +2145,14 @@
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.9.tgz",
       "integrity": "sha512-rqoFu4qww6KJBbXYhyRd9YXjwBHa3ylnBPSWbGf1bdfG0AYMKmVzg8zxkWvxAWOp97kvx3M2kNPb0xMIDZiogQ=="
     },
+    "@mui/icons-material": {
+      "version": "5.10.9",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.10.9.tgz",
+      "integrity": "sha512-sqClXdEM39WKQJOQ0ZCPTptaZgqwibhj2EFV9N0v7BU1PO8y4OcX/a2wIQHn4fNuDjIZktJIBrmU23h7aqlGgg==",
+      "requires": {
+        "@babel/runtime": "^7.19.0"
+      }
+    },
     "@mui/material": {
       "version": "5.10.9",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.9.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.9",
     "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.16.5",

src/components/Header/Header.scss

+@import "../../styles/mixin";
+
+.header {
+  &-toolbar {
+    padding: 0 !important;
+    justify-content: center;
+
+    @include desktop {
+      padding: 0 20px !important;
+      justify-content: flex-start;
+    }
+
+    &__iconDrawer {
+      display: none !important;
+
+      @include desktop {
+        display: inline-flex !important;
+      }
+    }
+
+    &__navbar {
+      display: flex;
+
+      @include desktop {
+        display: none;
+      }
+    }
+  }
+
+  &-list {
+    display: flex;
+    font-size: 13.5px;
+
+    @include desktop {
+      font-size: 15px;
+    }
+
+    &__item:nth-last-of-type(-n + 3) {
+      @media (max-width: 1300px) {
+        display: none;
+      }
+    }
+  }
+}

src/components/Header/index.tsx

+import React, { useRef, useState } from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import Toolbar from "@mui/material/Toolbar";
+import Button from "@mui/material/Button";
+import HomeIcon from "@mui/icons-material/Home";
+import Sidenav from "../Sidenav";
+import { Typography } from "@mui/material";
+
+const navItems = [
+  "Media",
+  "thời sự",
+  "thế giới",
+  "pháp luật",
+  "kinh doanh",
+  "công nghệ",
+  "xe",
+  "du lịch",
+  "nhịp sống trẻ",
+  "văn hóa",
+  "giải trí",
+  "thể thao",
+  "giáo dục",
+  "khoa học",
+  "sức khỏe",
+  "giả - thật",
+  "bạn đọc",
+];
+
+export default function Header() {
+  const headerRef = useRef<HTMLElement>(null);
+  const [mobileOpen, setMobileOpen] = useState<boolean>(false);
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  return (
+    <Box sx={{ display: "flex" }} className="header">
+      <AppBar
+        component="nav"
+        position="sticky"
+        sx={{ background: "transparent", overflow: "hidden" }}
+      >
+        <Toolbar
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            color: "#000",
+          }}
+          className="header-toolbar"
+        >
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2 }}
+            className="header-toolbar__iconDrawer"
+          >
+            <MenuIcon />
+          </IconButton>
+          <Box
+            sx={{ gap: 2 }}
+            ref={headerRef}
+            className="header-toolbar__navbar"
+          >
+            <Button sx={{ padding: 0, minWidth: "auto", color: "#000" }}>
+              <HomeIcon />
+            </Button>
+            <Box
+              className="header-list"
+              component="ul"
+              sx={{
+                gap: 2,
+                margin: 0,
+                padding: 0,
+                listStyleType: "none",
+              }}
+            >
+              {navItems.map((item) => (
+                <Box
+                  component="li"
+                  key={item}
+                  sx={{
+                    color: "#000",
+                    fontWeight: 700,
+                    padding: 0,
+                    minWidth: "auto",
+                    cursor: "pointer",
+                  }}
+                  className="header-list__item"
+                >
+                  {item}
+                </Box>
+              ))}
+            </Box>
+            <Button
+              sx={{ padding: 0, minWidth: "auto", color: "#999" }}
+              onClick={handleDrawerToggle}
+            >
+              <Typography sx={{ fontSize: 13, marginRight: "5px" }}>
+                Tất cả
+              </Typography>
+              <MenuIcon sx={{ fontSize: 17 }} />
+            </Button>
+          </Box>
+        </Toolbar>
+      </AppBar>
+      <Sidenav
+        handleDrawerToggle={handleDrawerToggle}
+        navItems={navItems}
+        mobileOpen={mobileOpen}
+      />
+    </Box>
+  );
+}

src/components/Sidenav/index.tsx

+import React from "react";
+import {
+  Box,
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+
+type Props = {
+  handleDrawerToggle: () => void;
+  navItems: Array<string>;
+  mobileOpen: boolean;
+};
+
+const drawerWidth = 240;
+const Sidenav = (props: Props) => {
+  const { navItems, handleDrawerToggle, mobileOpen } = props;
+
+  return (
+    <Box component="nav">
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={handleDrawerToggle}
+        ModalProps={{
+          keepMounted: true, // Better open performance on mobile.
+        }}
+        sx={{
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: drawerWidth,
+          },
+        }}
+      >
+        <Box onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
+          <Typography variant="h6" sx={{ my: 2 }}>
+            MUI
+          </Typography>
+          <Divider />
+          <List>
+            {navItems.map((item) => (
+              <ListItem key={item} disablePadding>
+                <ListItemButton sx={{ textAlign: "center" }}>
+                  <ListItemText primary={item} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Drawer>
+    </Box>
+  );
+};
+
+export default Sidenav;

src/declarations.d.ts

-/// <reference types="react-scripts" />
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.json";
+declare module "@mui/icons-material";

src/index.tsx

@@ -2,17 +2,16 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux/es/exports";
 import store from "./app/store";
+import Header from "./components/Header";
 import "./_styles.scss";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
-  <React.StrictMode>
   <Provider store={store}>
-      <></>
+    <Header />
   </Provider>
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/styles/_mixin.scss

@@ -11,7 +11,7 @@ $screen-xxl-up: 1400px;
 }
 
 @mixin mobile {
-  @media (max-width: #{$screen-sm-max +1}) {
+  @media (max-width: #{$screen-sm-max + 1}) {
     @content;
   }
 }
@@ -23,7 +23,13 @@ $screen-xxl-up: 1400px;
 }
 
 @mixin desktop {
-  @media (min-width: #{$screen-md-max + 1}) {
+  @media (max-width: #{$screen-lg-max + 1}) {
+    @content;
+  }
+}
+
+@mixin large-screen {
+  @media (min-width: #{$screen-lg-max + 1}) {
     @content;
   }
 }

src/styles/components.scss

+@use "../components/Header/Header.scss";

src/utils/helpers/checkOverflow.ts

+export const checkOverflow = (el: HTMLElement) => {
+  if (!el) return false;
+
+  var isOverflowing =
+    el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
+
+  return isOverflowing;
+};