chore: setting sidebar

src/components/Setting/ChangePassword.astro

@@ -1,4 +1,4 @@
-<div>
+<form>
   <h2 class='text-3xl font-bold sm:text-4xl'>Password</h2>
   <p class='mt-2'>Manage settings for your account passwords</p>
   <div class='mt-8 space-y-4'>
@@ -50,4 +50,4 @@
       Change
     </button>
   </div>
-</div>
+</form>

src/components/Setting/SettingSidebar.astro

@@ -0,0 +1,81 @@
+---
+import Icon from '../Icon.astro';
+const { pageUrl, name } = Astro.props;
+
+export interface Props {
+  pageUrl: string;
+  name: string;
+}
+---
+
+<div
+  class='container flex min-h-[calc(100vh-37px-70px)] items-stretch sm:min-h-[calc(100vh-37px-96px)]'
+>
+  <aside class='hidden w-56 border-r border-slate-100 py-10 pr-5 md:block'>
+    <nav>
+      <ul class='space-y-1'>
+        <li>
+          <a
+            href='/settings/profile'
+            class=`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${pageUrl === 'profile' ? 'bg-slate-100' : ''}`
+            >Profile</a
+          >
+        </li>
+        <li>
+          <a
+            href='/settings/change-password'
+            class=`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${pageUrl === 'change-password' ? 'bg-slate-100' : ''}`
+            >Change password</a
+          >
+        </li>
+      </ul>
+    </nav>
+  </aside>
+  <div class='grow py-10 pl-0 md:p-10 md:pr-0'>
+    <div class='relative mb-5 md:hidden'>
+      <button
+        class='flex h-10 w-full items-center justify-between rounded-md border border-slate-400 px-2 text-center text-slate-900'
+        id='settings-menu'
+      >
+        {name}
+        <Icon icon='dropdown' />
+      </button>
+      <ul
+        id='settings-menu-dropdown'
+        class='absolute mt-3 hidden w-full space-y-1.5 rounded-md bg-white p-2 shadow-lg'
+      >
+        <li>
+          <a
+            href='/settings/profile'
+            class=`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${pageUrl === 'profile' ? 'bg-slate-100' : ''}`
+            >Profile</a
+          >
+        </li>
+        <li>
+          <a
+            href='/settings/change-password'
+            class=`block w-full rounded px-2 py-1.5 font-medium text-slate-900 hover:bg-slate-200 ${pageUrl === 'change-password' ? 'bg-slate-100' : ''}`
+            >Change password</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <slot />
+  </div>
+</div>
+
+<script>
+  const menuButton = document.getElementById('settings-menu');
+  const menuDropdown = document.getElementById('settings-menu-dropdown');
+
+  menuButton?.addEventListener('click', () => {
+    menuDropdown?.classList.toggle('hidden');
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!menuButton?.contains(e.target as Node)) {
+      menuDropdown?.classList.add('hidden');
+    }
+  });
+</script>

src/components/Setting/UpdateProfile.astro

@@ -1,9 +1,9 @@
-<div>
+<form>
   <h2 class='text-3xl font-bold sm:text-4xl'>Update Profile</h2>
   <p class='mt-2'>Manage settings for your roadmap.sh profile</p>
   <div class='mt-8 space-y-4'>
     <div class='flex w-full flex-col'>
-      <label for='name' class='text-sm text-slate-500 leading-none'>Name</label>
+      <label for='name' class='text-sm leading-none text-slate-500'>Name</label>
       <input
         type='text'
         name='name'
@@ -14,7 +14,9 @@
       />
     </div>
     <div class='flex w-full flex-col'>
-      <label for='email' class='text-sm text-slate-500 leading-none'>Email</label>
+      <label for='email' class='text-sm leading-none text-slate-500'
+        >Email</label
+      >
       <input
         type='email'
         name='email'
@@ -25,6 +27,49 @@
       />
     </div>
 
+    <!-- Github -->
+    <div class='flex w-full flex-col'>
+      <label for='github' class='text-sm leading-none text-slate-500'
+        >Github Username</label
+      >
+      <input
+        type='text'
+        name='github'
+        id='github'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='arikchakma'
+      />
+    </div>
+    <!-- LinkedIn -->
+    <div class='flex w-full flex-col'>
+      <label for='linkedin' class='text-sm leading-none text-slate-500'
+        >LinkedIn Url</label
+      >
+      <input
+        type='text'
+        name='linkedin'
+        id='linkedin'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='https://www.linkedin.com/in/arikchakma/'
+      />
+    </div>
+    <!-- Website -->
+    <div class='flex w-full flex-col'>
+      <label for='website' class='text-sm leading-none text-slate-500'
+        >Website</label
+      >
+      <input
+        type='text'
+        name='website'
+        id='website'
+        class='mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1'
+        required
+        placeholder='https://arikko.dev'
+      />
+    </div>
+
     <button
       class='!mt-5 inline-flex h-10 items-center justify-center rounded-lg border border-slate-300 bg-black p-2 px-4 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60'
       type='button'
@@ -32,4 +77,4 @@
       Update
     </button>
   </div>
-</div>
+</form>

src/icons/dropdown.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+</svg>

src/layouts/SettingLayout.astro

@@ -0,0 +1,133 @@
+---
+import '../styles/global.css';
+import Navigation from '../components/Navigation.astro';
+import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
+import YouTubeBanner from '../components/YouTubeBanner.astro';
+import { siteConfig } from '../lib/config';
+import SettingSidebar from '../components/Setting/SettingSidebar.astro';
+
+export interface Props {
+  title: string;
+  redirectUrl?: string;
+  description?: string;
+  keywords?: string[];
+  noIndex?: boolean;
+  canonicalUrl?: string;
+  permalink?: string;
+  sponsor?: SponsorType;
+  jsonLd?: Record<string, unknown>[];
+}
+
+const {
+  title = siteConfig.title,
+  description = siteConfig.description,
+  keywords = siteConfig.keywords,
+  noIndex = false,
+  permalink = '',
+  canonicalUrl: givenCanonical = '',
+  sponsor,
+  jsonLd = [],
+  redirectUrl = '',
+} = Astro.props;
+
+// Remove trailing slashes to consider the page as canonical
+const currentPageAbsoluteUrl = `https://roadmap.sh${permalink}`;
+
+const canonicalUrl = givenCanonical || currentPageAbsoluteUrl;
+
+const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${
+  import.meta.env.GITHUB_SHA
+}`;
+---
+
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name='generator' content={Astro.generator} />
+    <meta name='commit' content={commitUrl} />
+    <title>{title}</title>
+    <meta name='description' content={description} />
+    <meta name='author' content='Kamran Ahmed' />
+    <meta name='keywords' content={keywords.join(', ')} />
+    {
+      redirectUrl && (
+        <meta http-equiv='refresh' content={`1;url=${redirectUrl}`} />
+      )
+    }
+    {noIndex && <meta name='robots' content='noindex' />}
+    <meta
+      name='viewport'
+      content='width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'
+    />
+    <meta http-equiv='Content-Language' content='en' />
+
+    <meta name='twitter:card' content='summary_large_image' />
+    <meta name='twitter:creator' content='@kamranahmedse' />
+
+    <meta property='og:image:width' content='1200' />
+    <meta property='og:image:height' content='630' />
+    <meta property='og:image' content='https://roadmap.sh/images/og-img.png' />
+    <meta property='og:image:alt' content='roadmap.sh' />
+    <meta property='og:site_name' content='roadmap.sh' />
+    <meta property='og:title' content={title} />
+    <meta property='og:description' content={description} />
+    <meta property='og:type' content='website' />
+    <meta property='og:url' content={currentPageAbsoluteUrl} />
+
+    <link rel='canonical' href={canonicalUrl} />
+
+    <meta name='mobile-web-app-capable' content='yes' />
+    <meta name='apple-mobile-web-app-capable' content='yes' />
+    <meta
+      name='apple-mobile-web-app-status-bar-style'
+      content='black-translucent'
+    />
+    <meta name='apple-mobile-web-app-title' content='roadmap.sh' />
+    <meta name='application-name' content='roadmap.sh' />
+
+    <link
+      rel='apple-touch-icon'
+      sizes='180x180'
+      href='/manifest/apple-touch-icon.png'
+    />
+    <meta name='msapplication-TileColor' content='#101010' />
+    <meta name='theme-color' content='#848a9a' />
+
+    <link rel='manifest' href='/manifest/manifest.json' />
+    <link
+      rel='icon'
+      type='image/png'
+      sizes='32x32'
+      href='/manifest/icon32.png'
+    />
+    <link
+      rel='icon'
+      type='image/png'
+      sizes='16x16'
+      href='/manifest/icon16.png'
+    />
+    <link
+      rel='shortcut icon'
+      href='/manifest/favicon.ico'
+      type='image/x-icon'
+    />
+
+    <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
+
+    <slot name='after-header' />
+    {
+      jsonLd.length > 0 && (
+        <script type='application/ld+json' set:html={JSON.stringify(jsonLd)} />
+      )
+    }
+  </head>
+  <body>
+    <slot name='page-header'>
+      <YouTubeBanner />
+      <Navigation />
+    </slot>
+
+    <slot />
+  </body>
+</html>

src/pages/settings/change-password.astro

@@ -1,10 +1,11 @@
 ---
 import ChangePassword from '../../components/Setting/ChangePassword.astro';
-import BaseLayout from '../../layouts/BaseLayout.astro';
+import SettingSidebar from '../../components/Setting/SettingSidebar.astro';
+import SettingLayout from '../../layouts/SettingLayout.astro';
 ---
 
-<BaseLayout title='Change Password' description=''>
+<SettingLayout title='Change Password' description=''>
-  <div class='container py-10'>
+  <SettingSidebar pageUrl='change-password' name="Change Password">
     <ChangePassword />
-  </div>
+  </SettingSidebar>
-</BaseLayout>
+</SettingLayout>

src/pages/settings/profile.astro

@@ -1,10 +1,11 @@
 ---
+import SettingSidebar from '../../components/Setting/SettingSidebar.astro';
 import UpdateProfile from '../../components/Setting/UpdateProfile.astro';
-import BaseLayout from '../../layouts/BaseLayout.astro';
+import SettingLayout from '../../layouts/SettingLayout.astro';
 ---
 
-<BaseLayout title='Update Profile'>
+<SettingLayout title='Update Profile'>
-  <div class='container py-10'>
+  <SettingSidebar pageUrl='profile' name='Profile'>
     <UpdateProfile />
-  </div>
+  </SettingSidebar>
-</BaseLayout>
+</SettingLayout>