[portal][ui] change app shell nav structure

pull/492/head
Yangshun Tay 2 years ago
parent 48dccb821e
commit 8e08ff86f4

@ -136,7 +136,7 @@ export default function AppShell({ children }: Props) {
return ( return (
<GoogleAnalytics <GoogleAnalytics
measurementID={currentProductNavigation.googleAnalyticsMeasurementID}> measurementID={currentProductNavigation.googleAnalyticsMeasurementID}>
<div className="flex h-full min-h-screen"> <div className="flex">
{/* Narrow sidebar */} {/* Narrow sidebar */}
{currentProductNavigation.showGlobalNav && ( {currentProductNavigation.showGlobalNav && (
<div className="hidden w-28 overflow-y-auto border-r border-slate-200 bg-white md:block"> <div className="hidden w-28 overflow-y-auto border-r border-slate-200 bg-white md:block">
@ -183,9 +183,10 @@ export default function AppShell({ children }: Props) {
setIsShown={setMobileMenuOpen} setIsShown={setMobileMenuOpen}
/> />
{/* Content area */} {/* Content area */}
<div className="flex h-screen flex-1 flex-col overflow-hidden"> <div className="w-full">
<header className="w-full"> {/* Navigation Bar */}
<div className="relative z-10 flex h-16 flex-shrink-0 border-b border-slate-200 bg-white shadow-sm"> <header className="sticky top-0 z-10 w-full">
<div className="relative flex h-16 flex-shrink-0 border-b border-slate-200 bg-white shadow-sm">
<button <button
className="focus:ring-primary-500 border-r border-slate-200 px-4 text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden" className="focus:ring-primary-500 border-r border-slate-200 px-4 text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden"
type="button" type="button"
@ -208,11 +209,8 @@ export default function AppShell({ children }: Props) {
</div> </div>
</div> </div>
</header> </header>
{/* Main Content */}
{/* Main content */} <div className="w-full">{children}</div>
<div className="flex flex-1 items-stretch overflow-hidden">
{children}
</div>
</div> </div>
</div> </div>
</GoogleAnalytics> </GoogleAnalytics>

@ -2,9 +2,9 @@ import { Head, Html, Main, NextScript } from 'next/document';
export default function Document() { export default function Document() {
return ( return (
<Html className="h-full bg-slate-50"> <Html className="bg-slate-50">
<Head /> <Head />
<body className="h-full overflow-hidden"> <body>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

Loading…
Cancel
Save