2024-02-03 12:07:50 +00:00
2024-02-12 19:08:49 +00:00
import { $ , component $ } from "@builder.io/qwik" ;
2024-02-05 20:38:14 +00:00
import Icon from "~/components/core/icon" ;
import { data } from '~/mock-data' ;
import type { Section } from '~/types/PSC' ;
import { useTheme } from '~/store/theme-store' ;
2024-02-09 22:51:32 +00:00
import articles from '~/data/articles' ;
2024-02-03 12:07:50 +00:00
2024-02-05 20:38:14 +00:00
export default component $ ( ( ) = > {
2024-02-03 12:07:50 +00:00
2024-02-05 20:38:14 +00:00
const { theme , setTheme } = useTheme ( ) ;
2024-02-03 12:07:50 +00:00
2024-02-12 19:08:49 +00:00
const themes = [
'dark' , 'light' , 'night' , 'cupcake' ,
'bumblebee' , 'corporate' , 'synthwave' , 'retro' ,
'valentine' , 'halloween' , 'aqua' , 'lofi' ,
'fantasy' , 'dracula'
] ;
const deleteAllData = $ ( ( ) = > {
const isConfirmed = confirm ( 'Are you sure you want to delete all local data? This will erase your progress.' ) ;
if ( isConfirmed ) {
localStorage . clear ( ) ;
location . reload ( ) ;
}
} ) ;
2024-02-03 12:07:50 +00:00
return (
2024-02-04 16:38:51 +00:00
< >
< input id = "my-drawer-3" type = "checkbox" class = "drawer-toggle" / >
< div class = "navbar bg-base-100" >
< div class = "flex-1" >
< div class = "flex-none md:hidden" >
< label for = "my-drawer-3" aria - label = "open sidebar" class = "btn btn-square btn-ghost" >
< svg xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 24 24" class = "inline-block w-6 h-6 stroke-current" > < path stroke - linecap = "round" stroke - linejoin = "round" stroke - width = "2" d = "M4 6h16M4 12h16M4 18h16" > < / path > < / svg >
< / label >
< / div >
< a href = "/" class = "btn btn-ghost text-xl flex capitalize" >
< label for = "my-drawer-3" aria - label = "open sidebar" class = "tooltip tooltip-bottom" data - tip = "View all Pages" > < Icon class = "mr-2" icon = "shield" width = { 28 } height = { 28 } / > < / label >
2024-02-09 22:51:32 +00:00
< h1 > Digital Defense < / h1 >
2024-02-04 16:38:51 +00:00
< / a >
< / div >
< div class = "flex-none hidden md:flex" >
< ul class = "menu menu-horizontal px-1" >
< li >
< details >
< summary >
< Icon icon = "checklist" width = { 16 } height = { 16 } / >
Checklists
< / summary >
< ul class = "p-2 bg-base-100 rounded-t-none z-10" >
{ data . map ( ( item : Section , index : number ) = > (
< li key = { ` checklist-nav- ${ index } ` } class = { ` hover:bg- ${ item . color } -600 hover:bg-opacity-15 ` } >
< a href = { ` /checklist/ ${ item . slug } ` } >
< Icon color = { item . color } class = "mr-2" icon = { item . icon } width = { 16 } height = { 16 } / >
{ item . title }
< / a >
< / li >
) ) }
< / ul >
< / details >
< / li >
< li >
< a href = "#" class = "tooltip flex tooltip-bottom" data - tip = "View / Edit Source & Data" >
< Icon icon = "github" width = { 16 } height = { 16 } / > GitHub
< / a >
< / li >
< / ul >
< div class = "tooltip tooltip-bottom" data - tip = "Theme" >
< label class = "cursor-pointer grid place-items-center" >
2024-02-05 20:38:14 +00:00
< input
type = "checkbox"
checked = { theme . theme === 'dark' }
onClick $ = { ( ) = > {
setTheme ( theme . theme === 'dark' ? 'light' : 'dark' ) ;
} }
class = "toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"
/ >
2024-02-04 16:38:51 +00:00
< svg class = "col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke - width = "2" stroke - linecap = "round" stroke - linejoin = "round" > < circle cx = "12" cy = "12" r = "5" / > < path d = "M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" / > < / svg >
< svg class = "col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke - width = "2" stroke - linecap = "round" stroke - linejoin = "round" > < path d = "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" > < / path > < / svg >
< / label >
< / div >
2024-02-12 19:08:49 +00:00
< li class = "list-none px-2" >
< p
onClick $ = { ( ) = > ( ( document . getElementById ( 'settings_modal' ) || { } ) as HTMLDialogElement ) . showModal ( ) }
class = "cursor-pointer tooltip flex tooltip-bottom" data - tip = "Settings" >
< Icon icon = "settings" width = { 20 } height = { 20 } / >
< / p >
< / li >
2024-02-04 16:38:51 +00:00
< / div >
2024-02-03 12:07:50 +00:00
< / div >
2024-02-04 16:38:51 +00:00
< div class = "drawer-side z-10" >
< label for = "my-drawer-3" aria - label = "close sidebar" class = "drawer-overlay" > < / label >
< ul class = "rounded-box menu p-4 w-80 min-h-full bg-base-200" >
< h2 class = "flex text-primary" >
< Icon class = "mr-2" icon = "shield" width = { 16 } height = { 16 } / >
2024-02-09 22:51:32 +00:00
Digital Defense
2024-02-04 16:38:51 +00:00
< / h2 >
2024-02-05 20:38:14 +00:00
< li > < a href = "/" > < Icon class = "mr-2" icon = "homepage" width = { 16 } height = { 16 } / > Home < / a > < / li >
2024-02-09 22:51:32 +00:00
< li > < a href = "https://github.com/lissy93/personal-security-checklist" >
< Icon class = "mr-2" icon = "github" width = { 16 } height = { 16 } / > GitHub < / a >
< / li >
2024-02-04 16:38:51 +00:00
< li >
2024-02-06 17:05:46 +00:00
< a href = "/checklist" > < Icon class = "mr-2" icon = "all" width = { 16 } height = { 16 } / > Checklists < / a >
2024-02-04 16:38:51 +00:00
< ul >
{ data . map ( ( item : Section , index : number ) = > (
< li key = { ` checklist-side- ${ index } ` } class = { ` hover:bg- ${ item . color } -600 hover:bg-opacity-15 ` } >
< a href = { ` /checklist/ ${ item . slug } ` } >
< Icon color = { item . color } class = "mr-2" icon = { item . icon } width = { 16 } height = { 16 } / >
{ item . title }
< / a >
< / li >
) ) }
< / ul >
< / li >
< li >
2024-02-06 17:05:46 +00:00
< a href = "/article" >
< Icon class = "mr-2" icon = "articles" width = { 16 } height = { 16 } / > Articles
< / a >
2024-02-04 16:38:51 +00:00
< ul >
2024-02-09 22:51:32 +00:00
{ articles . map ( article = > (
< li key = { article . slug } >
< a href = { ` /article/ ${ article . slug } ` } > { article . title } < / a >
< / li >
) ) }
2024-02-04 16:38:51 +00:00
< / ul >
< / li >
2024-02-03 12:07:50 +00:00
< li >
2024-02-06 17:05:46 +00:00
< a href = "/about" >
< Icon class = "mr-2" icon = "about" width = { 16 } height = { 16 } / > About
< / a >
2024-02-04 16:38:51 +00:00
< ul >
< li >
< a href = "#" > Contributing < / a >
< / li >
< li >
< a href = "#" > License < / a >
< / li >
< / ul >
2024-02-05 20:38:14 +00:00
< ul >
2024-02-04 16:38:51 +00:00
< li >
2024-02-09 22:51:32 +00:00
< a href = "/about#author" > Author < / a >
2024-02-04 16:38:51 +00:00
< ul >
2024-02-09 22:51:32 +00:00
< li > < a href = "https://aliciasykes.com/contact" > Contact < / a > < / li >
2024-02-04 16:38:51 +00:00
< li >
< a href = "https://apps.aliciasykes.com" > More Apps < / a >
2024-02-09 22:51:32 +00:00
< / li >
< li class = "flex flex-row" >
< a href = "https://github.com/lissy93" > < Icon icon = "hub" width = { 16 } height = { 16 } / > < / a >
< a href = "https://x.com/lissy_sykes" > < Icon icon = "twitter" width = { 16 } height = { 16 } / > < / a >
< a href = "https://mastodon.social/@lissy93" > < Icon icon = "mastodon" width = { 16 } height = { 16 } / > < / a >
< a href = "https://dev.to/lissy93" > < Icon icon = "dev" width = { 16 } height = { 16 } / > < / a >
< a href = "https://linkedin.com/in/aliciasykes" > < Icon icon = "linkedin" width = { 16 } height = { 16 } / > < / a >
2024-02-03 12:07:50 +00:00
< / li >
< / ul >
2024-02-04 16:38:51 +00:00
< / li >
2024-02-05 20:38:14 +00:00
< / ul >
2024-02-03 12:07:50 +00:00
< / li >
< / ul >
< / div >
2024-02-12 19:08:49 +00:00
< dialog id = "settings_modal" class = "modal" >
< div class = "modal-box" >
< div class = "tabs tabs-lifted" >
< p class = "tab tab-active" > Settings < / p >
< a class = "tab" href = "/about" > About < / a >
< / div >
< div class = "modal-action justify-start w-full flex flex-col gap-4" >
< div class = "flex items-between w-full justify-between" >
< label for = "theme" class = "label" > Theme < / label >
< select
id = "theme"
class = "select select-bordered w-full max-w-xs"
onChange $ = { ( event ) = > setTheme ( ( event . target as HTMLSelectElement ) . value ) }
>
< option disabled selected > Theme < / option >
{ themes . map ( ( someTheme ) = > (
< option
key = { someTheme }
value = { someTheme }
selected = { someTheme === theme . theme }
>
{ someTheme . charAt ( 0 ) . toUpperCase ( ) + someTheme . slice ( 1 ) }
< / option >
) ) }
< / select >
< / div >
< div class = "flex items-between w-full justify-between" >
< label class = "label" > Data < / label >
< button class = "btn btn-primary" onClick $ = { deleteAllData } > Delete All < / button >
< / div >
< button
class = "btn my-1 mx-auto"
onClick $ = { ( ) = > ( ( document . getElementById ( 'settings_modal' ) || { } ) as HTMLDialogElement ) . close ( ) }
> Close < / button >
< / div >
< / div >
< / dialog >
2024-02-04 16:38:51 +00:00
< / >
2024-02-03 12:07:50 +00:00
) ;
} ) ;