+
+
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 82bee87..6d67bdb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,189 +1,9 @@
@import 'tailwindcss';
-@import 'tw-animate-css';
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- --radius: 0.625rem;
- --background: oklch(1 0 0);
- --foreground: oklch(0.145 0 0);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.145 0 0);
- --popover: oklch(1 0 0);
- --popover-foreground: oklch(0.145 0 0);
- --primary: oklch(0.205 0 0);
- --primary-foreground: oklch(0.985 0 0);
- --secondary: oklch(0.97 0 0);
- --secondary-foreground: oklch(0.205 0 0);
- --muted: oklch(0.97 0 0);
- --muted-foreground: oklch(0.556 0 0);
- --accent: oklch(0.97 0 0);
- --accent-foreground: oklch(0.205 0 0);
- --destructive: oklch(0.577 0.245 27.325);
- --border: oklch(0.922 0 0);
- --input: oklch(0.922 0 0);
- --ring: oklch(0.708 0 0);
- --chart-1: oklch(0.646 0.222 41.116);
- --chart-2: oklch(0.6 0.118 184.704);
- --chart-3: oklch(0.398 0.07 227.392);
- --chart-4: oklch(0.828 0.189 84.429);
- --chart-5: oklch(0.769 0.188 70.08);
- --sidebar: oklch(0.985 0 0);
- --sidebar-foreground: oklch(0.145 0 0);
- --sidebar-primary: oklch(0.205 0 0);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.97 0 0);
- --sidebar-accent-foreground: oklch(0.205 0 0);
- --sidebar-border: oklch(0.922 0 0);
- --sidebar-ring: oklch(0.708 0 0);
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
-
-@theme inline {
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
- --radius-2xl: calc(var(--radius) + 8px);
- --radius-3xl: calc(var(--radius) + 12px);
- --radius-4xl: calc(var(--radius) + 16px);
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-ring: var(--ring);
- --color-chart-1: var(--chart-1);
- --color-chart-2: var(--chart-2);
- --color-chart-3: var(--chart-3);
- --color-chart-4: var(--chart-4);
- --color-chart-5: var(--chart-5);
- --color-sidebar: var(--sidebar);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-ring: var(--sidebar-ring);
-}
-
-.dark {
- --background: oklch(0.145 0 0);
- --foreground: oklch(0.985 0 0);
- --card: oklch(0.205 0 0);
- --card-foreground: oklch(0.985 0 0);
- --popover: oklch(0.205 0 0);
- --popover-foreground: oklch(0.985 0 0);
- --primary: oklch(0.922 0 0);
- --primary-foreground: oklch(0.205 0 0);
- --secondary: oklch(0.269 0 0);
- --secondary-foreground: oklch(0.985 0 0);
- --muted: oklch(0.269 0 0);
- --muted-foreground: oklch(0.708 0 0);
- --accent: oklch(0.269 0 0);
- --accent-foreground: oklch(0.985 0 0);
- --destructive: oklch(0.704 0.191 22.216);
- --border: oklch(1 0 0 / 10%);
- --input: oklch(1 0 0 / 15%);
- --ring: oklch(0.556 0 0);
- --chart-1: oklch(0.488 0.243 264.376);
- --chart-2: oklch(0.696 0.17 162.48);
- --chart-3: oklch(0.769 0.188 70.08);
- --chart-4: oklch(0.627 0.265 303.9);
- --chart-5: oklch(0.645 0.246 16.439);
- --sidebar: oklch(0.205 0 0);
- --sidebar-foreground: oklch(0.985 0 0);
- --sidebar-primary: oklch(0.488 0.243 264.376);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.269 0 0);
- --sidebar-accent-foreground: oklch(0.985 0 0);
- --sidebar-border: oklch(1 0 0 / 10%);
- --sidebar-ring: oklch(0.556 0 0);
-}
@layer base {
- * {
- @apply border-border outline-ring/50;
- }
- body {
- @apply bg-background text-foreground;
+ html,
+ body,
+ #root {
+ @apply h-full w-full;
}
}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..5e336fc
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,3 @@
+export const HomePage = () => {
+ return HomePage
+}
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index faa5300..f5c47ae 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,6 +9,7 @@
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from './routes/__root'
+import { Route as MeRouteImport } from './routes/me'
import { Route as LoginRouteImport } from './routes/login'
import { Route as ExploreRouteImport } from './routes/explore'
import { Route as Profile_nameRouteImport } from './routes/$profile_name'
@@ -17,6 +18,11 @@ import { Route as PProfile_nameRouteImport } from './routes/p/$profile_name'
import { Route as Profile_nameSavedRouteImport } from './routes/$profile_name/saved'
import { Route as StoriesProfile_nameStory_idRouteImport } from './routes/stories/$profile_name/$story_id'
+const MeRoute = MeRouteImport.update({
+ id: '/me',
+ path: '/me',
+ getParentRoute: () => rootRouteImport,
+} as any)
const LoginRoute = LoginRouteImport.update({
id: '/login',
path: '/login',
@@ -59,6 +65,7 @@ export interface FileRoutesByFullPath {
'/$profile_name': typeof Profile_nameRouteWithChildren
'/explore': typeof ExploreRoute
'/login': typeof LoginRoute
+ '/me': typeof MeRoute
'/$profile_name/saved': typeof Profile_nameSavedRoute
'/p/$profile_name': typeof PProfile_nameRoute
'/stories/$profile_name/$story_id': typeof StoriesProfile_nameStory_idRoute
@@ -68,6 +75,7 @@ export interface FileRoutesByTo {
'/$profile_name': typeof Profile_nameRouteWithChildren
'/explore': typeof ExploreRoute
'/login': typeof LoginRoute
+ '/me': typeof MeRoute
'/$profile_name/saved': typeof Profile_nameSavedRoute
'/p/$profile_name': typeof PProfile_nameRoute
'/stories/$profile_name/$story_id': typeof StoriesProfile_nameStory_idRoute
@@ -78,6 +86,7 @@ export interface FileRoutesById {
'/$profile_name': typeof Profile_nameRouteWithChildren
'/explore': typeof ExploreRoute
'/login': typeof LoginRoute
+ '/me': typeof MeRoute
'/$profile_name/saved': typeof Profile_nameSavedRoute
'/p/$profile_name': typeof PProfile_nameRoute
'/stories/$profile_name/$story_id': typeof StoriesProfile_nameStory_idRoute
@@ -89,6 +98,7 @@ export interface FileRouteTypes {
| '/$profile_name'
| '/explore'
| '/login'
+ | '/me'
| '/$profile_name/saved'
| '/p/$profile_name'
| '/stories/$profile_name/$story_id'
@@ -98,6 +108,7 @@ export interface FileRouteTypes {
| '/$profile_name'
| '/explore'
| '/login'
+ | '/me'
| '/$profile_name/saved'
| '/p/$profile_name'
| '/stories/$profile_name/$story_id'
@@ -107,6 +118,7 @@ export interface FileRouteTypes {
| '/$profile_name'
| '/explore'
| '/login'
+ | '/me'
| '/$profile_name/saved'
| '/p/$profile_name'
| '/stories/$profile_name/$story_id'
@@ -117,12 +129,20 @@ export interface RootRouteChildren {
Profile_nameRoute: typeof Profile_nameRouteWithChildren
ExploreRoute: typeof ExploreRoute
LoginRoute: typeof LoginRoute
+ MeRoute: typeof MeRoute
PProfile_nameRoute: typeof PProfile_nameRoute
StoriesProfile_nameStory_idRoute: typeof StoriesProfile_nameStory_idRoute
}
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
+ '/me': {
+ id: '/me'
+ path: '/me'
+ fullPath: '/me'
+ preLoaderRoute: typeof MeRouteImport
+ parentRoute: typeof rootRouteImport
+ }
'/login': {
id: '/login'
path: '/login'
@@ -184,7 +204,7 @@ const Profile_nameRouteChildren: Profile_nameRouteChildren = {
}
const Profile_nameRouteWithChildren = Profile_nameRoute._addFileChildren(
- Profile_nameRouteChildren
+ Profile_nameRouteChildren,
)
const rootRouteChildren: RootRouteChildren = {
@@ -192,6 +212,7 @@ const rootRouteChildren: RootRouteChildren = {
Profile_nameRoute: Profile_nameRouteWithChildren,
ExploreRoute: ExploreRoute,
LoginRoute: LoginRoute,
+ MeRoute: MeRoute,
PProfile_nameRoute: PProfile_nameRoute,
StoriesProfile_nameStory_idRoute: StoriesProfile_nameStory_idRoute,
}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index e4bbb8f..1011379 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,11 +1,14 @@
import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Providers } from '@/app/providers/Providers'
export const Route = createRootRoute({
component: () => (
- <>
-
+
+
{import.meta.env.DEV ?
),
})
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 3d58f2c..0d54087 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,36 +1,6 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
+import { HomePage } from '@/pages/HomePage'
export const Route = createFileRoute('/')({
component: HomePage,
})
-
-function HomePage() {
- return (
-
-
- )
-}
diff --git a/src/routes/me.tsx b/src/routes/me.tsx
new file mode 100644
index 0000000..7783da8
--- /dev/null
+++ b/src/routes/me.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/me')({
+ component: RouteComponent,
+})
+
+// TODO: add redirect after getting user data
+function RouteComponent() {
+ return Route Examples
-
- /login
- /explore
-
- /user1
-
-
- /user1/saved
-
-
- /stories/user1/123
-
-
- /p/user1?img_index=2
-
-
- Hello "/me"!
+}
diff --git a/src/shared/lib/hooks/use-mobile.ts b/src/shared/lib/hooks/use-mobile.ts
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/src/shared/lib/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState
+ {children}
+
+
+ {children}
+
+ )
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ )
+})
+
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps
+
+
+ {children}
+
+
+ {showIcon && (
+
+ )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+ return (
+
+
+
+
+
+
+
+ {NAV_ITEMS.map((item) => {
+ const isActive =
+ item.type === 'link' &&
+ Boolean(
+ item.to &&
+ matchRoute({
+ to: item.to,
+ })
+ )
+
+ if (item.type === 'link') {
+ return (
+
+
+
+
+
+ )
+}
diff --git a/src/widgets/navigation-sidebar/ui/MobileBottomSidebar.tsx b/src/widgets/navigation-sidebar/ui/MobileBottomSidebar.tsx
new file mode 100644
index 0000000..e168598
--- /dev/null
+++ b/src/widgets/navigation-sidebar/ui/MobileBottomSidebar.tsx
@@ -0,0 +1,52 @@
+import { NAV_ITEMS } from '../model/navItems'
+import { useMatchRoute } from '@tanstack/react-router'
+import { SidebarNavButton } from './SidebarNavItem/SidebarNavButton'
+import { SidebarNavLink } from './SidebarNavItem/SidebarNavLink'
+
+interface MobileBottomNavigationProps {
+ onCreateClick: () => void
+}
+
+export function MobileBottomNavigation({
+ onCreateClick,
+}: MobileBottomNavigationProps) {
+ const matchRoute = useMatchRoute()
+
+ return (
+
+ )
+}
diff --git a/src/widgets/navigation-sidebar/ui/NavigationShell.tsx b/src/widgets/navigation-sidebar/ui/NavigationShell.tsx
new file mode 100644
index 0000000..de94de9
--- /dev/null
+++ b/src/widgets/navigation-sidebar/ui/NavigationShell.tsx
@@ -0,0 +1,23 @@
+import { NavigationSidebar } from './DesktopSidebar'
+import { MobileBottomNavigation } from './MobileBottomSidebar'
+import { useIsMobile } from '@/shared/lib/hooks/use-mobile'
+import { useCallback, useState } from 'react'
+import { CreateModal } from '@/features/create-post/ui/CreateModal'
+
+export function NavigationShell() {
+ const isMobile = useIsMobile()
+ const [isCreateOpen, setIsCreateOpen] = useState(false)
+
+ const openCreate = useCallback(() => setIsCreateOpen(true), [])
+
+ return (
+ <>
+
+ 
+
+
+
+
+ )
+}
diff --git a/src/widgets/navigation-sidebar/ui/SidebarNavItem/SidebarNavLink.tsx b/src/widgets/navigation-sidebar/ui/SidebarNavItem/SidebarNavLink.tsx
new file mode 100644
index 0000000..b70413b
--- /dev/null
+++ b/src/widgets/navigation-sidebar/ui/SidebarNavItem/SidebarNavLink.tsx
@@ -0,0 +1,34 @@
+import { SidebarMenuItem } from '@/shared/ui/sidebar'
+import { Link } from '@tanstack/react-router'
+import type { FileRouteTypes } from '@tanstack/react-router'
+import { SidebarNavItemBase } from './SidebarNavItemBase'
+import type { SidebarNavItemBaseProps } from './SidebarNavItemBase'
+import { SidebarMenuButton } from '@/shared/ui/sidebar'
+import { DEFAULT_NAV_ITEM_CLASS_NAME } from './constants'
+import { cn } from '@/shared/lib/utils'
+
+type SidebarNavLinkProps = SidebarNavItemBaseProps & {
+ to: FileRouteTypes['to']
+}
+
+const COMPACT_NAV_ITEM_CLASS_NAME = 'w-12 justify-center gap-0 px-0'
+
+export function SidebarNavLink({ to, ...rest }: SidebarNavLinkProps) {
+ return (
+