SUR-356 - Sidebar bug with 'use client;'

.github/workflows/storybook-deployment.yml

@@ -1,39 +1,39 @@
 # Workflow name
 name: Build and Publish Storybook to GitHub Pages
- 
+
 on:
-  # Event for the workflow to run on
-  push:
-    branches:
-      - master
- 
+    # Event for the workflow to run on
+    push:
+        branches:
+            - master
+
 permissions:
-  contents: read
-  pages: write
-  id-token: write
- 
+    contents: read
+    pages: write
+    id-token: write
+
 # List of jobs
 jobs:
-  deploy:
-    environment:
-        name: github-pages
-        url: ${{ steps.build-publish.outputs.page_url }}
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      # Manual Checkout
-      - uses: actions/checkout@v4
- 
-      # Set up Node
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
- 
-      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
-      - id: build-publish
-        uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
-        with:
-          install_command: npm install # default: npm ci
-          build_command: npm run build && npm run build-storybook # default: npm run build-storybook
-          path: storybook-static # default: dist/storybook
-          checkout: false # default: true
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.build-publish.outputs.page_url }}
+        runs-on: ubuntu-latest
+        # Job steps
+        steps:
+            # Manual Checkout
+            - uses: actions/checkout@v4
+
+            # Set up Node
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+
+            #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+            - id: build-publish
+              uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+              with:
+                  install_command: npm install # default: npm ci
+                  build_command: npm run build && npm run build-storybook # default: npm run build-storybook
+                  path: storybook-static # default: dist/storybook
+                  checkout: false # default: true

src/components/sidebar/sidebar.tsx

@@ -6,7 +6,7 @@ import React, {
 	useRef,
 	useEffect,
 } from 'react';
-import { cn } from '@/utilities/functions';
+import { cn, safeLocalStorage } from '@/utilities/functions';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import Tooltip from '../tooltip';
 
@@ -61,10 +61,10 @@ export const Sidebar = ( {
 }: SidebarProps ) => {
 	const sideBarRef = useRef<HTMLDivElement>( null );
 	const [ isCollapsed, setIsCollapsed ] = useState( () => {
-		const storedState = localStorage.getItem( 'sidebar-collapsed' );
+		const storedState = safeLocalStorage.get( 'sidebar-collapsed' );
 		const isSmallScreen = window.innerWidth < 1280;
 		if ( storedState ) {
-			return JSON.parse( storedState );
+			return storedState;
 		}
 		return isSmallScreen;
 	} );
@@ -80,13 +80,13 @@ export const Sidebar = ( {
 			const isSmallScreen = window.innerWidth < 1280;
 			if ( ! collapsible ) {
 				setIsCollapsed( false );
-				localStorage.removeItem( 'sidebar-collapsed' );
+				safeLocalStorage.remove( 'sidebar-collapsed' );
 			} else if ( isSmallScreen ) {
 				setIsCollapsed( true );
-				localStorage.setItem( 'sidebar-collapsed', JSON.stringify( true ) );
+				safeLocalStorage.set( 'sidebar-collapsed', true );
 			} else {
-				const storedState = localStorage.getItem( 'sidebar-collapsed' );
-				setIsCollapsed( storedState ? JSON.parse( storedState ) : false );
+				const storedState = safeLocalStorage.get( 'sidebar-collapsed' );
+				setIsCollapsed( storedState ? storedState : false );
 			}
 
 			if ( sideBarRef.current ) {
@@ -155,10 +155,7 @@ export const SidebarFooter = ( { children }: SidebarCommonProps ) => {
 					onClick={ () => {
 						setIsCollapsed( ! isCollapsed );
 
-						localStorage.setItem(
-							'sidebar-collapsed',
-							JSON.stringify( ! isCollapsed )
-						);
+						safeLocalStorage.set( 'sidebar-collapsed', ! isCollapsed );
 					} }
 					aria-label={
 						isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'

src/utilities/functions.js

@@ -86,3 +86,45 @@ export const formatFileSize = ( size ) => {
 	}
 	return `${ ( size / ( 1024 * 1024 * 1024 ) ).toFixed( 2 ) } GB`; // Format size to GB
 };
+
+/**
+ * Safe local storage set, get and remove functions.
+ *
+ */
+export const safeLocalStorage = {
+	set: ( key, value ) => {
+		if ( typeof window === 'undefined' ) {
+			return;
+		}
+		try {
+			localStorage.setItem( key, JSON.stringify( value ) );
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error( error );
+		}
+	},
+	get: ( key ) => {
+		if ( typeof window === 'undefined' ) {
+			return null;
+		}
+		try {
+			const value = localStorage.getItem( key );
+			return value ? JSON.parse( value ) : null;
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error( error );
+			return null;
+		}
+	},
+	remove: ( key ) => {
+		if ( typeof window === 'undefined' ) {
+			return;
+		}
+		try {
+			localStorage.removeItem( key );
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error( error );
+		}
+	},
+};