feat: fixing layout, sidebar, etc on Admin
This commit is contained in:
parent
1a7732bf3f
commit
a82977105e
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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 © {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 © {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'>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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}>
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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') {
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
28
lib/menus.ts
28
lib/menus.ts
|
|
@ -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: [],
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue