feat(layout): implement basic app layout system

apps/main/src/electron/electron.service.ts

@@ -62,6 +62,11 @@ export class ElectronService implements OnApplicationBootstrap {
       width: 1300,
       height: 800,
       minWidth: 500,
+      titleBarStyle: 'hidden',
+      trafficLightPosition: {
+        x: 15,
+        y: 13,
+      },
       webPreferences: {
         preload:
           process.env.NODE_ENV === 'production'

apps/renderer/package.json

@@ -14,6 +14,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^6.1.6",
     "@mui/material": "^5.14.5",
     "apollo-link-logger": "^2.0.1",
     "graphql": "^16.9.0",

apps/renderer/src/components/App.tsx

@@ -5,19 +5,15 @@ import { ThemeProvider } from '@mui/material'
 import { ApolloProvider } from '@apollo/client'
 import apolloClient from '@graphql/client'
 
-import { theme } from '@styles/theme'
-
-import { Layout } from '@components/Layout'
+import { darkTheme } from '@styles/theme'
 
 import { Routes } from '@pages'
 
 export function App() {
   return (
     <ApolloProvider client={apolloClient}>
-      <ThemeProvider theme={theme}>
-        <Layout>
-          <Routes />
-        </Layout>
+      <ThemeProvider theme={darkTheme}>
+        <Routes />
       </ThemeProvider>
     </ApolloProvider>
   )

apps/renderer/src/components/Layout.styles.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { css } from '@emotion/react'
+import { NAVIGATOR_WIDTH, TITLE_BAR_HEIGHT } from '@constants/layout'
 
 export const GlobalStyles = css`
   html,
@@ -12,3 +13,15 @@ export const GlobalStyles = css`
 export const Root = styled.div`
   height: 100%;
 `
+
+export const Content = styled.div`
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  position: fixed;
+  top: ${({ theme }) => theme.spacing(TITLE_BAR_HEIGHT)};
+  left: ${({ theme }) => theme.spacing(NAVIGATOR_WIDTH)};
+  right: 0;
+  bottom: 0;
+
+  overflow: auto;
+`

apps/renderer/src/components/Layout.tsx

@@ -1,18 +1,24 @@
 import React from 'react'
+import { Outlet } from 'react-router-dom'
 
 import { Global } from '@emotion/react'
 import { CssBaseline } from '@mui/material'
 
-import { GlobalStyles, Root } from '@components/Layout.styles'
+import TitleBar from '@components/TitleBar'
+import Navigator from '@components/Navigator'
 
-export interface LayoutProps {}
+import * as Styled from '@components/Layout.styles'
 
-export function Layout({ children }: React.PropsWithChildren<LayoutProps>) {
+export function Layout() {
   return (
-    <Root>
-      <Global styles={GlobalStyles} />
+    <Styled.Root>
+      <Global styles={Styled.GlobalStyles} />
       <CssBaseline />
-      {children}
-    </Root>
+      <TitleBar />
+      <Navigator />
+      <Styled.Content>
+        <Outlet />
+      </Styled.Content>
+    </Styled.Root>
   )
 }

apps/renderer/src/components/Navigator.styled.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled'
+
+import { NAVIGATOR_WIDTH, TITLE_BAR_HEIGHT } from '@constants/layout'
+
+export const Root = styled.div`
+  width: ${({ theme }) => theme.spacing(NAVIGATOR_WIDTH)};
+
+  padding: ${({ theme }) => theme.spacing(1)};
+  border-right: 1px solid #505153;
+
+  position: fixed;
+  top: ${({ theme }) => theme.spacing(TITLE_BAR_HEIGHT)};
+  left: 0;
+  bottom: 0;
+
+  background-color: #3f4042;
+`

apps/renderer/src/components/Navigator.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+
+import { Box, IconButton, Stack, Tooltip } from '@mui/material'
+
+import { NAVIGATOR_ITEMS } from '@constants/navigator'
+
+import * as Styled from './Navigator.styled'
+
+interface NavigatorProps {}
+
+function Navigator({}: NavigatorProps) {
+  const location = useLocation()
+
+  return (
+    <Styled.Root>
+      <Stack spacing={1}>
+        {NAVIGATOR_ITEMS.map(({ path, label, icon: Icon }) => (
+          <Box
+            key={path}
+            display="flex"
+            justifyContent="center"
+          >
+            <Tooltip
+              placement="right"
+              title={label}
+              slotProps={{
+                popper: {
+                  modifiers: [
+                    {
+                      name: 'offset',
+                      options: {
+                        offset: [0, -8],
+                      },
+                    },
+                  ],
+                },
+              }}
+            >
+              <IconButton
+                draggable="false"
+                component={Link}
+                to={path}
+              >
+                <Box
+                  component={Icon}
+                  color="inherit"
+                  sx={{
+                    color: location.pathname === path ? 'text.primary' : 'text.disabled',
+                    transition: theme =>
+                      theme.transitions.create(['color'], {
+                        easing: theme.transitions.easing.sharp,
+                        duration: theme.transitions.duration.shorter,
+                      }),
+                  }}
+                />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        ))}
+      </Stack>
+    </Styled.Root>
+  )
+}
+
+export default Navigator

apps/renderer/src/components/TitleBar.styled.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+
+import { TITLE_BAR_HEIGHT } from '@constants/layout'
+
+export const Root = styled.div`
+  height: ${({ theme }) => theme.spacing(TITLE_BAR_HEIGHT)};
+
+  border-bottom: 1px solid #505153;
+
+  background-color: #3f4042;
+
+  -webkit-app-region: drag;
+  user-select: none;
+`

apps/renderer/src/components/TitleBar.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import * as Styled from './TitleBar.styled'
+
+interface TitleBarProps {}
+
+function TitleBar({}: TitleBarProps) {
+  return <Styled.Root />
+}
+
+export default TitleBar

apps/renderer/src/constants/layout.ts

@@ -0,0 +1,2 @@
+export const TITLE_BAR_HEIGHT = 5 // 40px
+export const NAVIGATOR_WIDTH = 8 // 64px

apps/renderer/src/constants/navigator.ts

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import HomeRounded from '@mui/icons-material/HomeRounded'
+import SearchRounded from '@mui/icons-material/SearchRounded'
+
+import { SvgIconProps } from '@mui/material'
+
+export interface NavigatorItem {
+  icon: React.ComponentType<SvgIconProps>
+  label: string
+  path: string
+}
+
+export const NAVIGATOR_ITEMS: NavigatorItem[] = [
+  {
+    icon: HomeRounded,
+    label: 'Home',
+    path: '/',
+  },
+  {
+    icon: SearchRounded,
+    label: 'Search',
+    path: '/search',
+  },
+]

apps/renderer/src/emotion.d.ts

@@ -0,0 +1,5 @@
+import { createTheme } from '@mui/material'
+
+declare module '@emotion/react' {
+  export interface Theme extends ReturnType<typeof createTheme> {}
+}

apps/renderer/src/pages/Search.styled.ts

@@ -0,0 +1,3 @@
+import styled from '@emotion/styled'
+
+export const Root = styled.div``

apps/renderer/src/pages/Search.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import * as Styled from './Search.styled'
+
+interface SearchProps {}
+
+export function Search({}: SearchProps) {
+  return <Styled.Root>Search</Styled.Root>
+}

apps/renderer/src/pages/index.tsx

@@ -1,14 +1,26 @@
 import React from 'react'
 import { createHashRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom'
 
+import { Layout } from '@components/Layout'
+
 import { Home } from '@pages/Home'
+import { Search } from '@pages/Search'
 
 const router = createHashRouter(
   createRoutesFromElements(
     <Route
       path="/"
-      element={<Home />}
-    />,
+      element={<Layout />}
+    >
+      <Route
+        index
+        element={<Home />}
+      />
+      <Route
+        path="search"
+        element={<Search />}
+      />
+    </Route>,
   ),
 )
 

apps/renderer/src/styles/theme.ts

@@ -1,3 +1,10 @@
 import { createTheme } from '@mui/material'
 
-export const theme = createTheme()
+export const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    background: {
+      default: '#242428',
+    },
+  },
+})

apps/renderer/tsconfig.json

@@ -8,7 +8,8 @@
       "@pages": ["src/pages"],
       "@pages/*": ["src/pages/*"],
       "@components/*": ["src/components/*"],
-      "@styles/*": ["src/styles/*"]
+      "@styles/*": ["src/styles/*"],
+      "@constants/*": ["src/constants/*"],
     }
   },
   "include": ["src"]

packages/tsconfig/renderer.json

@@ -6,7 +6,7 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": false,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,