feat: @loacation and some branding theme

src/components/AppsBar.tsx

@@ -6,18 +6,28 @@ import Brightness7Icon from "@mui/icons-material/Brightness7";
 import Link from "next/link";
 
 const link = [
-  { title: "about", link: "/about" },
-  { title: "blog", link: "/blog" },
+  { title: "Home", link: "/about" },
+  { title: "log", link: "/blog" },
 ];
 
 export default function AppsBar() {
   const { toggleDarkMode, darkMode } = useThemeContext();
 
   return (
     <AppBar>
-      <Container>
-        <Toolbar>
-          <Box component="nav" sx={{ display: "flex", flexGrow: 1, gap: 4 }}>
+      <Container maxWidth={"sm"} disableGutters>
+        <Toolbar disableGutters={true}>
+          <Box
+            component="nav"
+            sx={{
+              display: "flex",
+              flexGrow: 1,
+              gap: 4,
+              "& ul": {
+                listStyleType: "none",
+              },
+            }}
+          >
             <ul>
               {link.map((item, index) => {
                 return (

src/layouts/AppsContainer.tsx

@@ -6,15 +6,23 @@ import { NextSeoProps } from "next-seo/lib/types";
 import Header from "@layouts/Header";
 import AppsBar from "@components/AppsBar";
 
+import useTheme from "@mui/material/styles/useTheme";
+
 interface props {
   children: React.ReactNode;
   basicSeo?: NextSeoProps;
 }
 
 export default function AppsContainer(AppsContainerProps: props) {
   const { children, basicSeo, ...rest } = AppsContainerProps;
+  const theme = useTheme();
+
   return (
-    <Container {...rest}>
+    <Container
+      disableGutters={theme.breakpoints.up("lg") === true}
+      maxWidth={"sm"}
+      {...rest}
+    >
       <NextSeo {...basicSeo} />
       <AppsBar />
       {children}

src/layouts/Footer.tsx

@@ -1,9 +1,27 @@
+import { Box, Typography } from "@mui/material";
+import Image from "next/image";
 import React from "react";
 
 export default function Footer() {
   return (
-    <footer>
-      <p>footer</p>
-    </footer>
+    <Box component={"footer"}>
+      <Box
+        sx={{
+          position: "relative",
+          borderRadius: "8px",
+          flexWrap: "hidden",
+          overflow: "hidden",
+          width: "36px",
+          height: "36px",
+        }}
+      >
+        <Image
+          src="/static/icons/maskable_icon_x48.png"
+          alt="NextJS-MUI-boilerplate logo"
+          fill
+        />
+      </Box>
+      <Typography variant="h6">Next-MUI-boilerplate</Typography>
+    </Box>
   );
 }

src/modules/brandingTheme.ts

@@ -1,4 +1,5 @@
 import { Rubik } from "@next/font/google";
+import { Poppins } from "@next/font/google";
 
 export const blue = {
   50: "#F0F7FF",
@@ -31,7 +32,7 @@ export const blueDark = {
 const rubik = Rubik({
   variable: "--rubik-font",
   subsets: ["latin"],
-  weight: ["400"],
+  weight: ["600"],
 });
 
 const systemFont = [

src/pages/index.tsx

@@ -12,7 +12,7 @@ export default function Home() {
 
   return (
     <AppsContainer>
-      <Box component="main">
+      <Box component="main" sx={{ height: "100vh" }}>
         <header>
           <h1>Title</h1>
         </header>

tsconfig.json

@@ -18,9 +18,7 @@
     "paths": {
       "@components/*": ["src/components/*"],
       "@layouts/*": ["src/layouts/*"],
-      "@modules/*": ["src/modules/*"],
-      "@types/*": ["lib/types/*"],
-      "@utils/*": ["lib/utils/*"]
+      "@modules/*": ["src/modules/*"]
     }
   },
   "include": [
@@ -29,7 +27,8 @@
     "**/*.tsx",
     "cypress/tsconfig.json",
     "next-i18next.config.js",
-    "next-i18next.config.js"
+    "next-i18next.config.js",
+    "next-sitemap.config.js"
   ],
   "exclude": ["node_modules"]
 }