External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Working on style and color on the side bar, and the items buttons.

Browse Source
This commit is contained in:
charles-gauthereau
2024-11-10 11:01:59 +01:00
parent ce0265bd8c
commit 84030dcba0
11 changed files with 278 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(customer)/dashboard/agents/page.tsx
+15
View File
@@ -0,0 +1,15 @@
import {PageParams} from "@/types/next";
export default async function RoutePage(props: PageParams<{}>) {
return (
<div className="flex flex-1 flex-col gap-4 p-4">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
</div>
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
</div>
)
}
app/(customer)/dashboard/home/page.tsx
+8 -4
View File
@@ -2,10 +2,14 @@ import {PageParams} from "@/types/next";
export default async function RoutePage(props: PageParams<{}>) {
return(
<div>
<h1>Home</h1>
return (
<div className="flex flex-1 flex-col gap-4 p-4">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
</div>
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
</div>
)
}
app/(customer)/dashboard/kpi/page.tsx
+15
View File
@@ -0,0 +1,15 @@
import {PageParams} from "@/types/next";
export default async function RoutePage(props: PageParams<{}>) {
return (
<div className="flex flex-1 flex-col gap-4 p-4">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
</div>
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
</div>
)
}
app/(customer)/dashboard/layout.tsx
+8 -7
View File
@@ -2,23 +2,24 @@ import {SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/si
import {AppSidebar} from "@/components/wrappers/Dashboard/SideBar/app-sidebar";
import {currentUser} from "@/auth/current-user";
import {redirect} from "next/navigation";
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
import {ModeToggle} from "@/features/theme/ModeToggle";
import {Header} from "@/features/layout/Header";
export default async function Layout({children}: { children: React.ReactNode }) {
const user = await currentUser()
if (!user) {
redirect('/login')
}
return (
<SidebarProvider>
<AppSidebar/>
<main>
<SidebarTrigger/>
{children}
</main>
<AppSidebar />
<SidebarInset>
<Header/>
<main>{children}</main>
</SidebarInset>
</SidebarProvider>
)
}
app/(customer)/dashboard/settings/page.tsx
+15
View File
@@ -0,0 +1,15 @@
import {PageParams} from "@/types/next";
export default async function RoutePage(props: PageParams<{}>) {
return (
<div className="flex flex-1 flex-col gap-4 p-4">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
</div>
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
</div>
)
}
app/globals.css
+108 -35
View File
@@ -2,43 +2,116 @@
@tailwind components;
@tailwind utilities;
body {
font-family: Arial, Helvetica, sans-serif;
}
/*body {*/
/* font-family: Arial, Helvetica, sans-serif;*/
/*}*/
/*@layer utilities {*/
/* .text-balance {*/
/* text-wrap: balance;*/
/* }*/
/*}*/
/*@layer base {*/
/* :root {*/
/* --background: 0 0% 100%;*/
/* --foreground: 0 0% 3.9%;*/
/* --card: 0 0% 100%;*/
/* --card-foreground: 0 0% 3.9%;*/
/* --popover: 0 0% 100%;*/
/* --popover-foreground: 0 0% 3.9%;*/
/* --primary: 0 0% 9%;*/
/* --primary-foreground: 0 0% 98%;*/
/* --secondary: 0 0% 96.1%;*/
/* --secondary-foreground: 0 0% 9%;*/
/* --muted: 0 0% 96.1%;*/
/* --muted-foreground: 0 0% 45.1%;*/
/* --accent: 0 0% 96.1%;*/
/* --accent-foreground: 0 0% 9%;*/
/* --destructive: 0 84.2% 60.2%;*/
/* --destructive-foreground: 0 0% 98%;*/
/* --border: 0 0% 89.8%;*/
/* --input: 0 0% 89.8%;*/
/* --ring: 0 0% 3.9%;*/
/* --chart-1: 12 76% 61%;*/
/* --chart-2: 173 58% 39%;*/
/* --chart-3: 197 37% 24%;*/
/* --chart-4: 43 74% 66%;*/
/* --chart-5: 27 87% 67%;*/
/* --radius: 0.5rem;*/
/* --sidebar-background: 0 0% 98%;*/
/* --sidebar-foreground: 240 5.3% 26.1%;*/
/* --sidebar-primary: 240 5.9% 10%;*/
/* --sidebar-primary-foreground: 0 0% 98%;*/
/* --sidebar-accent: 240 4.8% 95.9%;*/
/* --sidebar-accent-foreground: 240 5.9% 10%;*/
/* --sidebar-border: 220 13% 91%;*/
/* --sidebar-ring: 217.2 91.2% 59.8%;*/
/* }*/
/* .dark {*/
/* --background: 0 0% 3.9%;*/
/* --foreground: 0 0% 98%;*/
/* --card: 0 0% 3.9%;*/
/* --card-foreground: 0 0% 98%;*/
/* --popover: 0 0% 3.9%;*/
/* --popover-foreground: 0 0% 98%;*/
/* --primary: 0 0% 98%;*/
/* --primary-foreground: 0 0% 9%;*/
/* --secondary: 0 0% 14.9%;*/
/* --secondary-foreground: 0 0% 98%;*/
/* --muted: 0 0% 14.9%;*/
/* --muted-foreground: 0 0% 63.9%;*/
/* --accent: 0 0% 14.9%;*/
/* --accent-foreground: 0 0% 98%;*/
/* --destructive: 0 62.8% 30.6%;*/
/* --destructive-foreground: 0 0% 98%;*/
/* --border: 0 0% 14.9%;*/
/* --input: 0 0% 14.9%;*/
/* --ring: 0 0% 83.1%;*/
/* --chart-1: 220 70% 50%;*/
/* --chart-2: 160 60% 45%;*/
/* --chart-3: 30 80% 55%;*/
/* --chart-4: 280 65% 60%;*/
/* --chart-5: 340 75% 55%;*/
/* --sidebar-background: 240 5.9% 10%;*/
/* --sidebar-foreground: 240 4.8% 95.9%;*/
/* --sidebar-primary: 224.3 76.3% 48%;*/
/* --sidebar-primary-foreground: 0 0% 100%;*/
/* --sidebar-accent: 240 3.7% 15.9%;*/
/* --sidebar-accent-foreground: 240 4.8% 95.9%;*/
/* --sidebar-border: 240 3.7% 15.9%;*/
/* --sidebar-ring: 217.2 91.2% 59.8%;*/
/* }*/
/*}*/
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
@@ -48,26 +121,27 @@ body {
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 0 0% 3.9%;
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
@@ -81,13 +155,12 @@ body {
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
@layer base {
* {
@apply border-border;
app/providers.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const Providers = (props: ProviderProps) => {
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
// disableTransitionOnChange
>
<QueryClientProvider client={queryClient}>
<Toaster/>
src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
+37 -25
View File
@@ -1,26 +1,37 @@
import {
Sidebar,
SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenu, SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {Calendar, ChevronDown, ChevronUp, Home, Inbox, Search, Settings, User2} from "lucide-react";
import {
Calendar,
ChartArea,
ChevronDown,
ChevronUp,
Home,
Inbox,
Search,
Settings,
ShieldHalf,
User2
} from "lucide-react";
import Link from "next/link";
import {signOutAction} from "@/features/auth/auth.action";
import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
import {Button, buttonVariants} from "@/components/ui/button"
import {cn} from "@/lib/utils";
export function AppSidebar() {
const BASE_URL = "/dashboard";
// Menu items.
@@ -31,23 +42,18 @@ export function AppSidebar() {
icon: Home,
},
{
title: "Inbox",
url: "/home",
icon: Inbox,
title: "Agents",
url: "agents",
icon: ShieldHalf,
},
{
title: "Calendar",
url: "#",
icon: Calendar,
},
{
title: "Search",
url: "#",
icon: Search,
title: "Statistic",
url: "kpi",
icon: ChartArea,
},
{
title: "Settings",
url: "#",
url: "settings",
icon: Settings,
},
]
@@ -59,10 +65,10 @@ export function AppSidebar() {
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton>
Select Workspace
<ChevronDown className="ml-auto" />
</SidebarMenuButton>
<SidebarMenuButton>
Select Workspace
<ChevronDown className="ml-auto"/>
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[--radix-popper-anchor-width]">
<DropdownMenuItem>
@@ -83,14 +89,20 @@ export function AppSidebar() {
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<Link href={`${BASE_URL}/${item.url}`}>
<item.icon />
<span>{item.title}</span>
<SidebarMenuButton asChild >
<Link
className={cn(buttonVariants({size: "lg", variant: "ghost"}), "justify-start p-0")}
href={`${BASE_URL}/${item.url}`}>
<item.icon/>
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
<SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100" />
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
src/features/layout/Header.tsx
+27
View File
@@ -0,0 +1,27 @@
import Image from "next/image"
import {Layout} from "@/components/layout";
import Link from "next/link";
import {Badge} from "@/components/ui/badge";
import {currentUser} from "@/auth/current-user";
import {notFound} from "next/navigation";
import {buttonVariants} from "@/components/ui/button";
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
import {SidebarTrigger} from "@/components/ui/sidebar";
import {ModeToggle} from "@/features/theme/ModeToggle";
export const Header = async () => {
const user = await currentUser()
if (!user) {
return notFound()
}
return (
<header className="flex h-16 shrink-0 items-center justify-between border-b px-4">
<SidebarTrigger className="-ml-1"/>
<div className="flex items-center gap-2">
<ModeToggle/>
<LoggedInButton/>
</div>
</header>
)
}
src/features/theme/ModeToggle.tsx
+40
View File
@@ -0,0 +1,40 @@
"use client"
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
export function ModeToggle() {
const { setTheme } = useTheme()
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
tailwind.config.ts
+4
View File
@@ -52,6 +52,10 @@ const config = {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
sidebar: {
DEFAULT: "hsl(var(--sidebar-background))",
foreground: "hsl(var(--sidebar-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",