diff options
Diffstat (limited to 'apps/web/components')
4 files changed, 30 insertions, 14 deletions
diff --git a/apps/web/components/HoarderIcon.tsx b/apps/web/components/HoarderIcon.tsx new file mode 100644 index 00000000..a4b76f6a --- /dev/null +++ b/apps/web/components/HoarderIcon.tsx @@ -0,0 +1,20 @@ +import HoarderLogoIcon from "@/public/icons/logo-icon.svg"; +import HoarderLogoText from "@/public/icons/logo-text.svg"; + +export default function HoarderLogo({ + height, + gap, +}: { + height: number; + gap: string; +}) { + return ( + <span style={{ gap }} className="flex items-center"> + <HoarderLogoIcon height={height} className={`fill-foreground`} /> + <HoarderLogoText + height={(height * 2) / 3} + className={`fill-foreground`} + /> + </span> + ); +} diff --git a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx index 7306308d..635f63bd 100644 --- a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx +++ b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx @@ -1,10 +1,5 @@ -import { - ClipboardList, - PackageOpen, - Search, - Settings, - Tag, -} from "lucide-react"; +import HoarderLogoIcon from "@/public/icons/logo-icon.svg"; +import { ClipboardList, Search, Settings, Tag } from "lucide-react"; import MobileSidebarItem from "./ModileSidebarItem"; import SidebarProfileOptions from "./SidebarProfileOptions"; @@ -13,7 +8,10 @@ export default async function MobileSidebar() { return ( <aside className="w-full"> <ul className="flex justify-between space-x-2 border-b-black px-5 py-2 pt-5"> - <MobileSidebarItem logo={<PackageOpen />} path="/dashboard/bookmarks" /> + <MobileSidebarItem + logo={<HoarderLogoIcon className="w-5 fill-foreground" />} + path="/dashboard/bookmarks" + /> <MobileSidebarItem logo={<Search />} path="/dashboard/search" /> <MobileSidebarItem logo={<ClipboardList />} path="/dashboard/lists" /> <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" /> diff --git a/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx b/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx index 3382f47b..4d3436ea 100644 --- a/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx +++ b/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx @@ -19,7 +19,7 @@ export default function MobileSidebarItem({ path == currentPath ? "bg-background" : "", )} > - <Link href={path} className="mx-auto px-3 py-2"> + <Link href={path} className="m-auto px-3 py-2"> {logo} </Link> </li> diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx index 1c18e90c..08ad2936 100644 --- a/apps/web/components/dashboard/sidebar/Sidebar.tsx +++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx @@ -1,9 +1,10 @@ import Link from "next/link"; import { redirect } from "next/navigation"; +import HoarderLogo from "@/components/HoarderIcon"; import { Separator } from "@/components/ui/separator"; import { api } from "@/server/api/client"; import { getServerAuthSession } from "@/server/auth"; -import { Home, PackageOpen, Search, Settings, Shield, Tag } from "lucide-react"; +import { Home, Search, Settings, Shield, Tag } from "lucide-react"; import serverConfig from "@hoarder/shared/config"; @@ -22,10 +23,7 @@ export default async function Sidebar() { return ( <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4"> <Link href={"/dashboard/bookmarks"}> - <div className="flex items-center rounded-lg px-1 text-foreground"> - <PackageOpen /> - <span className="ml-2 text-base font-semibold">Hoarder</span> - </div> + <HoarderLogo height={20} gap="8px" /> </Link> <Separator /> <div> |