Update navigation:

src/components/AstroIcon.astro

@@ -1,6 +1,5 @@
 ---
 import { parse } from 'node-html-parser';
-import type { Attributes } from 'node-html-parser/dist/nodes/html';
 
 export interface Props {
   icon: string;
@@ -15,7 +14,6 @@ async function getSVG(name: string) {
     eager: true,
   });
 
-
   if (!(filepath in files)) {
     throw new Error(`${filepath} not found`);
   }

src/components/Course/CourseLayout.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 import { CourseSidebar, type CourseSidebarProps } from './CourseSidebar';
-import {type ReactNode, useEffect, useMemo, useState} from 'react';
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import {
   useCompleteLessonMutation,
   useCourseProgress,
@@ -12,6 +12,8 @@ import { getPercentage } from '../../helper/number';
 import { cn } from '../../lib/classname';
 import { CourseNotes } from '../CourseNotes/CourseNotes';
 import { CourseAI } from '../CourseAI/CourseAI';
+import { RoadmapIcon } from '../ReactIcons/RoadmapIcon';
+import { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo';
 
 export type CourseLayoutProps = {
   children: ReactNode;
@@ -123,7 +125,7 @@ export function CourseLayout(props: CourseLayoutProps) {
 
       <section
         className={cn(
-          'grid h-screen grid-rows-[1fr_60px] overflow-hidden bg-white text-black',
+          'grid h-screen overflow-hidden bg-white text-black',
           activeChapterId && activeLessonId
             ? 'grid-rows-[1fr_60px]'
             : 'grid-rows-1',

src/components/Course/CourseSidebar.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import type { ChapterFileType, LessonFileType } from '../../lib/course';
 import { Chapter } from './Chapter';
-import { StickyNote } from 'lucide-react';
+import { StickyNote, ChevronLeft } from 'lucide-react';
+import { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo';
 
 export type CourseSidebarProps = {
   activeCourseId: string;
@@ -31,13 +32,23 @@ export function CourseSidebar(props: CourseSidebarProps) {
 
   return (
     <aside className="border-r">
-      <div className="border-b p-4">
+      <a
-        <h2 className="mb-1.5 text-2xl font-semibold">{title}</h2>
+        href="/roadmaps"
-        <div className="text-sm">
+        className="flex items-center gap-1 border-b bg-gray-100 px-3 py-2 text-sm hover:bg-gray-200"
-          <span className="rounded-lg bg-yellow-300 px-1.5 py-0.5 text-black">
+      >
-            {completedPercentage}%
+        <ChevronLeft className="size-4" />
-          </span>{' '}
+        Back to All Courses
-          Completed
+      </a>
+
+      <div className="border-b">
+        <div className="px-4 pb-5 pt-7">
+          <h2 className="mb-1.5 text-2xl font-semibold">{title}</h2>
+          <div className="text-sm">
+            <span className="rounded-lg bg-yellow-300 px-1.5 py-0.5 text-black">
+              {completedPercentage}%
+            </span>{' '}
+            Completed
+          </div>
         </div>
       </div>
 

src/components/Navigation/Navigation.astro

@@ -1,11 +1,9 @@
 ---
-import { Menu } from 'lucide-react';
+import { AccountStreak } from '../AccountStreak/AccountStreak';
 import Icon from '../AstroIcon.astro';
 import { NavigationDropdown } from '../NavigationDropdown';
-import { AccountDropdown } from './AccountDropdown';
-import NewIndicator from './NewIndicator.astro';
-import { AccountStreak } from '../AccountStreak/AccountStreak';
 import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu';
+import { AccountDropdown } from './AccountDropdown';
 ---
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
@@ -48,7 +46,7 @@ import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu'
         </a>
         <a
           href='/changelog'
-          class='group relative text-blue-300 hover:text-white hidden md:block ml-0.5'
+          class='group relative ml-0.5 hidden text-blue-300 hover:text-white md:block'
         >
           Changelog
 

src/components/ReactIcons/RoadmapLogo.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+
+type RoadmapLogoIconProps = SVGProps<SVGSVGElement> & {
+  color?: 'white' | 'black';
+};
+
+export function RoadmapLogoIcon(props: RoadmapLogoIconProps) {
+  const { color = 'white', ...rest } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="30"
+      viewBox="0 0 283 283"
+      {...rest}
+    >
+      <path
+        fill={color === 'black' ? '#000' : '#fff'}
+        d="M0 39C0 17.46 17.46 0 39 0h205c21.539 0 39 17.46 39 39v205c0 21.539-17.461 39-39 39H39c-21.54 0-39-17.461-39-39V39Z"
+      />
+      <path
+        fill={color === 'black' ? '#fff' : '#000'}
+        d="M121.215 210.72c-1.867.56-4.854 1.12-8.96 1.68-3.92.56-8.027.84-12.32.84-4.107 0-7.84-.28-11.2-.84-3.174-.56-5.88-1.68-8.12-3.36s-4.014-3.92-5.32-6.72c-1.12-2.987-1.68-6.813-1.68-11.48v-84c0-4.293.746-7.933 2.24-10.92 1.68-3.173 4.013-5.973 7-8.4s6.626-4.573 10.92-6.44c4.48-2.053 9.24-3.827 14.28-5.32a106.176 106.176 0 0 1 15.68-3.36 95.412 95.412 0 0 1 16.24-1.4c8.96 0 16.053 1.773 21.28 5.32 5.226 3.36 7.84 8.96 7.84 16.8 0 2.613-.374 5.227-1.12 7.84-.747 2.427-1.68 4.667-2.8 6.72a133.1 133.1 0 0 0-12.04.56c-4.107.373-8.12.933-12.04 1.68s-7.654 1.587-11.2 2.52c-3.36.747-6.254 1.68-8.68 2.8v95.48zm45.172-22.4c0-7.84 2.426-14.373 7.28-19.6s11.48-7.84 19.88-7.84 15.026 2.613 19.88 7.84 7.28 11.76 7.28 19.6-2.427 14.373-7.28 19.6-11.48 7.84-19.88 7.84-15.027-2.613-19.88-7.84-7.28-11.76-7.28-19.6z"
+      />
+    </svg>
+  );
+}