Merge pull request #56 from uncrunch-app/feature/menu

Feature/menu

.prettierrc.json

@@ -2,5 +2,7 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindConfig": "./tailwind.config.js"
 }

messages/en.json

@@ -20,5 +20,16 @@
     "ru": "Rusian",
     "en": "English",
     "label": "Language"
+  },
+  "UserMenu": {
+    "homePage": "Home",
+    "settingsPage": "Settings",
+    "secretPage": "Secret",
+    "langOptions": "Language",
+    "themeOptions": "Theme",
+    "logOut": "Log Out",
+    "notes": "Notes",
+    "todo": "To Do",
+    "boards": "Boards"
   }
 }

messages/ru.json

@@ -20,5 +20,16 @@
     "ru": "Русский",
     "en": "Английский",
     "label": "Язык"
+  },
+  "UserMenu": {
+    "homePage": "Главная",
+    "settingsPage": "Настройки",
+    "secretPage": "Секрет",
+    "langOptions": "Язык",
+    "themeOptions": "Тема",
+    "logOut": "Выйти",
+    "notes": "Заметки",
+    "todo": "Задачи",
+    "boards": "Доски"
   }
 }

next.config.mjs

@@ -13,6 +13,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'avatars.githubusercontent.com',
       },
+      {
+        protocol: 'https',
+        hostname: 'codeberg.org',
+      },
     ],
     domains: ['localhost'],
   },

package.json

@@ -36,6 +36,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
+    "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
     "tailwindcss": "^3.4.13",
     "yup": "^1.4.0"
@@ -50,6 +51,7 @@
     "eslint-config-next": "14.2.5",
     "jest": "^29.7.0",
     "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "sass": "^1.78.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.2"

src/1-app/layouts/RootLayout.tsx

@@ -1,11 +1,8 @@
 import { ReactNode } from 'react'
-import Providers from '../entryProviders'
+import Providers from '../providers'
 import { NextIntlClientProvider } from 'next-intl'
 import { getMessages } from 'next-intl/server'
-//import { cookies } from "next/headers";
 import '@/src/6-shared/styles/global.css'
-//import '@nextui-org/react/styles.css';
-
 
 import 'normalize.css/normalize.css'
 import '@fontsource/inter/200.css'
@@ -64,8 +61,6 @@ export const metadata = {
 }
 
 const RootLayout = async ({ children }: { children: ReactNode }) => {
-  //const locale = await getLocale()
-
   // Providing all messages to the client
   // side is the easiest way to get started
   const messages = await getMessages()

src/1-app/entryProviders.tsx → src/1-app/providers.tsx

@@ -4,19 +4,16 @@ import { store } from './appStore'
 import { SessionProvider } from 'next-auth/react'
 import { ReactNode } from 'react'
 import { Provider } from 'react-redux'
-//import { ThemeProvider, CssBaseline } from '@mui/material'
-//import theme from '@/src/6-shared/styles/theme'
-//import { I18nextProvider } from 'react-i18next'
 import { NextUIProvider } from '@nextui-org/react'
+import { useRouter } from 'next/navigation'
 
 const Providers = ({ children }: { children: ReactNode }) => {
+  const router = useRouter()
+
   return (
     <Provider store={store}>
       <SessionProvider>
-        {/*<ThemeProvider theme={theme}>*/}
-        {/*<CssBaseline />*/}
-        <NextUIProvider>{children}</NextUIProvider>
-        {/*</ThemeProvider>*/}
+        <NextUIProvider navigate={router.push}>{children}</NextUIProvider>
       </SessionProvider>
     </Provider>
   )

src/2-pages/[username]/page.tsx

@@ -90,10 +90,10 @@ export default async function HomePage({ params }: HomePageProps) {
 
   return (
     <div style={{ margin: '20px' }}>
-      <h1 style={{ fontSize: '2rem', fontWeight: '900' }}>
+      <h1 className='text-foreground-800' style={{ fontSize: '2rem', fontWeight: '900' }}>
         {t('welcome', {username})}
       </h1>
-      <p>{t('message')}</p>
+      <p className='text-foreground-900'>{t('message')}</p>
     </div>
   )
 }

src/2-pages/root/page.tsx

@@ -1,18 +1,10 @@
 // app/page.tsx
-import { getServerSession } from 'next-auth'
 import { redirect } from 'next/navigation'
-import {
-  authOptions,
-  CustomSessionUser,
-} from '@/app/api/auth/authOptions'
+import { getUsername } from '@/src/6-shared/services/getUsername'
 
 export default async function RootPage() {
-  const session = await getServerSession(authOptions)
+  const username = await getUsername()
+  const usernamePath = `/~${username}`
 
-  const customUser = session?.user as CustomSessionUser
-  const username = `/~${customUser.login}`
-
-  redirect(username)
-
-  return null
+  redirect(usernamePath)
 }

src/2-pages/secret/SecretPage.tsx

@@ -10,6 +10,7 @@ const SecretPage = () => {
 
   return (
     <div className={styles.container}>
+
       <p>
         {t('message')}
       </p>

src/3-widgets/header/ui/Header/Header.tsx

@@ -1,27 +1,28 @@
-//import SignOutButton from '@/src/6-shared/ui/buttons/SignOutButton'
 import { FC, memo } from 'react'
-//import { SignOutButton } from '@/4-features/logout';
-import { UserCard } from '@/src/5-entities/user'
 import { Logo } from '@/src/6-shared/ui/logo'
-//import { RepoInfo } from '@/src/3-widgets/repos';
 import styles from './Header.module.scss'
 import { authOptions, CustomSessionUser } from '@/app/api/auth/authOptions'
 import { getServerSession } from 'next-auth'
-//import UserMenu from '@/src/5-entities/user/ui/UserMenu/UserMenu'
-import * as COLOR from '@/src/6-shared/constants/colors'
-//import UserMenu from '@/src/5-entities/user/ui/UserMenu/UserMenu'
+import UserMenu from '@/src/5-entities/user/ui/UserMenu/UserMenu'
+import Link from 'next/link'
+import { routePaths } from '@/src/6-shared/services/routePaths'
 
 const Header: FC = async () => {
   const session = await getServerSession(authOptions)
 
   const customUser = session?.user as CustomSessionUser
+  const usernameRoute = routePaths.root(customUser.login!)
 
   return (
-    <div className={styles.headerContainer}>
-      <Logo width="48px" height="48px" color={COLOR.GREEN_500} bgColor={COLOR.CREAM}/>
+    <div className="flex justify-between bg-primary-200 px-5 py-[10px] shadow-medium">
+      <Link href={usernameRoute}>
+        <Logo
+          width="48px"
+          height="48px"
+        />
+      </Link>
       <div className={styles.userInfo}>
-        {/*{customUser && <UserMenu customUser={customUser} />}*/}
-        {/*<SignOutButton />*/}
+        {customUser && <UserMenu customUser={customUser} />}
       </div>
     </div>
   )

src/5-entities/user/index.ts

@@ -5,12 +5,10 @@ import {
 } from './api/githubUserApi'
 
 import type { GithubUser } from './model/types'
-import UserCard from './ui/UserCard/UserCard'
 
 export type { GithubUser }
 export {
   githubUserApi,
   useGetGithubUserDataQuery,
   useLazyGetGithubUserDataQuery,
-  UserCard,
 }