wodey-prototype/app/studio/layout.tsx

import { Button } from '@/components/ui/button';
import { Add, ArrowDown2, Book1, Eye, Layer, Link2, Message, PlayCircle, Pointer, SearchNormal1 } from 'iconsax-react';
import { Download, PointerIcon, Redo2, Share2, Square, Undo2 } from 'lucide-react';
import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import Sidebar from '../components/common/SideBar';

export const metadata: Metadata = {
    title: 'Studio',
}

export interface Props {
    children: React.ReactNode
}

function layout({ children }: Props) {
    return (
        <div className="flex flex-col h-screen w-full overflow-x-hidden">

            {/* NavBar */}
            <div className='w-full h-[80px]  top-0 z-10 flex items-center align-middle bg-white shadow-md justify-between px-3 md:px-5'>
                <div className='w-full md:w-[60%] flex flex-wrap md:flex-nowrap items-center align-middle justify-between gap-2'>
                    <Image src="/images/logo.png" alt="logo" width={100} height={100} className='w-[100px] md:w-[116px] h-[45px] md:h-[53px]' />
                    <div className='hidden md:flex items-center gap-4'>
                        <Link href="#" className='text-black hover:text-gray-600'>Home</Link>
                        <Link href="#" className='text-black hover:text-gray-600'>View</Link>
                        <Link href="#" className='text-black hover:text-gray-600'>Help</Link>

                        <p className='text-gray-700 text-sm'>Last saved 5 seconds ago</p>
                    </div>
                    <div className='hidden md:flex items-center gap-4'>
                        <Pointer size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
                        <PointerIcon size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
                        <div className="flex items-center gap-1 cursor-pointer">
                            <p>100%</p>
                            <ArrowDown2 size="20" color="#555555" />
                        </div>
                        <div className="flex items-center gap-1">
                            <Undo2 size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
                            <Redo2 size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
                        </div>
                    </div>
                </div>

                <div className='flex gap-2 md:gap-3 items-center align-middle'>
                    <Button variant='outline' className='h-8 w-8 md:h-10 md:w-10 p-1 md:p-2' aria-label="Color picker">
                        <div className="h-4 w-4 md:h-5 md:w-5 bg-black rounded-full"></div>
                    </Button>
                    <Button variant='outline' className='h-8 w-8 md:h-10 md:w-10 p-1 md:p-2' aria-label="Download">
                        <Download size="18" color="#555555" />
                    </Button>
                    <Button variant='outline' className='h-8 md:h-10 p-1 md:p-2 flex gap-1 md:gap-2' aria-label="Preview">
                        <Eye size="18" color="#555555" />
                        <p className="hidden md:block">Preview</p>
                    </Button>
                    <Button className='h-8 md:h-10 p-1 md:p-2 flex gap-1 md:gap-2 bg-[#1A237E]' aria-label="Share">
                        <Share2 size="18" color="#ffffff" />
                        <p className="hidden md:block">Share</p>
                    </Button>

                    <div className='flex relative'>
                        <Image src="/images/profile.jpeg" alt="profile" width={40} height={40} className='w-[35px] h-[35px] md:w-[40px] md:h-[40px] rounded-full z-10' />
                        <Button variant='outline' className='absolute right-0 left-5 md:left-7 h-8 w-8 md:h-10 md:w-10 p-1 md:p-2 rounded-full' aria-label="Add user">
                            <Add size="18" color="#555555" />
                        </Button>
                    </div>
                </div>
            </div>
            {/* End of NavBar */}

            {/* Main Content with Sidebar  */}
            <div className='flex flex-col md:flex-row w-full h-[calc(100vh-80px)]'>
                {/* Sidebar - Hidden on mobile by default, can be toggled */}
                <div className="md:block">
                    <Sidebar />
                </div>
                <div className='w-full md:w-[80%] h-full bg-white'>
                    {/* Inner NavBar */}
                    <div className='w-full h-[59px] flex items-center align-middle bg-white shadow-md gap-3 md:gap-6 px-3 md:px-5 border-t-2 border'>
                        <div className='flex flex-col gap-1'>
                            <p>Pages 1</p>
                            <p className='text-xs'>794 * 1123 px</p>
                        </div>
                        <div className='flex gap-2 items-center align-middle h-[58px]'>
                            <p>Background</p>
                            <div className="bg-gradient-to-r from-[#FCDFA3] to-[#9E8EB7] w-[22px] h-[22px] rounded-sm">
                            </div>
                        </div>
                    </div>
                    {/* End of Inner NavBar */}

                    {/* Main Editor */}
                    <div className='flex w-full h-[calc(100vh-139px)]'>
                        <div className="flex justify-center align-center items-center w-[calc(100%-70px)] p-4 md:p-10 bg-[#D9D7D7] overflow-y-auto no-scrollbar">
                        {children}
                        </div>
                        {/* Inner Editor SideBar */}
                        <div className='w-[70px] p-1 md:p-2 bg-white gap-1 flex flex-col justify-between items-center align-middle px-2 md:px-5 border-t-2 border overflow-y-auto no-scrollbar'>
                            <Book1 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Book"/>
                            <Layer size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Layers"/>
                            <SearchNormal1 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Search"/>
                            <Square size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Square"/>
                            <Link2 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Link"/>
                            <PlayCircle size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Play"/>
                            <Message size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Message"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default layout