chore: initial commit

components/Application/Main.tsx

@@ -0,0 +1,22 @@
+export const Main: React.FC = (props) => {
+  return (
+    <>
+      <main className='main'>{props.children}</main>
+
+      <style jsx>
+        {`
+          .main {
+            padding: 2rem;
+            margin-left: var(--sidebar-width);
+            background-color: var(--color-background-secondary);
+            min-height: 100vh;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Application/Sidebar/SidebarItem.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react'
+
+export const SidebarItem: React.FC = memo((props) => {
+  return (
+    <>
+      <li className='sidebar-item'>{props.children}</li>
+
+      <style jsx>
+        {`
+          .sidebar-item {
+            position: relative;
+            margin: 10px;
+            cursor: pointer;
+          }
+        `}
+      </style>
+    </>
+  )
+})

components/Application/Sidebar/SidebarList.tsx

@@ -0,0 +1,28 @@
+export interface SidebarListProps extends React.ComponentPropsWithRef<'ul'> {}
+
+export const SidebarList: React.FC<SidebarListProps> = (props) => {
+  const { children, ...rest } = props
+
+  return (
+    <>
+      <ul {...rest} className='sidebar-list'>
+        {children}
+      </ul>
+
+      <style jsx>
+        {`
+          .sidebar-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-flow: column wrap;
+            overflow-y: auto;
+            overflow-x: hidden;
+            flex-direction: row !important;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Application/Sidebar/__test__/SidebarItem.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { SidebarItem } from '../SidebarItem'
+
+describe('<SidebarItem />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<SidebarItem>Item</SidebarItem>)
+    expect(getByText('Item')).toBeInTheDocument()
+  })
+})

components/Application/Sidebar/__test__/SidebarList.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { SidebarList } from '../SidebarList'
+
+describe('<SidebarList />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<SidebarList>List Item</SidebarList>)
+    expect(getByText('List Item')).toBeInTheDocument()
+  })
+})

components/Application/Sidebar/index.tsx

@@ -0,0 +1,98 @@
+import useTranslation from 'next-translate/useTranslation'
+import InfiniteScroll from 'react-infinite-scroll-component'
+
+import { IconButton } from 'components/design/IconButton'
+import { Avatar } from 'components/design/Avatar'
+import { SidebarItem } from './SidebarItem'
+import { SidebarList } from './SidebarList'
+import { API_URL } from 'utils/api'
+import { useGuilds } from 'contexts/Guilds'
+import { Tooltip } from 'components/design/Tooltip'
+import { useAuthentication } from 'utils/authentication'
+import { Loader } from 'components/design/Loader'
+import Link from 'next/link'
+
+export const Sidebar: React.FC = () => {
+  const { guilds, nextPage } = useGuilds()
+  const { t } = useTranslation()
+  const { user } = useAuthentication()
+
+  return (
+    <>
+      <nav className='sidebar'>
+        <SidebarList id='sidebar-list'>
+          <SidebarItem>
+            <Link href='/application'>
+              <Tooltip content={t('application:settings')} direction='right'>
+                <Avatar
+                  src='/images/icons/Thream.png'
+                  alt='Thream'
+                  width={60}
+                  height={60}
+                />
+              </Tooltip>
+            </Link>
+          </SidebarItem>
+          <SidebarItem>
+            <Tooltip content={t('application:settings')} direction='right'>
+              <Avatar
+                src={`${API_URL}${user.logo}`}
+                alt={user.name}
+                width={60}
+                height={60}
+              />
+            </Tooltip>
+          </SidebarItem>
+          <SidebarItem>
+            <Tooltip content={t('application:add-guild')} direction='right'>
+              <IconButton icon='add' hasBackground />
+            </Tooltip>
+          </SidebarItem>
+          <InfiniteScroll
+            dataLength={guilds.rows.length}
+            next={nextPage}
+            style={{ overflow: 'none' }}
+            hasMore={guilds.hasMore}
+            loader={<Loader />}
+            scrollableTarget='sidebar-list'
+          >
+            {guilds.rows.map((row) => {
+              return (
+                <SidebarItem key={row.id}>
+                  <Link
+                    href={`/application/${row.guildId}/${row.lastVisitedChannelId}`}
+                  >
+                    <Tooltip content={row.guild.name} direction='right'>
+                      <Avatar
+                        src={`${API_URL}${row.guild.icon}`}
+                        alt={row.guild.name}
+                        width={60}
+                        height={60}
+                      />
+                    </Tooltip>
+                  </Link>
+                </SidebarItem>
+              )
+            })}
+          </InfiniteScroll>
+        </SidebarList>
+      </nav>
+
+      <style jsx>
+        {`
+          .sidebar {
+            display: flex;
+            flex-flow: column wrap;
+            justify-content: space-between;
+            align-items: center;
+            position: fixed;
+            background-color: var(--color-background-primary);
+            width: var(--sidebar-width);
+            height: 100vh;
+            padding: 0 15px;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Application/__test__/Main.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Main } from '../Main'
+
+describe('<Main />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Main>Content</Main>)
+    expect(getByText('Content')).toBeInTheDocument()
+  })
+})

components/Application/index.tsx

@@ -0,0 +1,32 @@
+import {
+  AuthenticationProvider,
+  PagePropsWithAuthentication
+} from 'utils/authentication'
+import { Main } from './Main'
+import { Sidebar } from './Sidebar'
+import { Guilds, GuildsProvider } from 'contexts/Guilds'
+
+export interface ApplicationProps extends PagePropsWithAuthentication {
+  guilds: Guilds
+}
+
+export const Application: React.FC<ApplicationProps> = (props) => {
+  return (
+    <AuthenticationProvider authentication={props.authentication}>
+      <GuildsProvider guilds={props.guilds}>
+        <div className='application'>
+          <Sidebar />
+          <Main>{props.children}</Main>
+        </div>
+
+        <style jsx global>
+          {`
+            body {
+              --sidebar-width: 11rem;
+            }
+          `}
+        </style>
+      </GuildsProvider>
+    </AuthenticationProvider>
+  )
+}