Add popular page (#997)

src/components/Sidenav/ViewerSidenav/ViewerSidenav.tsx

@@ -4,7 +4,7 @@ import { NavItemType, SidenavBase } from '@/components/Sidenav/SidenavBase'
 import { absoluteRoutes } from '@/config/routes'
 import { usePersonalDataStore } from '@/providers'
 import { Button } from '@/shared/components'
-import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavVideos } from '@/shared/icons'
+import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavPopular, SvgNavVideos } from '@/shared/icons'
 import { openInNewTab } from '@/utils/browser'
 import { ConsoleLogger } from '@/utils/logs'
 
@@ -16,6 +16,11 @@ const viewerSidenavItems: NavItemType[] = [
     name: 'Home',
     to: absoluteRoutes.viewer.index(),
   },
+  {
+    icon: <SvgNavPopular />,
+    name: 'Popular',
+    to: absoluteRoutes.viewer.popular(),
+  },
   {
     icon: <SvgNavVideos />,
     name: 'Videos',

src/config/routes.ts

@@ -19,6 +19,7 @@ const withQueryParameters = (basePath: string, query: Record<string, string> = {
 export const relativeRoutes = {
   viewer: {
     index: () => '',
+    popular: () => 'popular',
     search: (query?: { query?: string }) => withQueryParameters('search', query),
     channel: (id = ':id') => `channel/${id}`,
     channels: () => 'channels',

src/views/viewer/PopularView/PopularView.tsx

@@ -0,0 +1,5 @@
+import React, { FC } from 'react'
+
+import { ViewWrapper } from '@/components'
+
+export const PopularView: FC = () => <ViewWrapper>Popular</ViewWrapper>

src/views/viewer/PopularView/index.ts

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

src/views/viewer/ViewerLayout.tsx

@@ -10,10 +10,11 @@ import { absoluteRoutes, relativeRoutes } from '@/config/routes'
 import { transitions } from '@/shared/theme'
 import { RoutingState } from '@/types/routing'
 
-import { ChannelView, ChannelsView, HomeView, SearchOverlayView, VideoView, VideosView } from '.'
+import { ChannelView, ChannelsView, HomeView, PopularView, SearchOverlayView, VideoView, VideosView } from '.'
 
 const viewerRoutes = [
   { path: relativeRoutes.viewer.index(), element: <HomeView /> },
+  { path: relativeRoutes.viewer.popular(), element: <PopularView /> },
   { path: relativeRoutes.viewer.video(), element: <VideoView /> },
   { path: relativeRoutes.viewer.videos(), element: <VideosView /> },
   { path: relativeRoutes.viewer.channels(), element: <ChannelsView /> },

src/views/viewer/index.ts

@@ -1,3 +1,4 @@
+export * from './PopularView'
 export * from './ChannelView'
 export * from './ChannelsView'
 export * from './HomeView'