index.html

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" imageSrcSet="/_next/static/chunks/images/demo-light-min_1080.png 1x, /_next/static/chunks/images/demo-light-min_3840.png 2x"/><link rel="preload" as="image" imageSrcSet="/_next/static/chunks/images/demo-dark-min_1080.png 1x, /_next/static/chunks/images/demo-dark-min_3840.png 2x"/><link rel="stylesheet" href="/_next/static/css/9b367a3ca07cf0e8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-af29d21611481440.js"/><script src="/_next/static/chunks/f4f1b8d9-a07ae23abc20e317.js" async=""></script><script src="/_next/static/chunks/435-2bd5ed917f4e4ad7.js" async=""></script><script src="/_next/static/chunks/main-app-8dbd0ecf11f646de.js" async=""></script><script src="/_next/static/chunks/app/layout-c558882685e55c10.js" async=""></script><script src="/_next/static/chunks/23a0b913-1d4b907c20c96eab.js" async=""></script><script src="/_next/static/chunks/692-178d9270073c74b6.js" async=""></script><script src="/_next/static/chunks/476-500a7534a05ad9e0.js" async=""></script><script src="/_next/static/chunks/app/page-0db0df09af23fbe2.js" async=""></script><title>shadcn/ui sidebar</title><meta name="description" content="A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness."/><link rel="canonical" href="http://localhost:3000"/><meta property="og:title" content="shadcn/ui sidebar"/><meta property="og:description" content="A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness."/><meta property="og:url" content="http://localhost:3000"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="628"/><meta property="og:image" content="http://localhost:3000/opengraph-image.png?80ced22aa2580bb7"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="shadcn/ui sidebar"/><meta name="twitter:description" content="A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness."/><meta name="twitter:image:type" content="image/png"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="628"/><meta name="twitter:image" content="http://localhost:3000/twitter-image.png?80ced22aa2580bb7"/><link rel="icon" href="/icon.ico?0feaa9213f38694c" type="image/x-icon" sizes="16x16"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__className_3a0388"><script>((e,t,r,n,o,a,i,u)=>{let s=document.documentElement,l=["light","dark"];function c(t){(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&a?o.map(e=>a[e]||e):o;r?(s.classList.remove(...n),s.classList.add(t)):s.setAttribute(e,t)}),u&&l.includes(t)&&(s.style.colorScheme=t)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=i&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","system",null,["light","dark"],null,true,true)</script><div class="flex flex-col min-h-screen"><header class="z-[50] sticky top-0 w-full bg-background/95 border-b backdrop-blur-sm dark:bg-black/[0.6] border-border/40"><div class="container h-14 flex items-center"><a class="flex justify-start items-center hover:opacity-85 transition-opacity duration-300" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panels-top-left w-6 h-6 mr-3"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg><span class="font-bold">shadcn/ui sidebar</span><span class="sr-only">shadcn/ui sidebar</span></a><nav class="ml-auto flex items-center gap-2"><a class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input shadow-sm hover:bg-accent hover:text-accent-foreground rounded-full w-8 h-8 bg-background" href="https://github.com/salimi-my/shadcn-ui-sidebar"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-[1.2rem] w-[1.2rem]"><path d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a><button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input shadow-sm hover:bg-accent hover:text-accent-foreground rounded-full w-8 h-8 bg-background mr-2" data-state="closed"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[1.2rem] h-[1.2rem] rotate-90 scale-0 transition-transform ease-in-out duration-500 dark:rotate-0 dark:scale-100"><path d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute w-[1.2rem] h-[1.2rem] rotate-0 scale-1000 transition-transform ease-in-out duration-500 dark:-rotate-90 dark:scale-0"><path d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><span class="sr-only">Switch Theme</span></button></nav></div></header><main class="min-h-[calc(100vh-57px-97px)] flex-1"><div class="container relative pb-10"><section class="mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-6"><h1 class="text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">Sidebar example built on top of shadcn/ui</h1><span class="max-w-[750px] text-center text-lg font-light text-foreground">A stunning and functional retractable sidebar for Next.js using shadcn/ui complete with desktop and mobile responsiveness.</span><div class="flex w-full items-center justify-center space-x-4 py-4 md:pb-6"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2" href="/dashboard">Demo<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2" href="https://ui.shadcn.com/">Learn shadcn/ui</a></div></section><div class="w-full flex justify-center relative"><img alt="demo" width="1080" height="608" decoding="async" data-nimg="1" class="border rounded-xl shadow-sm dark:hidden" style="color:transparent" srcSet="/_next/static/chunks/images/demo-light-min_1080.png 1x, /_next/static/chunks/images/demo-light-min_3840.png 2x" src="/_next/static/chunks/images/demo-light-min_3840.png"/><img alt="demo-dark" width="1080" height="608" decoding="async" data-nimg="1" class="border border-zinc-600 rounded-xl shadow-sm hidden dark:block dark:shadow-gray-500/5" style="color:transparent" srcSet="/_next/static/chunks/images/demo-dark-min_1080.png 1x, /_next/static/chunks/images/demo-dark-min_3840.png 2x" src="/_next/static/chunks/images/demo-dark-min_3840.png"/><img alt="demo-mobile" loading="lazy" width="228" height="494" decoding="async" data-nimg="1" class="border rounded-xl absolute bottom-0 right-0 hidden lg:block dark:hidden" style="color:transparent" srcSet="/_next/static/chunks/images/demo-mobile-light-min_256.png 1x, /_next/static/chunks/images/demo-mobile-light-min_640.png 2x" src="/_next/static/chunks/images/demo-mobile-light-min_640.png"/><img alt="demo-mobile" loading="lazy" width="228" height="494" decoding="async" data-nimg="1" class="border border-zinc-600 rounded-xl absolute bottom-0 right-0 hidden dark:lg:block" style="color:transparent" srcSet="/_next/static/chunks/images/demo-mobile-dark-min_256.png 1x, /_next/static/chunks/images/demo-mobile-dark-min_640.png 2x" src="/_next/static/chunks/images/demo-mobile-dark-min_640.png"/></div></div></main><footer class="py-6 md:py-0 border-t border-border/40"><div class="container flex flex-col items-center justify-center gap-4 md:h-24 md:flex-row"><p class="text-balance text-center text-sm leading-loose text-muted-foreground">Built on top of<!-- --> <a target="_blank" rel="noopener noreferrer" class="font-medium underline underline-offset-4" href="https://ui.shadcn.com">shadcn/ui</a>. The source code is available on<!-- --> <a target="_blank" rel="noopener noreferrer" class="font-medium underline underline-offset-4" href="https://github.com/salimi-my/shadcn-ui-sidebar">GitHub</a>.</p></div></footer></div><script src="/_next/static/chunks/webpack-af29d21611481440.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[7069,[\"177\",\"static/chunks/app/layout-c558882685e55c10.js\"],\"ThemeProvider\"]\n3:I[5803,[],\"\"]\n4:I[695,[],\"\"]\n5:I[4434,[\"550\",\"static/chunks/23a0b913-1d4b907c20c96eab.js\",\"692\",\"static/chunks/692-178d9270073c74b6.js\",\"476\",\"static/chunks/476-500a7534a05ad9e0.js\",\"974\",\"static/chunks/app/page-0db0df09af23fbe2.js\"],\"\"]\n7:I[7103,[\"550\",\"static/chunks/23a0b913-1d4b907c20c96eab.js\",\"692\",\"static/chunks/692-178d9270073c74b6.js\",\"476\",\"static/chunks/476-500a7534a05ad9e0.js\",\"974\",\"static/chunks/app/page-0db0df09af23fbe2.js\"],\"ModeToggle\"]\n8:I[8164,[\"550\",\"static/chunks/23a0b913-1d4b907c20c96eab.js\",\"692\",\"static/chunks/692-178d9270073c74b6.js\",\"476\",\"static/chunks/476-500a7534a05ad9e0.js\",\"974\",\"static/chunks/app/page-0db0df09af23fbe2.js\"],\"\"]\n9:I[2576,[],\"OutletBoundary\"]\nb:I[2576,[],\"MetadataBoundary\"]\nd:I[2576,[],\"ViewportBoundary\"]\nf:I[7614,[],\"\"]\n:HL[\"/_next/static/css/9b367a3ca07cf0e8.css\",\"style\"]\n6:T49a,M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.41"])</script><script>self.__next_f.push([1,"79 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"VA_WT2J5U4uUnld4ZRF4U\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/9b367a3ca07cf0e8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"__className_3a0388\",\"children\":[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[],[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[[\"$\",\"header\",null,{\"className\":\"z-[50] sticky top-0 w-full bg-background/95 border-b backdrop-blur-sm dark:bg-black/[0.6] border-border/40\",\"children\":[\"$\",\"div\",null,{\"className\":\"container h-14 flex items-center\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"flex justify-start items-center hover:opacity-85 transition-opacity duration-300\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-panels-top-left w-6 h-6 mr-3\",\"children\":[[\"$\",\"rect\",\"afitv7\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"3\",\"rx\":\"2\"}],[\"$\",\"path\",\"1pudct\",{\"d\":\"M3 9h18\"}],[\"$\",\"path\",\"1oto5p\",{\"d\":\"M9 21V9\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-bold\",\"children\":\"shadcn/ui sidebar\"}],[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"shadcn/ui sidebar\"}]]}],[\"$\",\"nav\",null,{\"className\":\"ml-auto flex items-center gap-2\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"https://github.com/salimi-my/shadcn-ui-sidebar\",\"children\":[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-[1.2rem] w-[1.2rem]\",\"ref\":\"$undefined\",\"children\":[\"$\",\"path\",null,{\"d\":\"$6\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}],\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input shadow-sm hover:bg-accent hover:text-accent-foreground rounded-full w-8 h-8 bg-background\",\"ref\":null}],[\"$\",\"$L7\",null,{}]]}]]}]}],[\"$\",\"main\",null,{\"className\":\"min-h-[calc(100vh-57px-97px)] flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"container relative pb-10\",\"children\":[[\"$\",\"section\",null,{\"className\":\"mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-6\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]\",\"children\":\"Sidebar example built on top of shadcn/ui\"}],[\"$\",\"span\",null,{\"className\":\"max-w-[750px] text-center text-lg font-light text-foreground\",\"children\":\"A stunning and functional retractable sidebar for Next.js using shadcn/ui complete with desktop and mobile responsiveness.\"}],[\"$\",\"div\",null,{\"className\":\"flex w-full items-center justify-center space-x-4 py-4 md:pb-6\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/dashboard\",\"children\":[\"Demo\",[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"ml-2\",\"ref\":\"$undefined\",\"children\":[\"$\",\"path\",null,{\"d\":\"M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}]],\"className\":\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"https://ui.shadcn.com/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"Learn shadcn/ui\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2\",\"ref\":null}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full flex justify-center relative\",\"children\":[[\"$\",\"$L8\",null,{\"src\":\"/demo-light-min.png\",\"width\":1080,\"height\":608,\"alt\":\"demo\",\"priority\":true,\"className\":\"border rounded-xl shadow-sm dark:hidden\"}],[\"$\",\"$L8\",null,{\"src\":\"/demo-dark-min.png\",\"width\":1080,\"height\":608,\"alt\":\"demo-dark\",\"priority\":true,\"className\":\"border border-zinc-600 rounded-xl shadow-sm hidden dark:block dark:shadow-gray-500/5\"}],[\"$\",\"$L8\",null,{\"src\":\"/demo-mobile-light-min.png\",\"width\":228,\"height\":494,\"alt\":\"demo-mobile\",\"className\":\"border rounded-xl absolute bottom-0 right-0 hidden lg:block dark:hidden\"}],[\"$\",\"$L8\",null,{\"src\":\"/demo-mobile-dark-min.png\",\"width\":228,\"height\":494,\"alt\":\"demo-mobile\",\"className\":\"border border-zinc-600 rounded-xl absolute bottom-0 right-0 hidden dark:lg:block\"}]]}]]}]}],[\"$\",\"footer\",null,{\"className\":\"py-6 md:py-0 border-t border-border/40\",\"children\":[\"$\",\"div\",null,{\"className\":\"container flex flex-col items-center justify-center gap-4 md:h-24 md:flex-row\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-balance text-center text-sm leading-loose text-muted-foreground\",\"children\":[\"Built on top of\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://ui.shadcn.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"font-medium underline underline-offset-4\",\"children\":\"shadcn/ui\"}],\". The source code is available on\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/salimi-my/shadcn-ui-sidebar\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"font-medium underline underline-offset-4\",\"children\":\"GitHub\"}],\".\"]}]}]}]]}],null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"8ALRUTUtG9dOH9lCNt-gu\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],null]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nc:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"shadcn/ui sidebar\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness.\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"http://localhost:3000\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"shadcn/ui sidebar\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness.\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:url\",\"content\":\"http://localhost:3000\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:height\",\"content\":\"628\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"http://localhost:3000/opengraph-image.png?80ced22aa2580bb7\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:title\",\"content\":\"shadcn/ui sidebar\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:description\",\"content\":\"A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness.\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image:height\",\"content\":\"628\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image\",\"content\":\"http://localhost:3000/twitter-image.png?80ced22aa2580bb7\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/icon.ico?0feaa9213f38694c\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]]\n"])</script><script>self.__next_f.push([1,"a:null\n"])</script></body></html>