refactor nabvar without search option

src/components/AppBar/AppBar.tsx

@@ -2,7 +2,12 @@ import { Searchbar } from '@/components/Searchbar'
 import { uiConfigs } from '@/configs/ui.configs'
 import { useSearchBarContext } from '@/context/searchbar.context'
 import { useScrollDirection } from '@/utils/ui.utils'
-import { IconButton, SearchIcon } from '@acid-info/lsd-react'
+import {
+  IconButton,
+  MenuIcon,
+  SearchIcon,
+  Typography,
+} from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -10,199 +15,156 @@ import { useEffect, useState } from 'react'
 import { LogosIcon } from '../Icons/LogosIcon'
 import { MoonIcon } from '../Icons/MoonIcon'
 import { SunIcon } from '../Icons/SunIcon'
+import { useThemeState } from '@/states/themeState'
+import { NavbarLinks } from '@/components/AppBar/Navbar.Links'
+import { NavLinksItems } from '@/configs/data.configs'
+import { NavbarMobileMenu } from '@/components/AppBar/Navbar.MobileMenu'
+import { ThemeSwitch } from '@/components/ThemeSwitch/ThemeSwitch'
 
-interface AppBarProps {
+interface AppBarProps {}
-  isDark: boolean
-  toggle: () => void
-  onSearch?: (query: string, tags: string[]) => void
-  onReset?: () => void
-}
 
-export default function AppBar({
+export default function AppBar({}: AppBarProps) {
-  isDark,
+  const themeState = useThemeState()
-  toggle,
-  onReset,
-  onSearch,
-}: AppBarProps) {
-  const { resultsNumber } = useSearchBarContext()
   const { pathname } = useRouter()
   const isSearchPage = pathname === '/search'
-
-  const [hideSearch, setHideSearch] = useState(
-    resultsNumber === null && !isSearchPage,
-  )
   const [hide, setHide] = useState(false)
   const scrollDirection = useScrollDirection()
-  const onSearchIconClick = () => {
+  const [showMobileMenu, setShowMobileMenu] = useState(false)
-    setHideSearch(!hideSearch)
-  }
-
-  useEffect(() => {
-    if (scrollDirection) {
-      setHide(scrollDirection === 'down')
-      if (!hideSearch && resultsNumber === null) {
-        setHideSearch(scrollDirection === 'down')
-      }
-    }
-    setHideSearch(resultsNumber === null)
-  }, [scrollDirection, resultsNumber])
 
   const className = pathname.split('/')[1] + '_page'
 
+  const onSearchIconClick = () => {}
+
+  const toggleMobileMenu = () => {
+    setShowMobileMenu(!showMobileMenu)
+  }
+
   return (
     <Container className={`${hide ? 'hide' : ''} ${className}`}>
-      <NavBar>
+      <NavBarContainer>
-        <LogosIconContainer href={'/'}>
+        <LeftContainer href={'/'}>
           <LogosIcon color="primary" />
-        </LogosIconContainer>
+          <PressLogoType variant={'h6'} genericFontFamily={'serif'}>
-        <Icons>
+            Press Engine
-          <IconButton size="small" onClick={() => toggle()}>
+          </PressLogoType>
-            <SunIcon color="primary" className="light-mode-hidden" />
+        </LeftContainer>
-            <MoonIcon color="primary" className="dark-mode-hidden" />
+        <NavLinksContainer>
-          </IconButton>
+          <NavbarLinks links={NavLinksItems} />
-          <IconButton
+        </NavLinksContainer>
-            className={'searchIcon searchIconHome'}
+        <ControlsContainer>
-            size="small"
+          <div className={'theme-switch'}>
-            onClick={() => onSearchIconClick()}
+            <ThemeSwitch
-          >
+              toggle={themeState.toggleMode}
-            <SearchIcon color="primary" />
+              mode={themeState.get().mode}
-          </IconButton>
-        </Icons>
-      </NavBar>
-      <MobileSearchContainer
-        className={`searchBar ${hideSearch ? 'hide' : ''}`}
-      >
-        <Searchbar
-          className={'mobile'}
-          onSearch={onSearch}
-          onReset={onReset}
-          withFilterTags={isSearchPage}
             />
-      </MobileSearchContainer>
+          </div>
+          <div className={'menu-button'}>
+            <IconButton size={'small'} onClick={toggleMobileMenu}>
+              <MenuIcon color={'primary'} />
+            </IconButton>
+          </div>
+          {/*<IconButton*/}
+          {/*    className={'searchIcon searchIconHome'}*/}
+          {/*    size="small"*/}
+          {/*    onClick={() => onSearchIconClick()}*/}
+          {/*>*/}
+          {/*    <SearchIcon color="primary"/>*/}
+          {/*</IconButton>*/}
+        </ControlsContainer>
+        {showMobileMenu && <NavbarMobileMenu />}
+      </NavBarContainer>
+      {/*<MobileSearchContainer*/}
+      {/*  className={`searchBar ${hideSearch ? 'hide' : ''}`}*/}
+      {/*>*/}
+      {/*  <Searchbar*/}
+      {/*    className={'mobile'}*/}
+      {/*    onSearch={onSearch}*/}
+      {/*    onReset={onReset}*/}
+      {/*    withFilterTags={isSearchPage}*/}
+      {/*  />*/}
+      {/*</MobileSearchContainer>*/}
     </Container>
   )
 }
 
-const Container = styled.div`
+const PressLogoType = styled(Typography)``
+
+const Container = styled.header`
   width: 100%;
-  transition: top 0.2s;
+  height: 44px;
+
   position: fixed;
   top: 0;
+  left: 0;
   z-index: 101;
-  left: calc(calc(100% - ${uiConfigs.maxContainerWidth}px) / 2);
 
-  &._page {
+  background: rgb(var(--lsd-surface-primary));
-    @media (min-width: 768px) {
+  transition: top 0.2s;
-      .searchBar {
-        display: none;
-      }
-    }
-    .searchIconHome {
-      display: none;
-    }
-  }
 
   &.article_page,
   &.search_page {
   }
-
-  @media (max-width: ${uiConfigs.maxContainerWidth}px) {
-    left: 16px;
-    width: calc(100% - 32px);
-  }
-
-  @media (max-width: 768px) {
-    left: 0;
-    width: 100%;
-    &.hide {
-      top: -44px;
-    }
-  }
-
-  > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
 `
 
-const MobileSearchContainer = styled.div`
+const NavBarContainer = styled.nav`
-  width: 100%;
-  transition: transform 0.3s ease-in-out;
-  z-index: 98;
-  transform: translateY(44px);
-
-  @media (max-width: 768px) {
-    display: block;
-    &.hide {
-      transform: translateY(0);
-    }
-  }
-`
-
-const NavBar = styled.nav`
   display: flex;
   padding: 8px 0;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  position: relative;
+
   border-bottom: 1px solid rgb(var(--lsd-theme-primary));
-  //position: fixed;
+
+  margin: auto;
+
   top: 0;
-  width: 100%;
+  width: calc(100% - 32px);
-  height: 44px;
   max-width: ${uiConfigs.maxContainerWidth}px;
-  background: rgb(var(--lsd-surface-primary));
-  z-index: 100;
   box-sizing: border-box;
 
-  &:last-child {
+  > * {
-    margin-left: auto;
+    display: flex;
-  }
+    align-items: center;
-
-  // to center-align logo
-  &:before {
-    content: 'D';
-    width: 54px;
-    margin: 1px auto 1px 1px;
-    visibility: hidden;
-  }
-
-  /* temporary breakpoint */
-  @media (max-width: 768px) {
-    padding: 8px;
-
-    &:before {
-      display: none;
-    }
   }
 `
 
-const LogosIconContainer = styled(Link)`
+const NavLinksContainer = styled.div`
-  display: flex;
+  flex: 1;
-  align-items: center;
   justify-content: center;
-  cursor: pointer;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
-    margin-left: unset;
+    display: none !important;
   }
 `
 
-const Icons = styled.div`
+const LeftContainer = styled(Link)`
+  flex: 0 0 auto;
+  text-decoration: none;
+  position: absolute;
+  left: 0;
   display: flex;
-  align-items: center;
-  margin-left: auto;
 
-  > *:last-of-type {
+  @media (max-width: 768px) {
-    margin-left: -1px;
+    position: relative;
+  }
+`
+
+const ControlsContainer = styled.div`
+  .theme-switch {
+    display: block;
   }
 
-  .searchIcon {
+  .menu-button {
     display: none;
   }
 
   @media (max-width: 768px) {
-    .searchIcon {
+    .theme-switch {
+      // hide theme switch
+      display: none;
+    }
+
+    .menu-button {
       display: block;
     }
   }

src/components/AppBar/Navbar.Links.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link'
+import styled from '@emotion/styled'
+
+interface Props {
+  links: { href: string; label: string }[]
+}
+
+export const NavbarLinks = ({ links }: Props) => {
+  return (
+    <Container>
+      {links.map((link, idx) => (
+        <>
+          <Link href={link.href} key={`navbar-link-${idx}`}>
+            {link.label}
+          </Link>
+          {idx !== links.length - 1 && <span className={'divider'} />}
+        </>
+      ))}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  a {
+    text-decoration: none;
+  }
+
+  .divider {
+    display: block;
+    width: 2px;
+    height: 2px;
+    background: rgb(var(--lsd-surface-secondary));
+    border-radius: 50%;
+    margin: 0 20px;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
+    flex-direction: column;
+    align-items: flex-start;
+    .divider {
+      display: none;
+    }
+  }
+`

src/components/AppBar/Navbar.MobileMenu.tsx

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled'
+import { NavbarLinks } from '@/components/AppBar/Navbar.Links'
+import { NavLinksItems } from '@/configs/data.configs'
+import { uiConfigs } from '@/configs/ui.configs'
+import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
+import { useThemeState } from '@/states/themeState'
+import { ThemeSwitchWithLabel } from '@/components/ThemeSwitch/ThemeSwitch'
+
+interface Props {}
+
+export const NavbarMobileMenu = (props: Props) => {
+  const themeState = useThemeState()
+  return (
+    <NavbarMobileMenuContainer>
+      <InnerContainer>
+        <NavbarLinks links={NavLinksItems} />
+        <FooterOrgPanel />
+        <ThemeSwitchWithLabel
+          toggle={themeState.toggleMode}
+          mode={themeState.get().mode}
+        />
+      </InnerContainer>
+    </NavbarMobileMenuContainer>
+  )
+}
+
+const NavbarMobileMenuContainer = styled.div`
+  position: fixed;
+  top: ${uiConfigs.navbarRenderedHeight - 1}px;
+  left: 0;
+  width: 100%;
+  height: calc(100vh - ${uiConfigs.navbarRenderedHeight - 2}px);
+  z-index: 100;
+  background: rgb(var(--lsd-surface-primary));
+`
+
+const InnerContainer = styled.div`
+  height: 100%;
+  width: calc(100% - 32px);
+  margin: auto;
+
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    border-top: 1px solid rgb(var(--lsd-theme-primary));
+    margin-top: 16px;
+  }
+`

src/components/Footer/Footer.BuPanel.tsx

@@ -0,0 +1,151 @@
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import { FooterLink } from '@/components/Footer/Footer.Link'
+import { FooterSectionContainer } from '@/components/Footer/Footer.Section'
+
+const SECOND_LINK_GROUP = [
+  {
+    title: 'Research',
+    links: [
+      { label: 'VacP2P', href: 'https://vac.dev/' },
+      { label: 'AFAIK', href: 'https://afaik.institute/' },
+    ],
+  },
+  {
+    title: 'Infrastructure',
+    links: [
+      { label: 'Waku', href: 'https://waku.org/' },
+      { label: 'Nimbus', href: 'https://nimbus.team/' },
+      { label: 'Codex', href: 'https://codex.storage/' },
+      { label: 'Nomos', href: 'https://nomos.tech/' },
+    ],
+  },
+  {
+    title: 'Creative Studio',
+    links: [{ label: 'Acid.info', href: 'https://acid.info/' }],
+  },
+]
+
+const THIRD_LINKS_GROUP = [
+  {
+    title: 'Movement',
+    links: [{ label: 'Logos', href: 'https://logos.co/' }],
+  },
+  {
+    title: 'User-facing Products',
+    links: [
+      { label: 'Status', href: 'https://status.im/' },
+      { label: 'Keycard', href: 'https://keycard.tech/' },
+    ],
+  },
+]
+export const FooterBuPanel = () => {
+  return (
+    <BusinessUnits>
+      <Wrapper>
+        <SecondLinksContainer>
+          {SECOND_LINK_GROUP.map(({ title, links }, idx) => (
+            <LinkGroup key={'second-group' + idx}>
+              <div>
+                <Typography
+                  component="div"
+                  genericFontFamily="sans-serif"
+                  variant="body2"
+                >
+                  {title}:
+                </Typography>
+              </div>
+              <Row>
+                {links.map(({ label, href }, idx) => (
+                  <FooterLink
+                    key={'second-group-link' + idx}
+                    component="a"
+                    href={href}
+                    genericFontFamily="sans-serif"
+                    variant="body2"
+                  >
+                    {label}
+                  </FooterLink>
+                ))}
+              </Row>
+            </LinkGroup>
+          ))}
+        </SecondLinksContainer>
+        <ThirdLinksContainer>
+          {THIRD_LINKS_GROUP.map(({ title, links }, idx) => (
+            <LinkGroup key={'third-group' + idx}>
+              <div>
+                <Typography
+                  component="div"
+                  genericFontFamily="sans-serif"
+                  variant="body2"
+                >
+                  {title}:
+                </Typography>
+              </div>
+              <Row>
+                {links.map(({ label, href }, idx) => (
+                  <FooterLink
+                    key={'third-group-link' + idx}
+                    component="a"
+                    href={href}
+                    genericFontFamily="sans-serif"
+                    variant="body2"
+                  >
+                    {label}
+                  </FooterLink>
+                ))}
+              </Row>
+            </LinkGroup>
+          ))}
+        </ThirdLinksContainer>
+      </Wrapper>
+    </BusinessUnits>
+  )
+}
+
+const Row = styled.div`
+  display: flex;
+  gap: 8px;
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: baseline;
+
+  /* temporary breakpoint */
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`
+
+const SECTION_MARGIN = 50
+
+const BusinessUnits = styled(FooterSectionContainer)`
+  margin-top: ${SECTION_MARGIN}px;
+  padding: 16px 0 0 0;
+`
+
+const SecondLinksContainer = styled.div`
+  flex: 2;
+`
+
+const ThirdLinksContainer = styled.div`
+  flex: 1;
+  margin-bottom: ${SECTION_MARGIN}px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 80px;
+  }
+`
+
+const LinkGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 34px;
+  gap: 4px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 24px;
+  }
+`

src/components/Footer/Footer.Link.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+import { Typography } from '@acid-info/lsd-react'
+
+export const FooterLink = styled(Typography)`
+  width: fit-content;
+  &:not(:last-child) {
+    &:after {
+      content: '•';
+      margin-left: 8px;
+      text-decoration: none;
+      display: inline-block;
+    }
+  }
+`

src/components/Footer/Footer.OrgPanel.tsx

@@ -0,0 +1,68 @@
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import { FooterSection } from '@/components/Footer/Footer.Section'
+import { FooterLink } from '@/components/Footer/Footer.Link'
+
+const FIRST_LINK_GRUOP = [
+  { label: 'Twitter', href: 'https://twitter.com/Logos_State' },
+  { label: 'Terms & Conditions', href: 'https://logos.co/terms/' },
+  { label: 'Work with us', href: 'https://jobs.status.im/' },
+]
+export const FooterOrgPanel = () => {
+  return (
+    <Wrapper>
+      <OrgInfo>
+        <Typography
+          component="div"
+          genericFontFamily="sans-serif"
+          variant="body2"
+        >
+          Logos Press Engine ©{new Date().getFullYear()}
+        </Typography>
+        <Typography
+          component="div"
+          genericFontFamily="sans-serif"
+          variant="body2"
+        >
+          All rights reserved.
+        </Typography>
+      </OrgInfo>
+      <Links>
+        {FIRST_LINK_GRUOP.map(({ label, href }, idx) => (
+          <FooterLink
+            key={'first-grouop' + idx}
+            component="a"
+            href={href}
+            genericFontFamily="sans-serif"
+            variant="body2"
+          >
+            {label}
+          </FooterLink>
+        ))}
+      </Links>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: baseline;
+
+  /* temporary breakpoint */
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`
+
+const OrgInfo = styled(FooterSection)`
+  @media (max-width: 768px) {
+    margin-bottom: 76px;
+  }
+`
+
+const Links = styled(FooterSection)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`

src/components/Footer/Footer.Section.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled'
+export const FooterSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 50%;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`
+export const FooterSectionContainer = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  margin-top: 200px;
+  padding: 16px;
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+`

src/components/Footer/Footer.tsx

@@ -1,48 +1,8 @@
 import { Button, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-
+import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
-const FIRST_LINK_GRUOP = [
+import { FooterSectionContainer } from '@/components/Footer/Footer.Section'
-  { label: 'Twitter', href: 'https://twitter.com/Logos_State' },
+import { FooterBuPanel } from '@/components/Footer/Footer.BuPanel'
-  { label: 'Terms & Conditions', href: 'https://logos.co/terms/' },
-  { label: 'Work with us', href: 'https://jobs.status.im/' },
-]
-
-const SECOND_LINK_GROUP = [
-  {
-    title: 'Research',
-    links: [
-      { label: 'VacP2P', href: 'https://vac.dev/' },
-      { label: 'AFAIK', href: 'https://afaik.institute/' },
-    ],
-  },
-  {
-    title: 'Infrastructure',
-    links: [
-      { label: 'Waku', href: 'https://waku.org/' },
-      { label: 'Nimbus', href: 'https://nimbus.team/' },
-      { label: 'Codex', href: 'https://codex.storage/' },
-      { label: 'Nomos', href: 'https://nomos.tech/' },
-    ],
-  },
-  {
-    title: 'Creative Studio',
-    links: [{ label: 'Acid.info', href: 'https://acid.info/' }],
-  },
-]
-
-const THIRD_LINKS_GROUP = [
-  {
-    title: 'Movement',
-    links: [{ label: 'Logos', href: 'https://logos.co/' }],
-  },
-  {
-    title: 'User-facing Products',
-    links: [
-      { label: 'Status', href: 'https://status.im/' },
-      { label: 'Keycard', href: 'https://keycard.tech/' },
-    ],
-  },
-]
 
 export default function Footer() {
   const handleScrollToTop = () => {
@@ -53,212 +13,16 @@ export default function Footer() {
   }
 
   return (
-    <Container>
+    <FooterSectionContainer>
-      <Wrapper>
+      <FooterOrgPanel />
-        <OrgInfo>
+      <FooterBuPanel />
-          <Typography
-            component="div"
-            genericFontFamily="sans-serif"
-            variant="body2"
-          >
-            Logos Press Engine ©{new Date().getFullYear()}
-          </Typography>
-          <Typography
-            component="div"
-            genericFontFamily="sans-serif"
-            variant="body2"
-          >
-            All rights reserved.
-          </Typography>
-        </OrgInfo>
-        <Links>
-          {FIRST_LINK_GRUOP.map(({ label, href }, idx) => (
-            <Link
-              key={'first-grouop' + idx}
-              component="a"
-              href={href}
-              genericFontFamily="sans-serif"
-              variant="body2"
-            >
-              {label}
-            </Link>
-          ))}
-        </Links>
-      </Wrapper>
-      <BusinessUnits>
-        <Wrapper>
-          <OrgInfo>
-            <Typography
-              component="div"
-              genericFontFamily="sans-serif"
-              variant="body2"
-            >
-              Logos
-            </Typography>
-            <Typography
-              component="div"
-              genericFontFamily="sans-serif"
-              variant="body2"
-            >
-              Business Units:
-            </Typography>
-          </OrgInfo>
-          <SecondLinksContainer>
-            {SECOND_LINK_GROUP.map(({ title, links }, idx) => (
-              <LinkGroup key={'second-group' + idx}>
-                <div>
-                  <Typography
-                    component="div"
-                    genericFontFamily="sans-serif"
-                    variant="body2"
-                  >
-                    {title}:
-                  </Typography>
-                </div>
-                <Row>
-                  {links.map(({ label, href }, idx) => (
-                    <Link
-                      key={'second-group-link' + idx}
-                      component="a"
-                      href={href}
-                      genericFontFamily="sans-serif"
-                      variant="body2"
-                    >
-                      {label}
-                    </Link>
-                  ))}
-                </Row>
-              </LinkGroup>
-            ))}
-          </SecondLinksContainer>
-          <ThirdLinksContainer>
-            {THIRD_LINKS_GROUP.map(({ title, links }, idx) => (
-              <LinkGroup key={'third-group' + idx}>
-                <div>
-                  <Typography
-                    component="div"
-                    genericFontFamily="sans-serif"
-                    variant="body2"
-                  >
-                    {title}:
-                  </Typography>
-                </div>
-                <Row>
-                  {links.map(({ label, href }, idx) => (
-                    <Link
-                      key={'third-group-link' + idx}
-                      component="a"
-                      href={href}
-                      genericFontFamily="sans-serif"
-                      variant="body2"
-                    >
-                      {label}
-                    </Link>
-                  ))}
-                </Row>
-              </LinkGroup>
-            ))}
-          </ThirdLinksContainer>
-        </Wrapper>
-      </BusinessUnits>
       <ScrollToTop size="small" onClick={handleScrollToTop}>
         Back to up ↑
       </ScrollToTop>
-    </Container>
+    </FooterSectionContainer>
   )
 }
 
-const SECTION_MARGIN = 50
-
-const Container = styled.div`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  margin-top: 200px;
-  padding: 16px;
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-`
-
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  width: 50%;
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-`
-
-const OrgInfo = styled(Section)`
-  @media (max-width: 768px) {
-    margin-bottom: 76px;
-  }
-`
-
-const Links = styled(Section)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-`
-
-const Link = styled(Typography)`
-  width: fit-content;
-  &:not(:last-child) {
-    &:after {
-      content: '•';
-      margin-left: 8px;
-      text-decoration: none;
-      display: inline-block;
-    }
-  }
-`
-
-const Row = styled.div`
-  display: flex;
-  gap: 8px;
-`
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: baseline;
-
-  /* temporary breakpoint */
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-`
-
-const BusinessUnits = styled(Container)`
-  margin-top: ${SECTION_MARGIN}px;
-  padding: 16px 0 0 0;
-`
-
-const SecondLinksContainer = styled.div`
-  flex: 2;
-`
-
-const ThirdLinksContainer = styled.div`
-  flex: 1;
-  margin-bottom: ${SECTION_MARGIN}px;
-
-  @media (max-width: 768px) {
-    margin-bottom: 80px;
-  }
-`
-
-const LinkGroup = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 34px;
-  gap: 4px;
-
-  @media (max-width: 768px) {
-    margin-bottom: 24px;
-  }
-`
-
 const ScrollToTop = styled(Button)`
   width: fit-content;
   position: absolute;

src/components/Icons/CrossIcon/CrossIcon.tsx

@@ -0,0 +1,20 @@
+import { LsdIcon } from '@acid-info/lsd-react'
+
+export const CrossIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.46583 3.21417C5.36083 3.5875 5.30833 3.97833 5.30833 4.375C5.30833 6.755 7.245 8.69167 9.625 8.69167C10.0217 8.69167 10.4125 8.63917 10.7858 8.53417C10.1792 10.0275 8.70917 11.0833 7 11.0833C4.74833 11.0833 2.91667 9.25167 2.91667 7C2.91667 5.29083 3.9725 3.82083 5.46583 3.21417ZM7 1.75C4.10083 1.75 1.75 4.10083 1.75 7C1.75 9.89917 4.10083 12.25 7 12.25C9.89917 12.25 12.25 9.89917 12.25 7C12.25 6.73167 12.2267 6.46333 12.1917 6.20667C11.62 7.00583 10.6867 7.525 9.625 7.525C7.88667 7.525 6.475 6.11333 6.475 4.375C6.475 3.31917 6.99417 2.38 7.79333 1.80833C7.53667 1.77333 7.26833 1.75 7 1.75Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  { filled: true },
+)

src/components/Icons/CrossIcon/index.ts

@@ -0,0 +1 @@
+export * from './CrossIcon'

src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -0,0 +1,39 @@
+import { SunIcon } from '@/components/Icons/SunIcon'
+import { MoonIcon } from '@/components/Icons/MoonIcon'
+import { Button, IconButton } from '@acid-info/lsd-react'
+import React from 'react'
+import { ThemeState } from '@/states/themeState'
+interface Props {
+  toggle: () => void
+  mode?: ThemeState['mode']
+}
+
+export const ThemeSwitch = ({ toggle, mode }: Props) => {
+  return (
+    <IconButton size="small" onClick={() => toggle()}>
+      {mode === 'light' ? (
+        <MoonIcon color="primary" />
+      ) : (
+        <SunIcon color="primary" />
+      )}
+    </IconButton>
+  )
+}
+export const ThemeSwitchWithLabel = ({ toggle, mode }: Props) => {
+  return (
+    <Button
+      icon={
+        mode === 'light' ? (
+          <MoonIcon color="primary" />
+        ) : (
+          <SunIcon color="primary" />
+        )
+      }
+      size="small"
+      variant="outlined"
+      onClick={toggle}
+    >
+      {mode === 'light' ? 'Dark mode' : 'Light mode'}
+    </Button>
+  )
+}

src/configs/data.configs.ts

@@ -6,3 +6,9 @@ export const ArticleBlocksOrders = {
   mentions: 4,
   cover: 5,
 }
+
+export const NavLinksItems = [
+  { label: 'Articles', href: '/search?postType=article' },
+  { label: 'Podcasts', href: '/podcasts' },
+  { label: 'About', href: '/about' },
+]

src/containers/LSDThemeProvider/themes.ts

@@ -37,7 +37,17 @@ export const useLSDTheme = () => {
 
   const themes = useMemo(() => {
     const options: CreateThemeProps = {
-      breakpoints: {},
+      breakpoints: {
+        sm: {
+          width: 768,
+        },
+        md: {
+          width: 1024,
+        },
+        lg: {
+          width: 1280,
+        },
+      },
       palette: {},
       typography: {},
       typographyGlobal: {

src/layouts/DefaultLayout/Default.layout.tsx

@@ -9,33 +9,11 @@ import { AppBar } from '../../components/AppBar'
 import { useThemeState } from '../../states/themeState'
 
 export default function DefaultLayout(props: PropsWithChildren<any>) {
-  const themeState = useThemeState()
-
   return (
     <>
-      <HeaderContainer
+      <AppBar />
-        style={{
-          textAlign: 'center',
-          marginBlock: `${uiConfigs.navbarRenderedHeight}px`,
-        }}
-      >
-        <div>
-          <AppBar
-            isDark={themeState.mode.get() === 'dark'}
-            toggle={themeState.toggleMode}
-          />
-          <Hero />
-        </div>
-        <Searchbar withFilterTags={false} beSticky={true} />
-      </HeaderContainer>
       <Main>{props.children}</Main>
       <Footer />
     </>
   )
 }
-
-const HeaderContainer = styled.header`
-  @media (min-width: 776px) and (max-width: ${uiConfigs.maxContainerWidth}px) {
-    padding: 0 16px;
-  }
-`

src/pages/index.tsx

@@ -8,6 +8,7 @@ import SEO from '../components/SEO/SEO'
 import { api } from '../services/api.service'
 import unbodyApi from '../services/unbody/unbody.service'
 import { LPE } from '../types/lpe.types'
+import { Hero } from '@/components/Hero'
 
 type Props = {
   posts: LPE.Article.Data[]
@@ -37,6 +38,7 @@ export default function Home({ posts, featured, tags }: Props) {
         }
         title={'Logos Press Engine'}
       />
+      <Hero />
       {featured && (
         <Section title={'Featured'}>
           <FeaturedPost post={featured} />