SwingbyProtocol · ryenguyen7411 · May 29, 2023 · May 31, 2023 · Jun 2, 2023 · Jun 7, 2023
diff --git a/src/components/Globals/index.tsx b/src/components/Globals/index.tsx
@@ -5,13 +5,25 @@ import {
   PULSAR_GLOBAL_FONT_HREF,
 } from '@swingby-protocol/pulsar';
 import Head from 'next/head';
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import { useThemeSettings } from '../../modules/store/settings';
+import { useThemeSettings, useSystemTheme } from '../../modules/store/settings';
 import { Favicon } from '../Favicon';
 
 export const Globals = ({ children }: { children: React.ReactNode }) => {
   const [theme] = useThemeSettings();
+  const systemTheme = useSystemTheme();
+
+  useEffect(() => {
+    if (['light', 'dark'].includes(theme)) {
+      document.body.setAttribute('data-theme', theme);
+    } else if (['auto'].includes(theme)) {
+      document.body.setAttribute('data-theme', systemTheme);
+    } else {
+      document.body.removeAttribute('data-theme');
+    }
+  }, [theme, systemTheme]);
+
   return (
     <PulsarThemeProvider theme={theme}>
       <Head>

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,33 +1,54 @@
-import { SwingbyHeader, LocaleSwitcher, ThemeSwitcher } from '@swingby-protocol/header';
-import { useRouter } from 'next/router';
-import React, { useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Icon } from '@swingby-protocol/pulsar';
 
-import { useThemeSettings } from '../../modules/store/settings';
+import { Sidebar } from '../Sidebar';
+import { NavHandlerProps } from '../Layout';
+import { useOnboard } from '../../modules/onboard';
+import { AccountId } from '../../components/AccountId';
 
-import { HeaderContainer } from './styled';
+import {
+  HeaderContainer,
+  SidebarToggleMobile,
+  HeaderAction,
+  HeaderLogo,
+  ButtonConnect,
+} from './styled';
 
-export const Header = () => {
-  const { push, asPath, locales } = useRouter();
-  const { locale } = useIntl();
-  const [theme, setTheme] = useThemeSettings();
+type Props = NavHandlerProps;
 
-  const changeLocale = useCallback((locale: string) => push(asPath, null, { locale }), [
-    push,
-    asPath,
-  ]);
+const ConnectWallet = () => {
+  const { address, onboard } = useOnboard();
+
+  if (address) {
+    return <AccountId />;
+  }
 
   return (
-    <HeaderContainer>
-      <SwingbyHeader
-        logoHref={`/${locale}`}
-        barItems={
-          <>
-            <ThemeSwitcher theme={theme} onChange={setTheme} />
-            <LocaleSwitcher locale={locale} locales={locales} onChange={changeLocale} />
-          </>
-        }
-      />
+    <ButtonConnect
+      variant="primary"
+      size="state"
+      onClick={async () => await onboard?.walletSelect()}
+    >
+      <FormattedMessage id="pool.connectWallet" />
+    </ButtonConnect>
+  );
+};
+
+export const Header = ({ navOpen, toggleNav }: Props) => {
+  return (
+    <HeaderContainer open={navOpen}>
+      <Sidebar navOpen={navOpen} toggleNav={toggleNav} />
+
+      <HeaderLogo>
+        <SidebarToggleMobile onClick={toggleNav}>
+          <Icon.Hamburger />
+        </SidebarToggleMobile>
+      </HeaderLogo>
+
+      <HeaderAction>
+        <ConnectWallet />
+      </HeaderAction>
     </HeaderContainer>
   );
 };
diff --git a/src/components/Header/styled.tsx b/src/components/Header/styled.tsx
@@ -1,9 +1,64 @@
 import styled from 'styled-components';
+import { rem } from 'polished';
+import { Button } from '@swingby-protocol/pulsar';
 
-export const HeaderContainer = styled.div`
-  width: 100%;
-  left: 0;
-  top: 0;
+import { StylingConstants } from '../../modules/styles';
+
+const { media } = StylingConstants;
+
+export const HeaderContainer = styled.div<{ open: boolean }>`
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+  padding: ${({ theme }) => rem(theme.pulsar.size.street)};
+  background-color: var(--theme-card-color);
+  box-shadow: var(--theme-card-shadow);
+  border-bottom: 1px solid ${({ theme }) => theme.pulsar.color.border.normal};
+  transition: all 0.2s linear;
   z-index: 20;
+
+  @media (min-width: ${rem(media.md)}) {
+    left: ${({ open }) => (open ? '216px' : '72px')};
+  }
+`;
+
+export const HeaderLogo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => rem(theme.pulsar.size.closet)};
+`;
+
+export const HeaderAction = styled.div``;
+
+export const SidebarToggleMobile = styled.label`
+  cursor: pointer;
+
+  @media (min-width: ${rem(media.md)}) {
+    display: none;
+  }
+`;
+
+export const AppLogoLink = styled.a`
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > svg {
+    height: 1.5em;
+  }
+`;
+export const ButtonConnect = styled(Button)`
+  width: ${rem(176)};
+  z-index: 10;
+  background-color: var(--theme-blue-color);
+  :hover {
+    background-color: var(--theme-blue400-color);
+  }
 `;
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { mode } from '../../modules/env';
@@ -10,12 +10,24 @@ import { Header } from '../Header';
 import { Swap } from '../Swap';
 
 import { CookieConsentHandler } from './CookieConsentHandler';
-import { SwapContainer } from './styled';
+import { SwapContainer, LayoutBody } from './styled';
 
 type Props = { children: React.ReactNode };
 
+export type NavHandlerProps = {
+  navOpen: boolean;
+  toggleNav: (e: React.MouseEvent<HTMLElement>) => void;
+};
+
 export const Layout = ({ children }: Props) => {
   const dispatch = useDispatch();
+  const [navOpen, setNavOpen] = useState(false);
+
+  const toggleNav = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setNavOpen(!navOpen);
+  };
 
   useEffect(() => {
     (async () => {
@@ -28,13 +40,15 @@ export const Layout = ({ children }: Props) => {
     <>
       <SdkContextProvider mode={mode}>
         <OnboardProvider>
-          <Header />
+          <Header navOpen={navOpen} toggleNav={toggleNav} />
 
-          <SwapContainer>
-            <Swap />
-          </SwapContainer>
+          <LayoutBody open={navOpen}>
+            <SwapContainer>
+              <Swap />
+            </SwapContainer>
 
-          {children}
+            {children}
+          </LayoutBody>
         </OnboardProvider>
       </SdkContextProvider>
 

diff --git a/src/components/Layout/styled.tsx b/src/components/Layout/styled.tsx
@@ -1,6 +1,10 @@
 import { rem } from 'polished';
 import styled from 'styled-components';
 
+import { StylingConstants } from '../../modules/styles';
+
+const { media } = StylingConstants;
+
 export const SwapContainer = styled.div`
   max-width: ${rem(847)};
   display: flex;
@@ -9,3 +13,23 @@ export const SwapContainer = styled.div`
   margin: 0 auto;
   padding-top: ${rem(70)};
 `;
+
+export const LayoutBody = styled.div<{ open: boolean }>`
+  transition: all 0.2s linear;
+
+  @media (min-width: ${rem(media.md)}) {
+    margin-left: ${({ open }) => (open ? '216px' : '72px')};
+  }
+`;
+
+export const AppLogoLink = styled.a`
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > svg {
+    height: 1.5em;
+  }
+`;
diff --git a/src/components/Search/styled.tsx b/src/components/Search/styled.tsx
@@ -13,6 +13,7 @@ export const SearchInput = styled(TextInput)`
   padding-left: ${({ theme }) => rem(theme.pulsar.size.closet)};
   padding-right: ${({ theme }) => rem(theme.pulsar.size.closet)};
   font-size: ${({ theme }) => rem(theme.pulsar.size.house)};
+
   @media (min-width: ${rem(media.sm)}) {
     width: ${rem(250)};
     font-size: ${({ theme }) => rem(theme.pulsar.size.room)};
@@ -34,6 +35,6 @@ export const SearchInput = styled(TextInput)`
 `;
 
 export const SearchIcon = styled(Icon.Search)`
-  color: ${({ theme }) => theme.pulsar.color.primary.normal};
+  color: var(--theme-blue-color);
   font-size: ${({ theme }) => rem(theme.pulsar.size.street)};
 `;