✨ logo added to nav bar

src/app/blog/[slug]/index.module.scss

@@ -1,6 +1,25 @@
 @use '~/styles/utils.scss';
 @use 'src/styles/mixins' as *;
 
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 10px;
+  margin: 0 30px;
+
+  > .tag {
+    position: relative;
+    font-size: 1.4rem;
+  }
+
+  > .tag::before {
+    margin-right: 3px;
+    font-weight: 600;
+    color: utils.$shining-yellow-3;
+    content: '#';
+  }
+}
+
 .header {
   overflow: visible;
   position: relative;
@@ -44,7 +63,7 @@
   > .date {
     margin: 5px 30px;
     font-weight: 600;
-    font-size: 1.4rem;
+    font-size: 1.6rem;
   }
 }
 
@@ -53,27 +72,9 @@
   margin: 30px auto 80px;
   padding: 0 30px;
   overflow-x: hidden;
-  font-size: 1.4rem;
+  font-size: 1.6rem;
 }
 
-.tag-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0 10px;
-  margin: 0 30px;
-
-  > .tag {
-    position: relative;
-    font-size: 1.4rem;
-  }
-
-  > .tag::before {
-    margin-right: 3px;
-    font-weight: 600;
-    color: utils.$shining-yellow-3;
-    content: '#';
-  }
-
   // > .tag::after {
   //   position: absolute;
   //   bottom: 10%;
@@ -88,7 +89,6 @@
   // > .tag:hover::after {
   //   background-color: utils.$shining-yellow-2;
   // }
-}
 
 .content-wrapper {
   margin: 20px 0;

src/app/blog/[slug]/layout.module.scss

@@ -0,0 +1,4 @@
+.page-wrapper {
+  overflow-x: hidden;
+  margin-top: 50px;
+}

src/app/blog/[slug]/layout.tsx

@@ -1,14 +1,15 @@
-import { NavBarCommon } from "~/components/common/navBarCommon";
+import { NavBarCommon } from '~/components/common/navBarCommon';
+import styles from './layout.module.scss';
 
 type Props = {
   children: React.ReactNode;
 };
 
 export default function PostLayout({ children }: Props) {
   return (
-    <>
+    <div className={styles['page-wrapper']}>
       <NavBarCommon />
       {children}
-    </>
+    </div>
   );
-};
+}

src/components/common/navBarCommon/index.module.scss

@@ -1,7 +1,7 @@
 @use 'src/styles/mixins' as *;
 
 .nav-bar {
-  position: sticky;
+  position: fixed;
   top: 0;
   z-index: 100;
   width: 100%;
@@ -49,3 +49,11 @@
     max-width: 300px;
   }
 }
+
+.icons {
+  height: 30px;
+
+  @include sp() {
+    display: none;
+  }
+}

src/components/common/navBarCommon/index.tsx

@@ -1,10 +1,14 @@
 import Link from 'next/link';
+import LogoNav from '~/assets/icons/logo-nav.svg';
 import styles from './index.module.scss';
 
 export const NavBarCommon = () => {
   return (
     <nav className={styles['nav-bar']}>
       <ul className={styles['nav-items']}>
+        <li className={styles['icons']}>
+          <LogoNav />
+        </li>
         <li>
           <Link href="/about-me">ABOUT ME</Link>
         </li>

src/styles/globals.css

@@ -7,7 +7,6 @@
 html,
 body {
   margin: 0;
-  overflow-x: hidden;
   font-family: Jost, sans-serif;
   font-size: 10px;
   line-height: 1.5;