From 2dc90344d9fbc479c20a90a4e3996e5279f05dd9 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 16 Oct 2024 21:55:25 +0900
Subject: [PATCH] chore: add gitbook

---
 .../HamburgerMenu/HamburgerMenu.tsx           | 29 +++++++++++++++++
 src/components/Header/Header/Header.tsx       | 31 +++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/src/components/HamburgerMenu/HamburgerMenu.tsx b/src/components/HamburgerMenu/HamburgerMenu.tsx
index 0878136..d173f25 100644
--- a/src/components/HamburgerMenu/HamburgerMenu.tsx
+++ b/src/components/HamburgerMenu/HamburgerMenu.tsx
@@ -1,5 +1,6 @@
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import Link from 'next/link'
 import { useState } from 'react'
 import Navbar from '../Header/Navbar/Navbar'
 
@@ -35,6 +36,27 @@ const HamburguerMenuContainer = styled.div`
   gap: 24px;
 `
 
+const GitbookButton = styled.button`
+  display: flex;
+  padding: 10px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  background: transparent;
+  border-radius: 32px;
+  width: 100%;
+  height: 40px;
+
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.12px;
+  margin-top: 24px;
+
+  color: white;
+  cursor: pointer;
+`
+
 const HamburguerMenu = () => {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -49,6 +71,13 @@ const HamburguerMenu = () => {
       {isOpen && (
         <HamburguerMenuContainer>
           <Navbar />
+          <Link
+            href="https://app.gitbook.com/o/JaXLyutHsCMnV7ROVSHw/s/Q0TLtn9WN6DR3Lzv4Gcs/logos-operators/pillars-and-contributions"
+            passHref
+            target="_blank"
+          >
+            <GitbookButton>Gitbook</GitbookButton>
+          </Link>
         </HamburguerMenuContainer>
       )}
     </>
diff --git a/src/components/Header/Header/Header.tsx b/src/components/Header/Header/Header.tsx
index bb60793..b9dedad 100644
--- a/src/components/Header/Header/Header.tsx
+++ b/src/components/Header/Header/Header.tsx
@@ -17,6 +17,15 @@ const Header: React.FC<NavbarProps> = () => {
         <Navbar />
       </DesktopNavbar>
       <UserActions>
+        <Link
+          href="https://app.gitbook.com/o/JaXLyutHsCMnV7ROVSHw/s/Q0TLtn9WN6DR3Lzv4Gcs/logos-operators/pillars-and-contributions"
+          passHref
+          target="_blank"
+        >
+          <GitbookButton>
+            <span>Gitbook</span>
+          </GitbookButton>
+        </Link>
         <Link
           href="https://discord.com/invite/logosnetwork"
           passHref
@@ -127,4 +136,26 @@ const Icon = styled.img`
   padding: 0;
 `
 
+const GitbookButton = styled.button`
+  display: flex;
+  padding: 6px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  background: transparent;
+  border-radius: 32px;
+
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.12px;
+
+  color: white;
+  cursor: pointer;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    display: none;
+  }
+`
+
 export default Header