Merge pull request #95 from acid-info/navbar-design

Navbar design

src/components/Icons/DiscordIcon/DiscordIcon.tsx

@@ -0,0 +1,20 @@
+import { LsdIcon } from '@acid-info/lsd-react'
+
+export const DiscordIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.03203 9.23067C5.33869 9.23067 4.77336 8.60067 4.77336 7.82933C4.77336 7.05867 5.32469 6.42933 6.03269 6.42933C6.73269 6.42933 7.30603 7.05867 7.29203 7.82933C7.29203 8.60067 6.73269 9.23067 6.03203 9.23067ZM10.6814 9.23067C9.98803 9.23067 9.42136 8.60067 9.42136 7.82933C9.42136 7.05867 9.97403 6.42933 10.6814 6.42933C11.3814 6.42933 11.9547 7.05867 11.9414 7.82933C11.9414 8.60067 11.3887 9.23067 10.6814 9.23067ZM7.10203 2.882L6.89669 2.50667L6.47403 2.57667C5.51614 2.73638 4.5839 3.02337 3.70203 3.43L3.55003 3.50067L3.45536 3.64C1.71336 6.20933 1.23536 8.73867 1.47203 11.224L1.49803 11.4947L1.71803 11.6547C2.74282 12.4066 3.88741 12.9798 5.10336 13.35L5.63003 13.5113L6.37203 11.7C7.64536 12.0147 9.05869 12.0153 10.3314 11.7L11.0694 13.512L11.596 13.35C12.8129 12.9808 13.9581 12.4073 14.9827 11.654L15.2007 11.4953L15.2274 11.2273C15.518 8.34733 14.7627 5.838 13.2554 3.63733L13.1607 3.49933L13.0087 3.43C12.127 3.02522 11.1959 2.73831 10.2394 2.57667L9.82736 2.508L9.61803 2.86867C9.55603 2.97652 9.49756 3.08635 9.44269 3.198C8.7195 3.1233 7.99055 3.1233 7.26736 3.198C7.21425 3.09163 7.15913 2.98628 7.10203 2.882ZM4.82869 11.0733C4.96003 11.1493 5.09869 11.224 5.23536 11.292L4.93603 12.0227C4.12642 11.7275 3.3583 11.3291 2.65069 10.8373C2.50069 8.74467 2.92603 6.634 4.36003 4.45733C4.9652 4.19081 5.59603 3.98686 6.24269 3.84867C6.28269 3.932 6.32003 4.01333 6.35069 4.086L6.53269 4.51467L6.99403 4.44733C7.89809 4.31488 8.81663 4.31488 9.72069 4.44733L10.1807 4.514L10.362 4.086C10.3934 4.01133 10.43 3.93 10.4687 3.84867C11.12 3.98867 11.7507 4.19467 12.354 4.45867C13.604 6.33867 14.2347 8.436 14.0514 10.8367C13.3438 11.3293 12.5751 11.7278 11.7647 12.022L11.468 11.2927C11.6054 11.224 11.744 11.1493 11.8767 11.0733C12.2034 10.8853 12.5547 10.6507 12.7787 10.4267L11.9254 9.57333C11.8167 9.68267 11.5767 9.85333 11.274 10.028C10.978 10.1987 10.684 10.3367 10.496 10.3987C9.16069 10.8407 7.54403 10.8407 6.20803 10.3987C6.02069 10.3367 5.72669 10.1987 5.43069 10.028C5.12803 9.854 4.88803 9.68267 4.77869 9.57333L3.92536 10.4267C4.15003 10.6507 4.50203 10.8853 4.82869 11.0733Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  { filled: true },
+)

src/components/Icons/DiscordIcon/index.ts

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

src/components/Icons/XIcon/XIcon.tsx

@@ -0,0 +1,19 @@
+import { LsdIcon } from '@acid-info/lsd-react'
+
+export const XIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.40039 7.65351L13.4037 3H12.455L8.97897 7.04058L6.20265 3H3.00049L7.19884 9.11007L3.00049 13.99H3.9492L7.62001 9.72301L10.552 13.99H13.7542L9.40016 7.65351H9.40039ZM8.10101 9.16391L7.67563 8.55548L4.29103 3.71417H5.74819L8.4796 7.62126L8.90498 8.22969L12.4555 13.3083H10.9983L8.10101 9.16414V9.16391Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  ),
+  { filled: true },
+)

src/components/Icons/XIcon/index.ts

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

src/components/Icons/YTIcon/YoutubeIcon.tsx

@@ -0,0 +1,19 @@
+import { LsdIcon } from '@acid-info/lsd-react'
+
+export const YoutubeIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.4234 4.66333C13.3728 4.46467 13.2288 4.31467 13.0641 4.26867C12.7721 4.18667 11.3528 4 8.35276 4C5.35276 4 3.93409 4.18667 3.64009 4.26867C3.47742 4.314 3.33342 4.464 3.28209 4.66333C3.20942 4.946 3.01942 6.13 3.01942 8C3.01942 9.86933 3.20942 11.0533 3.28209 11.3373C3.33276 11.5353 3.47676 11.6853 3.64076 11.7307C3.93409 11.8133 5.35209 12 8.35209 12C11.3521 12 12.7714 11.8133 13.0648 11.7313C13.2274 11.686 13.3714 11.536 13.4228 11.3367C13.4961 11.054 13.6854 9.86667 13.6854 8C13.6854 6.13333 13.4961 4.94667 13.4234 4.66333ZM14.7148 4.332C15.0194 5.52 15.0194 8 15.0194 8C15.0194 8 15.0194 10.48 14.7148 11.668C14.5454 12.3247 14.0501 12.8413 13.4228 13.016C12.2834 13.3333 8.35209 13.3333 8.35209 13.3333C8.35209 13.3333 4.42342 13.3333 3.28209 13.016C2.65209 12.8387 2.15742 12.3227 1.99009 11.668C1.68542 10.48 1.68542 8 1.68542 8C1.68542 8 1.68542 5.52 1.99009 4.332C2.15942 3.67533 2.65476 3.15867 3.28209 2.984C4.42409 2.66667 8.35276 2.66667 8.35276 2.66667C8.35276 2.66667 12.2834 2.66667 13.4228 2.984C14.0521 3.16133 14.5474 3.67733 14.7148 4.332ZM7.01943 10.3333V5.66667L11.0194 8L7.01943 10.3333Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  ),
+  { filled: true },
+)

src/components/Icons/YTIcon/index.ts

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

src/components/NavBar/NavBar.tsx

@@ -12,6 +12,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { NavbarState, useNavbarState } from '../../states/navbarState'
 import { LogosIcon } from '../Icons/LogosIcon'
+import { SocialMediaKit } from '@/components/NavBar/Navbar.SocialMediaKit'
 
 export interface NavBarProps {
   defaultState?: Partial<NavbarState>
@@ -53,6 +54,7 @@ export default function NavBar({ defaultState }: NavBarProps) {
           <NavbarLinks links={NavLinksItems} />
         </NavLinksContainer>
         <ControlsContainer>
+          <SocialMediaKit />
           <div className={'theme-switch'}>
             <ThemeSwitch
               toggle={themeState.toggleMode}
@@ -64,26 +66,9 @@ export default function NavBar({ defaultState }: NavBarProps) {
               <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>
   )
 }
@@ -111,7 +96,7 @@ const NavBarContainer = styled.nav<{
   bordered?: boolean
 }>`
   display: flex;
-  padding: 8px 0;
+  padding: 16px 0;
   align-items: center;
   justify-content: space-between;
   position: relative;
@@ -158,6 +143,12 @@ const LeftContainer = styled(Link)`
 `
 
 const ControlsContainer = styled.div`
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+
   .theme-switch {
     display: block;
   }

src/components/NavBar/Navbar.Links.tsx

@@ -1,18 +1,28 @@
 import Link from 'next/link'
 import styled from '@emotion/styled'
+import { Typography } from '@acid-info/lsd-react'
+import { useRouter } from 'next/router'
 
 interface Props {
   links: { href: string; label: string }[]
 }
 
 export const NavbarLinks = ({ links }: Props) => {
+  const router = useRouter()
+  const { pathname } = router
   return (
     <Container>
       {links.map((link, idx) => (
         <>
-          <Link href={link.href} key={`navbar-link-${idx}`}>
+          <Typography variant={'label2'}>
-            {link.label}
+            <Link
-          </Link>
+              href={link.href}
+              key={`navbar-link-${idx}`}
+              className={pathname === link.href ? 'active' : ''}
+            >
+              {link.label}
+            </Link>
+          </Typography>
           {idx !== links.length - 1 && <span className={'divider'} />}
         </>
       ))}
@@ -24,10 +34,15 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
   a {
     text-decoration: none;
   }
 
+  a:hover, a:active, a:focus, a.active {
+    text-decoration: underline;
+  }
+
   .divider {
     display: block;
     width: 2px;
@@ -38,7 +53,7 @@ const Container = styled.div`
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.sm.width}px) {
-    flex-direction: column;
+    flex -direction: column;
     align-items: flex-start;
     .divider {
       display: none;

src/components/NavBar/Navbar.SocialMediaKit.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled'
+import Link from 'next/link'
+import { DiscordIcon } from '@/components/Icons/DiscordIcon'
+import { XIcon } from '@/components/Icons/XIcon'
+import { YoutubeIcon } from '@/components/Icons/YTIcon'
+
+export const SocialMediaKit = () => {
+  return (
+    <Container>
+      <Link href={'https://discord.cc'}>
+        <DiscordIcon />
+      </Link>
+      <Link href={'https://youtube.com'}>
+        <YoutubeIcon />
+      </Link>
+      <Link href={'https://x.com'}>
+        <XIcon />
+      </Link>
+    </Container>
+  )
+}
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  a {
+    display: flex;
+  }
+`