feat: fixing layout, sidebar, etc on Admin

This commit is contained in:
hanif salafi 2024-12-07 23:32:39 +07:00
parent 1a7732bf3f
commit a82977105e
14 changed files with 58 additions and 37 deletions

View File

@ -1,3 +1,5 @@
"use client"
import React, { useState } from "react"; import React, { useState } from "react";
import ThemeSwitcher from "@/components/partials/header/theme-switcher"; import ThemeSwitcher from "@/components/partials/header/theme-switcher";
import { import {

View File

@ -25,12 +25,12 @@ const Logo = () => {
if (config.sidebar === "two-column" || !isDesktop) return null; if (config.sidebar === "two-column" || !isDesktop) return null;
return ( return (
<Link href="/dashboard/analytics" className="flex gap-2 items-center "> <Link href="/" className="flex items-center">
{/* <DashCodeLogo className=" text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" /> {/* <DashCodeLogo className=" text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" />
{(!config?.collapsed || hovered) && ( {(!config?.collapsed || hovered) && (
<h1 className="text-xl font-semibold text-default-900 ">D</h1> <h1 className="text-xl font-semibold text-default-900 ">D</h1>
)} */} )} */}
<img src="/../images/all-img/mediahub-logo.png" alt="logo" width={150} /> <img className="w-100" src="/../images/all-img/mediahub-logo.png" alt="logo" width={150} />
</Link> </Link>
); );
}; };

View File

@ -11,17 +11,9 @@ const DashCodeFooter = async () => {
<FooterContent> <FooterContent>
<div className=' md:flex justify-between text-default-600 hidden'> <div className=' md:flex justify-between text-default-600 hidden'>
<div className="text-center ltr:md:text-start rtl:md:text-right text-sm"> <div className="text-center ltr:md:text-start rtl:md:text-right text-sm">
COPYRIGHT &copy; {new Date().getFullYear()} DashCode, All rights Reserved
</div> </div>
<div className="ltr:md:text-right rtl:md:text-end text-center text-sm"> <div className="ltr:md:text-right rtl:md:text-end text-center text-sm">
Hand-crafted & Made by{" "} COPYRIGHT &copy; {new Date().getFullYear()} Media Hub, All rights Reserved
<a
href="https://codeshaper.net"
target="_blank"
className="text-primary font-semibold"
>
Codeshaper
</a>
</div> </div>
</div> </div>
<div className='flex md:hidden justify-around items-center'> <div className='flex md:hidden justify-around items-center'>

View File

@ -64,7 +64,7 @@ export default function LocalSwitcher() {
<span className='font-medium text-sm text-default-600 dark:text-default-700'>In</span> <span className='font-medium text-sm text-default-600 dark:text-default-700'>In</span>
</div> </div>
</SelectItem> </SelectItem>
<SelectItem value="ar"> {/* <SelectItem value="ar">
<div className='flex items-center gap-1'> <div className='flex items-center gap-1'>
<Image <Image
src="/images/all-img/flag-2.png" src="/images/all-img/flag-2.png"
@ -75,7 +75,7 @@ export default function LocalSwitcher() {
/> />
<span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span> <span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span>
</div> </div>
</SelectItem> </SelectItem> */}
</SelectContent> </SelectContent>
</Select> </Select>

View File

@ -137,7 +137,7 @@ const MenuItem = ({ href, label, icon, active, id, collapsed }: MenuItemProps) =
> >
<Link href={href}> <Link href={href}>
<Icon icon={icon} className={cn('h-5 w-5 ', { <Icon icon={icon} className={cn('h-5 w-5 ', {
'me-2': !collapsed || hovered 'me-4': !collapsed || hovered
})} /> })} />
{(!collapsed || hovered) && ( {(!collapsed || hovered) && (
<p <p

View File

@ -61,7 +61,7 @@ export function MenuClassic({ }) {
return ( return (
<> <>
{isDesktop && ( {isDesktop && (
<div className="flex items-center justify-between px-4 py-4"> <div className="flex items-center justify-center mt-2 px-4 py-4">
<Logo /> <Logo />
<SidebarHoverToggle /> <SidebarHoverToggle />
</div> </div>
@ -71,7 +71,7 @@ export function MenuClassic({ }) {
<ScrollArea className="[&>div>div[style]]:!block" dir={direction}> <ScrollArea className="[&>div>div[style]]:!block" dir={direction}>
{isDesktop && ( {/* {isDesktop && (
<div className={cn(' space-y-3 mt-6 ', { <div className={cn(' space-y-3 mt-6 ', {
'px-4': !collapsed || hovered, 'px-4': !collapsed || hovered,
'text-center': collapsed || !hovered 'text-center': collapsed || !hovered
@ -81,9 +81,9 @@ export function MenuClassic({ }) {
<SearchBar /> <SearchBar />
</div> </div>
)} )} */}
<nav className="mt-8 h-full w-full"> <nav className="mt-4 h-full w-full">
<ul className=" h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-4"> <ul className=" h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-4">
{menuList?.map(({ groupLabel, menus }, index) => ( {menuList?.map(({ groupLabel, menus }, index) => (
<li className={cn("w-full", groupLabel ? "" : "")} key={index}> <li className={cn("w-full", groupLabel ? "" : "")} key={index}>

View File

@ -31,8 +31,8 @@ const SidebarContent = ({ children }: { children: React.ReactNode }) => {
return ( return (
<aside <aside
onMouseEnter={() => config.sidebar === 'classic' && setHoverConfig({ hovered: true })} onMouseEnter={() => config.sidebar === 'draggable' && setHoverConfig({ hovered: true })}
onMouseLeave={() => config.sidebar === 'classic' && setHoverConfig({ hovered: false })} onMouseLeave={() => config.sidebar === 'draggable' && setHoverConfig({ hovered: false })}
className={cn('fixed z-50 w-[248px] bg-sidebar shadow-base xl:block hidden ', sidebarTheme, { className={cn('fixed z-50 w-[248px] bg-sidebar shadow-base xl:block hidden ', sidebarTheme, {
'w-[72px]': config.collapsed && config.sidebar !== 'compact', 'w-[72px]': config.collapsed && config.sidebar !== 'compact',

View File

@ -11,7 +11,7 @@ const SidebarHoverToggle = () => {
const [config, setConfig] = useConfig(); const [config, setConfig] = useConfig();
const isDesktop = useMediaQuery("(min-width: 1280px)"); const isDesktop = useMediaQuery("(min-width: 1280px)");
if (config.sidebar !== 'classic' || !isDesktop) { if (config.sidebar !== 'draggable' || !isDesktop) {
return null return null
} }

View File

@ -14,7 +14,7 @@ export function SidebarToggle() {
const collapsed = config.collapsed const collapsed = config.collapsed
const isDesktop = useMediaQuery('(min-width: 1280px)') const isDesktop = useMediaQuery('(min-width: 1280px)')
if (!isDesktop) return null if (!isDesktop) return null
if (config.sidebar === 'two-column' && !config.hasSubMenu || config.menuHidden || config.layout === "horizontal" || config.sidebar === 'classic') { if (config.sidebar === 'two-column' && !config.hasSubMenu || config.menuHidden || config.layout === "horizontal" || config.sidebar === 'draggable' ) {
return null return null
} }
if (config.sidebar === 'two-column') { if (config.sidebar === 'two-column') {

View File

@ -42,7 +42,7 @@ export const defaultConfig: Config = {
showSwitcher: true, showSwitcher: true,
subMenu: false, subMenu: false,
hasSubMenu: false, hasSubMenu: false,
sidebarTheme: 'light', sidebarTheme: 'dark',
headerTheme: 'light', headerTheme: 'light',
sidebarBgImage: undefined, sidebarBgImage: undefined,
radius: 0.5, radius: 0.5,

View File

@ -31,7 +31,7 @@ export type Group = {
export function getMenuList(pathname: string, t: any): Group[] { export function getMenuList(pathname: string, t: any): Group[] {
return [ return [
{ {
groupLabel: t("dashboard"), groupLabel: t("apps"),
id: "dashboard", id: "dashboard",
menus: [ menus: [
{ {
@ -51,34 +51,34 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "content", id: "content",
href: "/content/image", href: "/content/image",
label: "konten", label: t("content"),
active: pathname.includes("/content"), active: pathname.includes("/content"),
icon: "line-md:youtube", icon: "line-md:youtube",
submenus: [ submenus: [
{ {
href: "/content/image", href: "/content/image",
label: "image", label: t("image"),
active: pathname === "/content/image", active: pathname === "/content/image",
icon: "ic:outline-image", icon: "ic:outline-image",
children: [], children: [],
}, },
{ {
href: "/content/audio-visual", href: "/content/audio-visual",
label: "audio visual", label: t("video"),
active: pathname === "/content/audio-visual", active: pathname === "/content/audio-visual",
icon: "line-md:youtube", icon: "line-md:youtube",
children: [], children: [],
}, },
{ {
href: "/content/teks", href: "/content/teks",
label: "teks", label: t("text"),
active: pathname === "/content/teks", active: pathname === "/content/teks",
icon: "heroicons:document", icon: "heroicons:document",
children: [], children: [],
}, },
{ {
href: "/content/audio", href: "/content/audio",
label: "audio", label: t("audio"),
active: pathname === "/content/audio", active: pathname === "/content/audio",
icon: "heroicons:share", icon: "heroicons:share",
children: [], children: [],
@ -108,7 +108,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "agenda-setting", id: "agenda-setting",
href: "/agenda-setting", href: "/agenda-setting",
label: "agenda setting", label: t("agenda-setting"),
active: pathname.includes("/agenda-setting"), active: pathname.includes("/agenda-setting"),
icon: "iconoir:journal-page", icon: "iconoir:journal-page",
submenus: [], submenus: [],
@ -122,7 +122,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "planning", id: "planning",
href: "/planning", href: "/planning",
label: "perencanaan", label: t("planning"),
active: pathname.includes("/planning"), active: pathname.includes("/planning"),
icon: "pajamas:planning", icon: "pajamas:planning",
submenus: [ submenus: [
@ -151,7 +151,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "task", id: "task",
href: "/task", href: "/task",
label: "penugasan", label: t("task"),
active: pathname.includes("/task"), active: pathname.includes("/task"),
icon: "fluent:clipboard-task-add-24-regular", icon: "fluent:clipboard-task-add-24-regular",
submenus: [], submenus: [],
@ -165,7 +165,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "schedule", id: "schedule",
href: "/schedule", href: "/schedule",
label: "schedule", label: t("schedule"),
active: pathname.includes("/schedule"), active: pathname.includes("/schedule"),
icon: "uil:schedule", icon: "uil:schedule",
submenus: [ submenus: [
@ -201,7 +201,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "blog", id: "blog",
href: "/blog", href: "/blog",
label: "indeks", label: t("blog"),
active: pathname.includes("/blog"), active: pathname.includes("/blog"),
icon: "fluent:clipboard-text-32-regular", icon: "fluent:clipboard-text-32-regular",
submenus: [], submenus: [],
@ -215,7 +215,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "curatedcontent", id: "curatedcontent",
href: "/curated-content", href: "/curated-content",
label: "kurasi konten", label: t("curated-content"),
active: pathname.includes("/curated-content"), active: pathname.includes("/curated-content"),
icon: "pixelarticons:calendar-text", icon: "pixelarticons:calendar-text",
submenus: [], submenus: [],
@ -229,7 +229,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "communication", id: "communication",
href: "/communication", href: "/communication",
label: "komunikasi", label: t("communication"),
active: pathname.includes("/communication"), active: pathname.includes("/communication"),
icon: "token:chat", icon: "token:chat",
submenus: [], submenus: [],
@ -243,7 +243,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
{ {
id: "contest", id: "contest",
href: "/contest", href: "/contest",
label: "lomba", label: t("contest"),
active: pathname.includes("/contest"), active: pathname.includes("/contest"),
icon: "ic:outline-emoji-events", icon: "ic:outline-emoji-events",
submenus: [], submenus: [],

View File

@ -125,6 +125,18 @@
}, },
"Menu": { "Menu": {
"dashboard": "Dashboard", "dashboard": "Dashboard",
"content": "Content",
"image": "Image",
"video": "Video",
"audio": "Audio",
"text": "Text",
"agenda-setting": "Agenda Setting",
"task": "Task",
"planning": "Planning",
"schedule": "Schedule",
"curated-content": "Curated Content",
"communication": "Communication",
"contest": "Contest",
"analytics": "Analytics", "analytics": "Analytics",
"banking": "Banking", "banking": "Banking",
"crm": "Crm", "crm": "Crm",

View File

@ -125,6 +125,18 @@
}, },
"Menu": { "Menu": {
"dashboard": "Dashboard", "dashboard": "Dashboard",
"content": "Konten",
"image": "Foto",
"video": "Audio Visual",
"audio": "Audio",
"text": "Teks",
"agenda-setting": "Agenda Setting",
"task": "Penugasan",
"planning": "Perencanaan",
"schedule": "Jadwal",
"curated-content": "Kurasi Konten",
"communication": "Komunikasi",
"contest": "Kontes",
"analytics": "Analytics", "analytics": "Analytics",
"banking": "Banking", "banking": "Banking",
"crm": "Crm", "crm": "Crm",

3
package-lock.json generated
View File

@ -6638,6 +6638,7 @@
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
"os": [ "os": [
@ -8551,6 +8552,7 @@
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
"integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
"dev": true,
"engines": { "engines": {
"node": ">=14" "node": ">=14"
}, },
@ -13149,6 +13151,7 @@
"version": "3.4.16", "version": "3.4.16",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
"integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==", "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
"dev": true,
"dependencies": { "dependencies": {
"@alloc/quick-lru": "^5.2.0", "@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2", "arg": "^5.0.2",