VSinerva/freesewing
1
0
Fork 0
Code Activity

basic mobile support for view nav

Browse source
This commit is contained in:
Enoch Riese 2023-06-24 16:49:28 -05:00
parent 452b25b45a
commit 08c6a91d4e
3 changed files with 34 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

37
sites/shared/components/workbench/header.mjs
View file

@ -18,6 +18,7 @@ import {
MeasieIcon, MeasieIcon,
} from 'shared/components/icons.mjs' } from 'shared/components/icons.mjs'
import Link from 'next/link' import Link from 'next/link'
import { MenuWrapper } from 'shared/components/workbench/menus/shared/menu-wrapper.mjs'
export const ns = ['workbench', 'sections'] export const ns = ['workbench', 'sections']
@ -147,24 +148,30 @@ const NavIcons = ({ setView, setDense, dense, view }) => {
export const WorkbenchHeader = ({ view, setView }) => { export const WorkbenchHeader = ({ view, setView }) => {
const [dense, setDense] = useState(true) const [dense, setDense] = useState(true)
return ( return (
<header <MenuWrapper
className={` Icon={BeakerIcon}
h-full w-64 min-h-screen pt-4 wrapperClass={`h-full w-64 min-h-screen pt-4
bg-neutral bg-neutral
transition-all transition-all
drop-shadow-xl drop-shadow-xl
${dense ? '-ml-52' : 'ml-0'} ${dense ? '-ml-52' : 'ml-0'}`}
group buttonClass={`right-0 bottom-28`}
`}
> >
<div <header
className={` className={`
flex flex-col sticky top-4 lg:top-28
items-center w-full sticky top-4 lg:top-28`} group
`}
> >
<NavIcons {...{ setView, setDense, dense, view }} /> <div
</div> className={`
</header> flex flex-col
items-center w-full `}
>
<NavIcons {...{ setView, setDense, dense, view }} />
</div>
</header>
</MenuWrapper>
) )
} }

17
sites/shared/components/workbench/menus/shared/menu-wrapper.mjs
View file

@ -4,7 +4,14 @@ import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
import { CloseIcon, WrenchIcon } from 'shared/components/icons.mjs' import { CloseIcon, WrenchIcon } from 'shared/components/icons.mjs'
import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs' import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
export const MenuWrapper = ({ children }) => { const defaultClasses = 'w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll'
const defaultButtonClasses = ' bottom-12 right-0'
export const MenuWrapper = ({
children,
wrapperClass = defaultClasses,
buttonClass = defaultButtonClasses,
Icon = WrenchIcon,
}) => {
const { setModal, clearModal, modalContent } = useContext(ModalContext) const { setModal, clearModal, modalContent } = useContext(ModalContext)
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
@ -47,14 +54,12 @@ export const MenuWrapper = ({ children }) => {
return ( return (
<> <>
<button <button
className={`btn btn-primary btn-circle sticky m-4 bottom-16 self-end lg:hidden`} className={`btn btn-primary btn-circle m-4 z-20 lg:hidden ${buttonClass} absolute`}
onClick={onClick} onClick={onClick}
> >
<WrenchIcon />{' '} <Icon />{' '}
</button> </button>
<div className="hidden lg:block w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll"> <div className={`hidden lg:block ${wrapperClass}`}>{children}</div>
{children}
</div>
</> </>
) )
} }

4
sites/shared/components/workbench/new.mjs
View file

@ -193,9 +193,7 @@ export const Workbench = ({ design, Design, DynamicDocs }) => {
return ( return (
<div className="flex flex-row"> <div className="flex flex-row">
<div className="grow-no shrink-no"> <WorkbenchHeader {...{ view, setView, update }} />
<WorkbenchHeader {...{ view, setView, update }} />
</div>
<div className="grow">{viewContent}</div> <div className="grow">{viewContent}</div>
</div> </div>
) )