PLU-470: add learning resources to sidebar (#966)

## Details
- Added an external link to the learning resources because right now,
there is no way to access it from our plumber app.
- Made it responsive for mobile and smaller screens too
- Moved the new badge from `Templates` to `Learn` button instead

## Before & After Screenshots
**BEFORE**:


https://github.com/user-attachments/assets/fd0467d3-8cb3-4192-81a0-83e66dcf1c53

**AFTER**:


https://github.com/user-attachments/assets/9df27e15-4ed8-42b9-be48-0f526301e525

## Tests
- Check that all pages can still be accessed e.g. pipes, tiles
- Check that learning resource page is accessed as a new tab

Author: m0nggh

packages/frontend/src/components/Layout/NavigationDrawer.tsx

@@ -33,13 +33,8 @@ export default function NavigationDrawer() {
       <Drawer placement="left" onClose={closeDrawer} isOpen={isDrawerOpen}>
         <DrawerOverlay />
         <DrawerContent>
-          <DrawerCloseButton
-            pos="relative"
-            mt={8}
-            ml={4}
-            color="base.content.strong"
-          />
-          <DrawerBody p={4}>
+          <DrawerCloseButton pos="absolute" color="base.content.strong" />
+          <DrawerBody p={4} mt={6}>
             <NavigationSidebar />
           </DrawerBody>
         </DrawerContent>

packages/frontend/src/components/Layout/NavigationSidebar.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { Link, matchPath, useLocation } from 'react-router-dom'
-import { Box, Text } from '@chakra-ui/react'
+import { Box, Divider, Text } from '@chakra-ui/react'
 import {
   Badge,
   SidebarContainer,
@@ -22,7 +22,7 @@ function NavigationSidebarItem({
 }: NavigationSidebarItemProps): JSX.Element {
   const { pathname } = useLocation()
 
-  const { to, Icon: icon, text, otherLinks } = link
+  const { to, Icon: icon, text, otherLinks, isExternal } = link
   const selected = [to, ...(otherLinks || [])].some((link) =>
     matchPath(link, pathname),
   )
@@ -34,7 +34,8 @@ function NavigationSidebarItem({
       icon={icon}
       as={Link}
       to={to}
-      onClick={closeDrawer}
+      target={isExternal ? '_blank' : undefined}
+      onClick={isExternal ? undefined : closeDrawer}
       isActive={!!selected}
       color="base.content.default"
       _hover={{
@@ -69,23 +70,31 @@ export default function NavigationSidebar() {
   return (
     // top sidebar items
     <SidebarContainer variant="sticky">
-      {links.map(
-        (link, index) =>
-          !link.isBottom && (
-            <NavigationSidebarItem
-              key={index}
-              link={link}
-              closeDrawer={closeDrawer}
-            />
-          ),
-      )}
+      <Box p={0}>
+        {links.map(
+          (link, index) =>
+            !link.isBottom && (
+              <NavigationSidebarItem
+                key={index}
+                link={link}
+                closeDrawer={closeDrawer}
+              />
+            ),
+        )}
+      </Box>
 
-      {/* bottom sidebar items */}
-      <Box
-        position="fixed"
-        bottom={2}
-        w={{ base: 'calc(100% - 2rem)', sm: 'inherit' }}
+      <Text
+        p={4}
+        display={{ sm: 'none', lg: 'block' }}
+        ml={{ sm: 0, lg: 2 }}
+        textStyle="caption-3"
       >
+        Resources
+      </Text>
+      <Divider my={2} hideFrom="lg" hideBelow="sm" />
+
+      {/* bottom sidebar items */}
+      <Box>
         {links.map(
           (link, index) =>
             link.isBottom && (

packages/frontend/src/components/Layout/index.tsx

@@ -1,5 +1,11 @@
 import { useMemo, useState } from 'react'
-import { BiBookOpen, BiHistory, BiSolidGrid, BiTable } from 'react-icons/bi'
+import {
+  BiBookOpen,
+  BiBookReader,
+  BiHistory,
+  BiSolidGrid,
+  BiTable,
+} from 'react-icons/bi'
 import { Box, Divider, Show } from '@chakra-ui/react'
 
 import AppBar from '@/components/AppBar'
@@ -26,6 +32,7 @@ export type DrawerLink = {
   otherLinks?: string[]
   isBottom?: boolean
   badge?: string
+  isExternal?: boolean
 }
 
 const drawerLinks = [
@@ -55,7 +62,14 @@ const drawerLinks = [
     text: 'Templates',
     to: URLS.TEMPLATES,
     isBottom: true,
+  },
+  {
+    Icon: BiBookReader,
+    text: 'Learn',
+    to: URLS.LEARN_LINK,
+    isBottom: true,
     badge: 'New',
+    isExternal: true,
   },
 ]
 

packages/frontend/src/config/urls.ts

@@ -84,3 +84,4 @@ export const SGID_CHECK_ELIGIBILITY_URL =
   'https://docs.id.gov.sg/faq-users#as-a-government-officer-why-am-i-not-able-to-login-to-my-work-tool-using-sgid'
 export const TEMPLATES_FORM_LINK = 'https://go.gov.sg/request-template'
 export const SUPPORT_FORM_LINK = 'https://go.gov.sg/plumber-support'
+export const LEARN_LINK = 'https://go.gov.sg/learn-plumber'