antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

make app name width adjustable

Browse Source
This commit is contained in:
Anton 2023-12-22 11:15:17 +01:00
parent 064643114b
commit 708f300553
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Components/AppShell/AppShell.tsx
View File

@ -4,10 +4,10 @@ import { BrowserRouter } from 'react-router-dom'
import { ToastContainer } from 'react-toastify' import { ToastContainer } from 'react-toastify'
import { QuestsProvider } from '../Gaming/hooks/useQuests' import { QuestsProvider } from '../Gaming/hooks/useQuests'
import { AssetsProvider, useSetAssetApi } from './hooks/useAssets' import { AssetsProvider, useSetAssetApi } from './hooks/useAssets'
import { useEffect } from 'react'
import { SetAssetsApi } from './SetAssetsApi' import { SetAssetsApi } from './SetAssetsApi'
import { AssetsApi } from '../../types'
export function AppShell({ appName, children, assetsApi }) { export function AppShell({ appName, nameWidth, children, assetsApi } : {appName: string, nameWidth?: number, children: React.ReactNode, assetsApi: AssetsApi}) {
return ( return (
@ -25,7 +25,7 @@ export function AppShell({ appName, children, assetsApi }) {
draggable draggable
pauseOnHover pauseOnHover
theme="light" /> theme="light" />
<NavBar appName={appName}></NavBar> <NavBar appName={appName} nameWidth={nameWidth}></NavBar>
<div id="app-content" className="tw-flex tw-!pl-[77px]"> <div id="app-content" className="tw-flex tw-!pl-[77px]">
{children} {children}
</div> </div>

6
src/Components/AppShell/NavBar.tsx
View File

@ -8,7 +8,7 @@ import * as React from "react";
import DialogModal from "../Templates/DialogModal"; import DialogModal from "../Templates/DialogModal";
export default function NavBar({ appName}: { appName: string }) { export default function NavBar({ appName, nameWidth = 200}: { appName: string, nameWidth?: number }) {
const [signupOpen, setSignupOpen] = useState(false); const [signupOpen, setSignupOpen] = useState(false);
@ -99,8 +99,8 @@ export default function NavBar({ appName}: { appName: string }) {
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="tw-inline-block tw-w-5 tw-h-5 tw-stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="tw-inline-block tw-w-5 tw-h-5 tw-stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button> </button>
<div className="tw-flex-1 tw-mr-2"> <div className="tw-flex-1 tw-mr-2">
<div className="tw-flex-1 tw-truncate tw-grid tw-grid-flow-col tw-max-w-52"> <div className={`tw-flex-1 tw-truncate tw-grid tw-grid-flow-col`} style={{maxWidth: nameWidth}}>
<Link className="tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate" to={"/"}><p className="tw-truncate">{appName}</p></Link> <Link className="tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate" to={"/"}><h1 className="tw-truncate">{appName}</h1></Link>
<button className="tw-btn tw-px-2 tw-btn-ghost" onClick={() => window.my_modal_3.showModal()}><QuestionMarkIcon className="tw-h-5 tw-w-5" /></button> <button className="tw-btn tw-px-2 tw-btn-ghost" onClick={() => window.my_modal_3.showModal()}><QuestionMarkIcon className="tw-h-5 tw-w-5" /></button>
</div> </div>